Upgrade to Pro — share decks privately, control downloads, hide ads and more …

令和元年ベストのfont-familyはこれだ / Better font-family 20...

Yasunobu Ikeda
December 13, 2019

令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese

🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠
2020年に最適なfont-familyの書き方 - ICS MEDIA
https://ics.media/entry/200317/

---

OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。

他にも「MS Pゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。

Website fonts have been affected by OS and Browser updates. Recently, iOS 13.0 Safari has caused a lot of fonts problems, and there have been many websites that appear serif fonts in macOS Catalina and Chrome.

There are other problems such as “MS P Gothic” , “Yu Gothic” thinness problems, and antialias fonts changes. In this Lightning Talk, we will introduce font specification as the optimal solution for today.

Yasunobu Ikeda

December 13, 2019
Tweet

More Decks by Yasunobu Ikeda

Other Decks in Design

Transcript

  1. /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",

    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
  2. OS

  3. 2017 Windows Chrome 56 Firefox 57 sans-serif 2017 1 (Chrome)

    2017 8 (Firefox) sans-serif sans-serif
  4. UI Windows 10 : Yu Gothic UI Windows 8.1 :

    Segoe UI Meiryo font-family: system-ui
  5. : /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino

    Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
  6. Hiragino Sans Hiragino Sans /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont,

    "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
  7. iOS 13 Safari sans-serif Hiragino Sans iOS Hiragino Sans W3,

    W6, W8 font-weight: bold; 700 Hiragino Sans W8
  8. font-weight: 600; /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",

    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600; iOS 13.1 W8 W7
  9. BlinkMacSystemFont SF Display Pro Hiragino Sans macOS Hiragino Sans (100

    900) font-weight: 600; macOS Catalina × Chrome 79