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

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

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

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

rockname

March 26, 2021
Tweet

More Decks by rockname

Other Decks in Programming

Transcript

  1. iOSΞϓϦͰLine HeightΛ

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

    View Slide

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

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

    View Slide

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

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

    ಡΈ΍͘͢ද͍ࣔͨ͠

    View Slide

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

    View Slide

  5. mixi, Inc.
    NSParagraphStyle > lineSpacing
    • iOSͰߦؒΛࢦఆ͍ͨ͠৔߹͸ͪ͜ΒΛ࢖͏
    • lineSpacingΛઃఆͨ͠NSParagraphStyleΛ

    NSAttributedStringʹ௥Ճ͢Δ

    View Slide

  6. mixi, Inc.

    View Slide

  7. mixi, Inc.
    Line HeightΛઃఆ
    • fontSize: 25pt ʹରͯ͠ lineSpacing: 5pt Λઃఆ

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

    View Slide

  8. mixi, Inc.
    ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ
    • ظ଴஋ͷ30ptʹରͯ͠5ptେ͖͍Line Height
    • ૝ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ

    View Slide

  9. mixi, Inc.
    UIFont > lineHeight
    • UIFontʹ͸σϑΥϧτͰlineHeight͕ઃఆ͞Ε͍ͯΔ
    • ͜ͷ஋Λߟྀͯ͠NSAttributedStringʹlineSpacing

    Λઃఆ͢Δඞཁ͕͋ͬͨ

    View Slide

  10. mixi, Inc.
    ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ
    • UIFont.font.pointSizeͱUIFont.lineHeightͱ

    NSParagraphStyle.lineSpacing͸

    ӈਤͷΑ͏ͳؔ܎
    • ͭ·ΓɺҎԼͷΑ͏ͳ͕ࣜ੒Γཱͭ

    lineSpacing = ૝ఆ͢Δߦؒ - (lineHeight - fontSize)

    View Slide

  11. mixi, Inc.

    View Slide

  12. mixi, Inc.
    ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ
    • ૝ఆ௨Γ30ptͷLine HeightΛઃఆͰ͖͍ͯΔ

    View Slide

  13. mixi, Inc.
    [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ

    View Slide

  14. mixi, Inc.
    [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ

    View Slide

  15. mixi, Inc.
    [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ

    View Slide

  16. Thank you!!!

    View Slide