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

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/

070d33664df274636dad3da21c9b21fc?s=128

rockname

March 26, 2021
Tweet

Transcript

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

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

    iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖
  3. mixi, Inc. iOSΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹
 ӈਤͷΑ͏ʹځ۶ͳҹ৅Λ༩͑ͯ͠·͏ • ߦؒʹద੾ͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ


    ಡΈ΍͘͢ද͍ࣔͨ͠
  4. mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties

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

  6. mixi, Inc.

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

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

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

  10. mixi, Inc. ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • UIFont.font.pointSizeͱUIFont.lineHeightͱ
 NSParagraphStyle.lineSpacing͸
 ӈਤͷΑ͏ͳؔ܎ • ͭ·ΓɺҎԼͷΑ͏ͳ͕ࣜ੒Γཱͭ
 lineSpacing

    = ૝ఆ͢Δߦؒ - (lineHeight - fontSize)
  11. mixi, Inc.

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

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

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

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

  16. Thank you!!!