令和元年ベストの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の組み合わせで明朝体化するウェブサイトが多発しました。

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

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.

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