Typography and Fonts と日本語フォントまわり

Transcript

1. Typography and Fonts
   /* Taishi Ikai - Nikkei Inc. */
   ͱ೔ຊޠϑΥϯτ·ΘΓ
   

   View Slide

2. About me
   ழࣂ େࢤ (͍͔͍ ͍ͨ͠)
   ೔ຊܦࡁ৽ฉࣾ 2015೥ೖࣾ
   ࢴ໘ϏϡʔΞʔΞϓϦͷ։ൃऀ
   • αʔόʔ (Python / Node.js)
   • ϑϩϯτ (Swift)
   

   View Slide

3. 1. SF Mono
   2. San Francisco Fonts
   3. ೔ຊޠจࣈ૊Έ·ΘΓ
   

   View Slide

4. SF Mono
   

   View Slide

5. https://developer.apple.com/wwdc/
   

   View Slide

6. View Slide

7. Xcode 8 ͷσϑΥϧτઃఆʹ
   

   View Slide

8. Xcode 8 ͷσϑΥϧτઃఆʹ
   

   View Slide

9. Source Han Code JP
   

   View Slide

10. Source Han Code JP
    github.com/adobe-fonts/source-han-code-jp
    

    View Slide

11. Source Han Code JP
    github.com/adobe-fonts/source-han-code-jp
    

    View Slide

12. ABCDE
    NOPQR
    abcde
    nopqr
    12345
    શͯͷ΢ΣΠτɺάϥϑ͕౳෯
    খ͍͞αΠζͰͷՄಡੑ
    ϥςϯɺΩϦϧɺΪϦγΞจࣈ
    

    View Slide

13. wmWMÆŒTM©%‰ Light
    wmWMÆŒTM©%‰ Regular
    wmWMÆŒTM©%‰ Medium
    wmWMÆŒTM©%‰ Semi Bold
    wmWMÆŒTM©%‰ Bold
    wmWMÆŒTM©%‰ Heavy
    શͯͷ΢ΣΠτɺάϥϑ͕౳෯
    

    View Slide

14. খ͍͞αΠζͰͷՄಡੑ
    . : • { * 0
    . : • { * 0
    

    View Slide

15. খ͍͞αΠζͰͷՄಡੑ
    

    View Slide

16. Xcode 8 ͷσϑΥϧτઃఆʹ
    

    View Slide

17. San Francisco Fonts
    https://developer.apple.com/fonts/
    

    View Slide

18. SF UI Display
    SF UI Text
    SF Compact Display
    SF Compact Text
    

    View Slide

19. Ultra light ― Black

    શ 9 ΢ΣΠτ
    

    View Slide

20. SF UI Display
    SF UI Text
    SF Compact Display
    SF Compact Text
    

    View Slide

21. SF UI Display
    SF UI Text
    SF Compact Display
    SF Compact Text
    macOS
    iOS
    tvOS
    

    View Slide

22. SF UI Display
    SF UI Text
    SF Compact Display
    SF Compact Text
    watchOS
    

    View Slide

23. SF UI Display
    SF UI Text
    SF Compact Display
    SF Compact Text
    

    View Slide

24. View Slide

25. SF UI Display
    SF UI Text
    SF Compact Display
    SF Compact Text

    ϑΥϯταΠζʹΑΓɺࣗಈͰ

    Display ͔ Text ͕બ୒͞ΕΔ
    

    View Slide

26. τϥοΩϯά
    WANTEDLY
    จࣈͷִؒʢҰ཯ʣ
    

    View Slide

27. WANTEDLY
    τϥοΩϯά
    τϥοΩϯά͕

    จࣈαΠζ͝ͱʹࣗಈௐ੔͞ΕΔ
    

    View Slide

28. มߋ఺
    

    View Slide

29. ʙ iOS 9
    testtest@test.com
    

    View Slide

30. iOS 9
    iOS 10
    testtest@test.com
    

    View Slide

31. BLACK CIRCLE
    U+25CF
    

    View Slide

32. ʙ iOS 9
    

    View Slide

33. iOS 9
    iOS 10
    

    View Slide

34. BLACK CIRCLE
    U+25CF
    

    View Slide

35. https://developer.apple.com/fonts/
    

    View Slide

36. 1. SF Mono
    2. San Francisco Fonts
    3. ೔ຊޠจࣈ૊Έ·ΘΓ
    

    View Slide

37. ্ւɺࢦ਺࠾༻ݟૹΓͰ্஋ॏ͘
    ʮཪޱ্৔ʯن੍ڧԽ΋ॏՙ
    

    View Slide

38. ্ւɺࢦ਺࠾༻ݟૹΓ
    ʮཪޱ্৔ʯن੍ڧԽ΋ॏՙ
    

    View Slide

39. ্ւɺࢦ਺࠾༻ݟૹΓ
    ʮཪޱ্৔ʯن੍ڧԽ΋ॏՙ
    ʮ
    

    View Slide

40. ߦ಄Ґஔௐ੔
    ্ւɺࢦ਺࠾༻ݟૹΓͰ্஋ॏ͘
    ʮཪޱ্৔ʯن੍ڧԽ΋ॏՙ
    ňཪޱ
    

    View Slide

41. ೔ຊൃ໌ৼڵڠɺʮൃ໌ͱԻָ…
    

    View Slide

42. ࿈ଓ͢Δ໿෺
    ೔ຊൃ໌ৼڵڠɺʮൃ໌ͱԻָ…
    ɺʮൃ
    ڠ
    

    View Slide

43. ೔ຊൃ໌ৼڵڠŊ ňൃ໌ͱԻָ…
    ɺ
    ňൃ
    ڠ
    ࿈ଓ͢Δ໿෺
    

    View Slide

44. ӳࠃͷԤभ࿈߹ &6
    ཭୤͕ܾ·
    Γɺੈքͷۚ༥ࢢ৔Ͱυϧෆ଍͕
    

    View Slide

45. ӳࠃͷԤभ࿈߹ &6
    ཭୤͕ܾ·
    Γɺੈքͷۚ༥ࢢ৔Ͱυϧෆ଍͕
    ۟ಡ఺͕ߦ಄ʹ͸དྷΕͳ͍ͷͰɺ
    ΍Ήͳ͘վߦ͕ߦΘΕΔ
    

    View Slide

46. ӳࠃͷԤभ࿈߹ &6
    ཭୤͕ܾ·
    Γɺੈքͷۚ༥ࢢ৔Ͱυϧෆ଍͕
    

    View Slide

47. ӳࠃͷԤभ࿈߹ &6
    ཭୤͕ܾ·Γɺ
    ੈքͷۚ༥ࢢ৔Ͱυϧෆ଍͕ڧ·
    ௥͍ग़͠
    

    View Slide

48. github.com/ikait/KernLabel
    ೔ຊޠͰ΋៉ྷͳจࣈ૊ΈΛ
    

    View Slide

49. 1. SF Mono
    2. San Francisco Fonts
    3. ೔ຊޠจࣈ૊Έ·ΘΓ
    

    View Slide

50. Typography and Fonts
    /* Taishi Ikai - Nikkei Inc. */
    ͱ೔ຊޠϑΥϯτ·ΘΓ
    

    View Slide