AndroidアプリでLine Heightを
設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app

Transcript

1. AndroidΞϓϦͰLine HeightΛ
 ઃఆ͢Δͱ͖ʹ஫ҙ͍ͨ͜͠ͱ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname

2. mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ
 ։ൃͯ͠Δ •

   iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖

3. mixi, Inc. લճͷpotatotips #73Ͱͷൃද https://speakerdeck.com/rockname/things-to-keep-in-mind-when-setting-line-height-in-your-ios-app

4. mixi, Inc. AndroidΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹
 ӈਤͷΑ͏ʹځ۶ͳҹ৅Λ༩͑ͯ͠·͏ • ߦؒʹద੾ͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ


   ಡΈ΍͘͢ද͍ࣔͨ͠

5. mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties

6. mixi, Inc. android:lineSpacingExtra • TextViewͰߦؒΛࢦఆ͍ͨ͠৔߹͸ɺ
 android:lineSpacingExtraͱ͍͏attributeΛઃఆ͢ΔͱΑ͍

7. mixi, Inc.

8. mixi, Inc. Line HeightΛઃఆ • textSize: 30sp ʹରͯ͠ lineSpacingExtra: 6sp

   Λઃఆ
 (Line Height͕36ʹͳΔ͜ͱΛظ଴)

9. mixi, Inc. ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظ଴஋ͷ36pxʹରͯ͠4pxେ͖͍Line Heigh t • ૝ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ

10. mixi, Inc. lineSpacingExtraʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹ • 30spͷtextSizeʹରͯ͠ɺͦ΋ͦ΋σϑΥϧτͰ Line Height͕34pxͱͳ͍ͬͯͨ • ͭ·Γɺ4px͕σϑΥϧτͷlineSpacingExtraͱ͠ ͯઃఆ͞Ε͍ͯͨ

    • ͳͷͰɺ android:lineSpacingExtra=“2sp” ͱઃఆ͢ Δͱظ଴௨Γ36pxͷLine Heightͱͳͬͨ

11. mixi, Inc. lineSpacingExtra͸͢΂ͯ-4spͯ͠ઃఆ͢Ε͹ྑ͍ͷ͔ʁ • textSizeʹΑͬͯ͜ͷσϑΥϧτͷlineSpacingExtra͸มΘͬͯ͠·͏ͷͰɺ͢΂ͯҰ཯ ʹ-4sp͢Ε͹ྑ͍ͱ͍͏࿩Ͱ͸ͳ͍ • ઃఆ͢ΔtextSize͝ͱʹσϑΥϧτͷlineSpacingExtraΛௐࠪͯ͠ઃఆ͢Δඞཁ͕͋Δ

12. mixi, Inc. ద੾ͳLine HeightͱͳΔΑ͏ʹௐ͍ࠪͯ͠Δࣄྫ΋ https://bignerdranch.com/blog/perfecting-custom-typography-in-android/

13. ΍Γͨ͘ͳ͍…😇

14. mixi, Inc. android:lineHeight • Line HeightΛઃఆͰ͖Δattribute͕api level 28Ͱ௥Ճ͞Εͨ • ಺෦Ͱ͸lineSpacingExtraΛ࢖༻࣮ͨ͠૷͕ࢪ͞Ε͍ͯΔΒ͍͠

15. mixi, Inc.

16. mixi, Inc. android:lineHeightΛ࢖ͬͯΈΔ • ૝ఆ௨Γ36ptͷLine HeightΛઃఆͰ͖͍ͯͨ 👏

17. mixi, Inc. ͨͩ͠ɺ೔ຊޠͩͱ… • ಉ͘͡textSize: 30sp, lineHeight: 36spͰ೔ຊޠΛ
 දࣔͯ͠ΈΔ •

    ͢Δͱɺظ଴஋ͷ36ΑΓ6΋େ͖͍42pxͱͳͬͯ͠·ͬͨ

