Webタイポグラフィチェックリスト

すべてのウェブサイトは、タイポグラフィを必要とするが、ウェブサイトのために書体を選ぶ前に、あなたが考慮する必要があること、あなた自身に尋ねなければならない質問がたくさんあります.
このポストは、このような質問のコレクションです-の両方の設計者やフロントエンドの開発者のための提案と回答.

WebSafeやシステムフォントを使えますか？

最良のフォントは、あなたがダウンロードする必要がないものです-あなたのシステム上で既にフォント.また、WebSafeフォントとして知られている、これらの“タイムズ”、“ジョージア”、“アルアル”と“インパクト”のような古典的な顔文字が含まれます.
これらの“古典的なwebsafeフォント”は(MIS -)ので、長年にわたって使用されているので、彼らはもう際立っていない.CSSでは、ジェネリックファミリ名はこれらに対応します.

font-family: serif; /* Times */
font-family: sans-serif; /* Arial / Helvetica */
font-family: monospace; /* Courier */
font-family: cursive; /* Apple Chancery (Mac), Comic Sans (Windows) */
font-family: fantasy; /* Papyrus (Mac), Impact (Windows) */

Bonus: SNL made a about Papyrus.

また、これらのタイプをサポートします

font-family: emoji;
font-family: math;
font-family: fangsong;

しかし、これらのいずれかのOSXまたはWindowsのデフォルトのフォントのフォールバックはありません.

新しいUI -システムフォント

font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;

The ui- -フォントはオペレーティングシステムのデフォルトシステムフォントです.
Windowsでのみsystem-ui は現在、“Segoe UI”-フォントファミリでサポートされています.
OSX上でsystem-ui and ui-sans-serif "SF Pro "-フォントです.ui-monospace が「モノ」であるui-serif 美しい「ニューヨーク」は

Webフォントとして配布することはできませんが、Appleはfree download あなたの(非アップル)システムのために.
dev . toとgithubの両方がシステムフォントを使用しており、これらのサイトはPCに比べてMac上で若干異なるように見える.

body {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}

私は、より単純で、新しい方が好きですui- -構文system-ui -フォールバック

body {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

長所

システムフォントはすべての言語で利用可能であり、特にOSXでは、美しく、読みやすく、可変フォントを得る.

短所

あなたのウェブサイトは、Windowsベースのブラウザ、またはOSXベースのブラウザ上のアップルのように見えるでしょう.

その他のオプション

WebSafeシステムフォントを使用できない場合は、フリーフォントサービスからフォントを選択する前に、これらのことを考慮する必要があります.

サイトが複数の言語をサポートするか？

yesの場合は、すべてをサポートするフォントを選択します.

複数の重みとスタイル（太字、斜体など）が必要ですか？

yesの場合、変数のフォントを使うことを考えてください.変数のフォントは一般的に多くの重みとスタイルをロードする場合に比べて、多くのスペースを節約できます.最も人気のある可変フォントの一つはInter Font-Family , は、単一の変数のフォントで古典的なスイスベースのタイポグラフィをキャプチャします.
あなたが異なる重みまたはスタイルをロードしないならば、まだ書いてくださいfont-weight: 700 or font-style: italic CSSコードでは、ブラウザが作成されますfaux bold or italic :

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design.

サイトは中国で働くべきか？

もしそうであれば、Googleのサービスが中国では常に安定していないので、フォントを見つけることができます.

ウェブサイトはオフラインで動作しますか？

あなたがサービスワーカーを使ってサイトをキャッシュしている場合は、フォントを見つける必要があります.そこでは、ライセンスは、ユーザーのデバイスにダウンロードされるフォントを許可します.

グーグルフォント

Google Fonts は、1035フォントの家族と現在のGoogleから無料のフォントサービスです.あなたが必要とするフォント(s)を選んでください、そして、あなたは彼らを実行して、使う方法として導かれます.
あなたのサイトで使用している場合は、Googleフォントに必要なエントリを追加してください.

自作のGoogleフォント

Googleのフォントはあなたのサイトのパフォーマンスを遅くすることができます.より良いパフォーマンスのために、あなた自身のGoogleフォントをホストしてください.
Here's an excellent tool それは正しいファイルをダウンロードするのに役立ちます.

ライセンスフォント

私の個人的な好みはtypography.com ), そして、あなたはよく一流の品質のフォントを得る.
しかし、あなたのサイトは目立つでしょう.多くのライセンスフォントにはsmall caps and ligatures そして、ずっと.

フォールバックフォント

