UIデザイン用に最適化されたおすすめのフリーフォント!小さいサイズでもくっきり綺麗で、読みやすい -Inter
Post on:2019年9月9日
以前、当ブログで紹介した「Inter UI」が名を改め、さらにくっきり綺麗に表示されるよう進化したUIデザイン用のフリーフォントを紹介します。
特に、小さい文字サイズと中くらいの文字サイズの読みやすさに重点が置かれており、スマホやデスクトップのスクリーンで表示するユーザーインターフェイス用に最適化されたフォントです。

Interとは
Interは、UIでよく使われるRoboto, San Francisco, Lucida Grandeにインスパイアされたフォントです。小さいサイズでより機能するようにデザインされています。
SIL Open Font Licenseで、個人でも商用でも無料で利用できます。
ウェイトは9種類あり、それぞれイタリック体も揃っています。
フォーマットは、.otf, .ttfの他に、Webフォントも揃っています。

Interのスタイルとウェイト
読みやすさのために、文字のデザインはx-heightが高めにデザインされています。大文字と小文字でx-heightが揃えられているので、大文字と小文字が混在するテキストも読みやすくなっています。

Interは小さいサイズの文字・大文字と小文字の混在でも読みやすい
以前の「Inter UI」はバージョン2.xでしたが、現在は3.xとしてリリースされています。以前との比較は過去記事を参考にしてください。
UIデザインに最適化されたフリーフォントが素晴らしい!小さいサイズでもくっきり綺麗に表示される -Inter UI
Interのダウンロード
Interのダウンロードは、下記ページから。

「Clone or Download」をクリックして、「Download Zip」をクリックするとダウンロードできます。
Interの特徴
Interでは、ユーザーインターフェイズで読みやすい文字を提供するためのさまざまな工夫がされています。

左: コンテキスト代替
文字の特定の組み合わせにより、文字間が自動で調整される機能。
右: リガチャ
数式や矢印などの文字間を最適化。

左上: 数字
数字、数字と記号の表記を最適化。
右上: 分数
スラッシュで区切られた数字を適切な分数に変換。
下: 分子形式と分母形式に対応。

上: 上付きと下付きに対応。
左下: 代替
一部のグリフを切り替えて、大文字と数字でより適切に機能するように。
右下: 代替数字
数字の代替スタイル。

左上: 文字の明確化
0とO、Iとlのような似たような文字の視覚的な違いを増やす。
右上: r曲線
rは、読みやすさを高めるために、隣接する丸い形に湾曲。
左下: 裁量の合字
似たような文字の視覚的な違いを増やす代替グリフ。
右下: スラッシュ付きの0。

キャラクターバリアント
チェリーピッキングの代替文字を許可。
Interの使用例
Interはウェイトが9種類も揃っており、さまざまなデザインに使用できます。



オンラインで試すこともできます。

sponsors