18. mixi, Inc. Ԥจͱ࿨จϑΥϯτͷҧ͍ʹ͍ͭͯ • Ԥจͩͱ༷ʑͳύϥϝʔλ͕ଘࡏ͍ͯͯ͠ɺখจࣈେจࣈʹΑͬͯҰߦ͋ͨΓʹ઎ΊΔจࣈͷີ౓͸େ͖͘มΘΔ • ରͯ͠࿨จʹͦΜͳ΋ͷ͸ͳ͘ɺࡶʹશ෦ͷจࣈ͕ΞϧϑΝϕοτେจࣈͱಉ͘͡Β͍ͷେ͖͞ͱͳ͍ͬͯΔ https://hayataki-masaharu.jp/web-typography-in-japanese/#.YFND_7T7Rlc

19. mixi, Inc. Ԥจͱ࿨จϑΥϯτͷҧ͍ʹ͍ͭͯ • Ԥจͱൺֱͯ͠ځ۶ʹݟ͕͑ͪͳ࿨จͷ৔߹ʹ͸ɺߦؒ͸޿ΊʹऔΔ͜ͱ͕ϕετϓϥΫςΟεͱͯ͠ޠΒΕ͍ͯΔ • AndroidͰ೔ຊޠͷLine Height͕ظ଴஋ΑΓ΋େ͖͘ઃఆ͞Ε͍ͯΔͷ͸ɺ͜ͷ͜ͱΛ഑ྀͯ͘͠Ε͍ͯΔͱਪଌͰ͖Δ https://blog.xoxzo.com/en/2018/12/19/japanese-typography-for-web-design/

20. mixi, Inc. ҰํɺiOSͰ͸ • iOSଆ͸গͳ͘ͱ΋System FontͩͱݴޠʹΑΔLine Heightͷࠩ͸ͳ͔ͬͨ • ͨͩ͠ɺ୅ΘΓʹ೔ຊޠͷϑΥϯταΠζ͸উखʹ1pt΄Ͳ(αΠζʹΑΔ)খ͘͞දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯΔ •

    ͜Ε΋ɺ࿨จͩͱځ۶ʹݟ͑ͯ͠·͏͜ͱʹର͢ΔOSଆͷ഑ྀͩͱਪ࡯Ͱ͖Δ https://qiita.com/moccow/items/4d0870e81db909a7aabd

21. mixi, Inc. Ԥจ/࿨จʹΑͬͯҟͳΔ࢓༷ʹର͢ΔΈͯͶͰͷରԠ • ΈͯͶͰ͸σβΠϯπʔϧʹFigmaΛ࠾༻͍ͯͯ͠σβΠϯγεςϜͷҰ෦ͱͯ͠ TypographyΛఆٛͯ͠؅ཧ͍ͯ͠Δ • ͦ͜Ͱ͸Roboto΍Noto Sans CJKͷΑ͏ͳϑΥϯτ͝ͱʹίϯϙʔωϯτΛఆ͍ٛͯ͠Δ

    • AndroidͷLine Height͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ σϑΥϧτͷLine HeightΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ • iOSͷϑΥϯταΠζ͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ ϑΥϯταΠζΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ

22. mixi, Inc. ·ͱΊ • android:lineSpacingExtra ͸ҙਤͨ͠ݟͨ໨ʹͳΒͳ͍ͨΊ࢖Θͳ͍ํ͕ྑ͍ • api level 28Ͱ͸͋Δ͕୅ΘΓʹ

    android:lineHeight Λ࢖༻ͨ͠ํ͕ྑ͍ • ೔ຊޠͩͱઃఆͨ͠Line HeightΑΓେ͖Ίʹߦ͕ؒඳը͞ΕΔͨΊɺ
 ͦͷ࢓༷ΛσβΠφʹڞ༗͓͚ͯ͠Δͱྑ͍

23. Thank you!!!