WebSafeやシステムフォントではないフォントを選んだときは、一般的なフォールバックフォントファミリを提供する必要があります.これは、実際のフォントがダウンロードされるまであなたのブラウザが使用されるものです.
例: GoogleフォントのRobotoを使う

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}

一般的なフォントファミリーsans-serif はフォールバックフォントです.注意display=swap インポートラインの最後に?以下のように置き換えます.

font-display: swap;

他font-display-options , the swap -オプション:

... gives the font face an extremely small block period and an infinite swap period.

しかし、正しいフォントがダウンロードされたときにレイアウトのシフトを経験することができます.
これは、フォントが異なるX -高さ(下のケース「x」の高さ)、アセンダー、子孫とより多くを持つので、それはです:

これを解決するには、CSSでフォントメトリックオーバーライド記述子と呼ばれるものを使用して、スワップフォントにマッチするようにフォールバックフォントのプロパティを変更できます.

これは現在、ChromeとEDGEだけですが、うまくいけば他のブラウザはすぐにキャッチされます.
ジェイクArchibaldは、彼がフォントメトリックオーバーライド記述子について話すところを作りました.
彼の例では、置換フォントに対応するためにフォールバックフォントの記述子を模倣することができます.

次の手順

あなたのフォントを選んだときは、いくつかのより多くのことを考慮する左:行の長さ、ハイフネーションとテキストの方向です.

線長とフォント長単位

タイポグラフィでは、ライン上の文字の理想的な数は60と70の間です.
テキストの行が大きすぎる場合は、読者の目は、テキストに焦点を当てている困難な時間がありますが、それがあまりに狭い場合は、目はあまりにも頻繁に戻って、リズムを破るに移動する必要があります.
CSSは多くのfont-relative lengths :

cap (キャップ高)

ch (グリフ' 0 'の幅.

em (計算されたフォントサイズ)

ex (フォントのx - height )

ic ……を測る水"グリフ

lh (線の高さの計算値)

rem (ルート要素のフォントサイズ)

rlh (ルートラインの高さの計算値)

chを使う例

.class {
  width: 60ch;
}

ハイフネーション

ブラウザはすべての言語のハイフネーションをサポートしません.
もしあなたの言語がサポートされているなら、これをCSSに追加してください.

.class {
  hyphens: auto;
}

しかし、日本語、タイ語、韓国語のような言語は、訓練されていない目に1つの長い文字列と思われる文章を持つことができます.ブラウザが正しくハイフンできない場合には、「ソフトハイフン」を使って「単語ブレイク機会」を提案することをお勧めします.­残念ながら、ほとんどのCMSベースのシステムでは、エディタでは、HTMLコードを入力することはできません.
エディタでパイプ文字を入力するプロジェクトに取り組んできました| 代わりに「ワードブレイク機会」のために

De|oxy|ribo|nuclease

を返します.

De­oxy­ribo­nuclease

タイ語では、単語間の空白を使わないので、本当に難しいです.

Thai line breaking and word breaking, unlike western languages, is still considered an unsolved problem and is still actively tackled by many linguistics researchers. Currently there is no implementation that could perfectly break a sentence to Thai words.
Many times, it has something to do with the context. For example, the phrase "ตากลม" can be correctly broken to "ตา","กลม" or "ตาก","ลม". Each way says totally different thing but Thai readers can still perfectly understand the intended meaning, given the context.

問題の場合、

.class {
  word-break: break-all;
}

しかし、結果はきれいではない.

右から左へ

作業中[dir="rtl"] -サイト、それを使用することをお勧めしますCSS Logical Properties .
これはフロントエンドの開発者にとって「慣れる」という意味です.以前は英語/ラテンベースのテキストだけで働いていました.
以前

.class {
  text-align: left;
  padding-right: 1em;
  margin-top: 1em;
}

その後

.class {
  text-align: start;
  padding-inline-end: 1em;
  margin-block-start: 1em;
}

サファリにはいくつかの問題がありますinset-inline-end :

.class {
  inset-inline-end: 1em;
  position: absolute;
}

今のところ、ハックを書く必要があります.

@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (stroke-color:transparent) { 
  .class {
    right: 1em;
  }
}}

最後の思考

タイポグラフィーに関しては、ベンダ接頭辞を必要とする多くの「実験的な特徴」または恐れがあります.OSXでは人気があります-webkit-font-smoothing -プロパティ.
変数のフォントには、この記事の範囲を超えて設定の数があります.
ドキュメントの最適な場所は常にです.MDN .
読書ありがとう!