UIデザイン用に最適化されたおすすめのフリーフォント!小さいサイズでもくっきり綺麗で、読みやすい -Inter

以前、当ブログで紹介した「Inter UI」が名を改め、さらにくっきり綺麗に表示されるよう進化したUIデザイン用のフリーフォントを紹介します。

特に、小さい文字サイズと中くらいの文字サイズの読みやすさに重点が置かれており、スマホやデスクトップのスクリーンで表示するユーザーインターフェイス用に最適化されたフォントです。

サイトのキャプチャ

Inter
Inter -GitHub

Interとは

Interは、UIでよく使われるRoboto, San Francisco, Lucida Grandeにインスパイアされたフォントです。小さいサイズでより機能するようにデザインされています。
SIL Open Font Licenseで、個人でも商用でも無料で利用できます。

ウェイトは9種類あり、それぞれイタリック体も揃っています。
フォーマットは、.otf, .ttfの他に、Webフォントも揃っています。

Interのスタイルとウェイト

Interのスタイルとウェイト

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

Interは小さい文字でも読みやすい

Interは小さいサイズの文字・大文字と小文字の混在でも読みやすい

以前の「Inter UI」はバージョン2.xでしたが、現在は3.xとしてリリースされています。以前との比較は過去記事を参考にしてください。

UIデザインに最適化されたフリーフォントが素晴らしい!小さいサイズでもくっきり綺麗に表示される -Inter UI

Interのダウンロード

Interのダウンロードは、下記ページから。

サイトのキャプチャ

Inter -GitHub

「Clone or Download」をクリックして、「Download Zip」をクリックするとダウンロードできます。

Interの特徴

Interでは、ユーザーインターフェイズで読みやすい文字を提供するためのさまざまな工夫がされています。

Interの特徴

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

Interの特徴

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

Interの特徴

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

Interの特徴

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

Interの特徴

キャラクターバリアント
チェリーピッキングの代替文字を許可。

Interの使用例

Interはウェイトが9種類も揃っており、さまざまなデザインに使用できます。

サイトのキャプチャ

Samples -Inter

サイトのキャプチャ

Samples -Inter

サイトのキャプチャ

Samples -Inter

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

サイトのキャプチャ

Lab -Inter

sponsors

top of page

©2019 coliss