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/

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