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

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

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

Taishi Ikai

June 30, 2016
Tweet

More Decks by Taishi Ikai

Other Decks in Technology

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. View Slide

  30. iOS 9
    iOS 10
    [email protected]

    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