ウェブサイト・UI向け無料フォント

「保存」ボタンから書体を見る

UIの書体は大きな見出しだけでなく、短いボタンやエラーメッセージにも使われます。「保存」「もう一度試す」「合計11,000円」を実際のサイズで比べてみましょう。数字の1と英字のI、lが区別できるかも確認します。

翻訳と拡大で行が増える

短い日本語のラベルに合う幅でも、英語の説明や長いエラー文は収まらないことがあります。高さを一行に固定せず、内容が増える余地を確保しましょう。狭い画面やブラウザー拡大で文字が切れるとき、サイズを下げるだけで解決しないことが大切です。

読み込み前後と欠けた文字を確認する

web.devはフォント読み込みや代替書体が表示とレイアウト移動に影響すると説明しています。遅い回線で文字が切り替わる瞬間も確認しましょう。一部の文字だけ形が違う場合は、別の書体で補われている可能性があります。実際に使う日本語、韓国語、英字、価格、記号をまとめて試してください。

この順番で比べてみましょう

1. 「UI」で候補を絞ります。
2. プレビューを実際のインターフェースの文章に変えます。
3. 同じサイズで数書体を比べ、最終媒体で太さと間隔を調整します。
4. 詳細ページで対応言語、公式配布元、用途に合うライセンス条件を確認します。

実際のフォントで比べる

• Pretendard

  PretendardをUIに使うときは、名前だけでなく読み込んだ太さと言語別ファミリーを確認します。短いボタン、価格、長い案内を一緒に比べましょう。

• D2Coding

  D2Codingは、コード中の似た文字と列の整列を比べる候補です。通常の本文とは分け、数字、記号、韓国語コメントを含む実際のコードで確認します。