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

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

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

[Online] potatotips #74 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/214754/

rockname

June 23, 2021
Tweet

More Decks by rockname

Other Decks in Programming

Transcript

  1. AndroidΞϓϦͰLine HeightΛ

    ઃఆ͢Δͱ͖ʹ஫ҙ͍ͨ͜͠ͱ
    גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦
    ϩΫωϜ @_rockname

    View Slide

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

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

    View Slide

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

    View Slide

  4. mixi, Inc.
    AndroidΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠
    • Line HeghitʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹

    ӈਤͷΑ͏ʹځ۶ͳҹ৅Λ༩͑ͯ͠·͏
    • ߦؒʹద੾ͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ

    ಡΈ΍͘͢ද͍ࣔͨ͠

    View Slide

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

    View Slide

  6. mixi, Inc.
    android:lineSpacingExtra
    • TextViewͰߦؒΛࢦఆ͍ͨ͠৔߹͸ɺ

    android:lineSpacingExtraͱ͍͏attributeΛઃఆ͢ΔͱΑ͍

    View Slide

  7. mixi, Inc.

    View Slide

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

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

    View Slide

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

    • ૝ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ

    View Slide

  10. mixi, Inc.
    lineSpacingExtraʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹
    • 30spͷtextSizeʹରͯ͠ɺͦ΋ͦ΋σϑΥϧτͰ
    Line Height͕34pxͱͳ͍ͬͯͨ
    • ͭ·Γɺ4px͕σϑΥϧτͷlineSpacingExtraͱ͠
    ͯઃఆ͞Ε͍ͯͨ
    • ͳͷͰɺ android:lineSpacingExtra=“2sp” ͱઃఆ͢
    Δͱظ଴௨Γ36pxͷLine Heightͱͳͬͨ

    View Slide

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

    View Slide

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

    View Slide

  13. ΍Γͨ͘ͳ͍…😇

    View Slide

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

    View Slide

  15. mixi, Inc.

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  20. mixi, Inc.
    ҰํɺiOSͰ͸
    • iOSଆ͸গͳ͘ͱ΋System FontͩͱݴޠʹΑΔLine Heightͷࠩ͸ͳ͔ͬͨ
    • ͨͩ͠ɺ୅ΘΓʹ೔ຊޠͷϑΥϯταΠζ͸উखʹ1pt΄Ͳ(αΠζʹΑΔ)খ͘͞දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯΔ
    • ͜Ε΋ɺ࿨จͩͱځ۶ʹݟ͑ͯ͠·͏͜ͱʹର͢ΔOSଆͷ഑ྀͩͱਪ࡯Ͱ͖Δ
    https://qiita.com/moccow/items/4d0870e81db909a7aabd

    View Slide

  21. mixi, Inc.
    Ԥจ/࿨จʹΑͬͯҟͳΔ࢓༷ʹର͢ΔΈͯͶͰͷରԠ
    • ΈͯͶͰ͸σβΠϯπʔϧʹFigmaΛ࠾༻͍ͯͯ͠σβΠϯγεςϜͷҰ෦ͱͯ͠
    TypographyΛఆٛͯ͠؅ཧ͍ͯ͠Δ
    • ͦ͜Ͱ͸Roboto΍Noto Sans CJKͷΑ͏ͳϑΥϯτ͝ͱʹίϯϙʔωϯτΛఆ͍ٛͯ͠Δ
    • AndroidͷLine Height͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ
    σϑΥϧτͷLine HeightΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ
    • iOSͷϑΥϯταΠζ͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ
    ϑΥϯταΠζΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ

    View Slide

  22. mixi, Inc.
    ·ͱΊ
    • android:lineSpacingExtra ͸ҙਤͨ͠ݟͨ໨ʹͳΒͳ͍ͨΊ࢖Θͳ͍ํ͕ྑ͍
    • api level 28Ͱ͸͋Δ͕୅ΘΓʹ android:lineHeight Λ࢖༻ͨ͠ํ͕ྑ͍
    • ೔ຊޠͩͱઃఆͨ͠Line HeightΑΓେ͖Ίʹߦ͕ؒඳը͞ΕΔͨΊɺ

    ͦͷ࢓༷ΛσβΠφʹڞ༗͓͚ͯ͠Δͱྑ͍

    View Slide

  23. Thank you!!!

    View Slide