$30 off During Our Annual Pro Sale. View Details »

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

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. DIST.30 CSS
    ICS
    12 13
    font-family

    View Slide

  2. (Yasunobu Ikeda)
    ICS /
    @clockmaker

    View Slide

  3. View Slide

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

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. OS

    View Slide

  10. sans-serif

    View Slide

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

    View Slide

  12. View Slide

  13. ( ) Windows macOS
    Windows
    ( HiDPI )
    macOS
    iOS

    View Slide

  14. View Slide

  15. View Slide

  16. 2017
    font-weight: 400
    @font-face
    font-weight: 500 normal
    Chrome 62
    2017 10
    @font-face

    View Slide

  17. UI
    Windows 10 : Yu Gothic UI
    Windows 8.1 : Segoe UI Meiryo
    font-family: system-ui

    View Slide

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

    View Slide

  19. View Slide

  20. 2019
    macOS Catalina Chrome
    sans-serif
    2019 10
    sans-serif

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. mac OS Catalina × Chrome
    sans-serif
    sans-serif

    View Slide

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

    View Slide

  26. View Slide

  27. 2019
    iOS 13 Safari
    2019 9

    View Slide

  28. View Slide

  29. View Slide

  30. iOS 13 Safari sans-serif
    Hiragino Sans
    iOS Hiragino Sans W3, W6, W8
    font-weight: bold; 700
    Hiragino Sans W8

    View Slide

  31. 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

    View Slide

  32. BlinkMacSystemFont
    SF Display Pro Hiragino Sans
    macOS Hiragino Sans
    (100 900)
    font-weight: 600;
    macOS Catalina × Chrome 79

    View Slide

  33. View Slide

  34. 2018
    macOS Mojave
    Retina
    Retina
    2018 9

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. Twitter
    @clockmaker
    Copyright 2019 ICS INC. All rights reserved.

    View Slide