参照： SVELTE公式ページ
svelteの公式ページを読んで初めて思ったのが、
「このフォント何じゃ？」でした。
それほどインパクトがあり、シンプルで洒落ていると感じさせる装い(中身読んでない)。
そのフォントについて少しと、svelteと同じJavaScriptのフレームワーク仲間であるVue.jsとReactの公式ページのフォントを記載してみた。
予想としては「Vue.jsの人はフォントめちゃくちゃこだわってそう」です。
Overpass
SVELTE公式ページで使われているフォントの正体は「Overpass」なるものでした。
Overpassは、米国連邦道路局用に描かれたFHWA シリーズハイウェイ ゴシック標識アルファベットに基づいたデジタル書体です。デルブ・ウィズリントンとデイブ・ベイリー、トーマス・ジョッキンによって設計されました。
https://en.wikipedia.org/wiki/Overpass_(typeface)
発売日 2015 年 8 月 28 日
大きく目を引くデザインだったのは、道路標識に利用されていた、ということが原因なのかもしれない。
Vue.jsとReactページの使用フォントも調べてみた
| Svelte | Overpass | https://svelte.dev/ |
|---|---|---|
| Vue.js | Inter var | https://ja.vuejs.org/ |
| React(旧サイト) | system-ui | https://ja.legacy.reactjs.org/ |
| React(新サイト) | Optimistic Display | https://ja.react.dev/ |
Vueのサイト自体はパリピでウェイウェイしていたものの、フォント自体はシンプルだった。
フォントのことをもっと知りたいと感じた。が今日はここまで。
参考にした記事
■ Overpass (Wikipedia)
■ 「フォント図鑑、Google Fonts編 vol.5」、note、(2019年5月2日)
→デザイナーさんの普段使いフォントならば失敗ない！(何もしないが)と強く感じました。
■ SVELTE公式サイト
■ Vue.js公式サイト
■ React旧サイト
■ React新サイト(2023/03~)