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

070d33664df274636dad3da21c9b21fc?s=47 rockname
March 26, 2021
Programming
1
340

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

More Decks by rockname

See All by rockname
070d33664df274636dad3da21c9b21fc?s=48 rockname
0
550
070d33664df274636dad3da21c9b21fc?s=48 rockname
11
3k
070d33664df274636dad3da21c9b21fc?s=48 rockname
12
1.6k
070d33664df274636dad3da21c9b21fc?s=48 rockname
3
1.5k
070d33664df274636dad3da21c9b21fc?s=48 rockname
2
590
070d33664df274636dad3da21c9b21fc?s=48 rockname
0
1.1k
070d33664df274636dad3da21c9b21fc?s=48 rockname
3
1.8k
070d33664df274636dad3da21c9b21fc?s=48 rockname
3
1k
070d33664df274636dad3da21c9b21fc?s=48 rockname
11
5.1k

Other Decks in Programming

See All in Programming
D8281434c0409ba2051cd3f7590e4c2f?s=48 hkusu
0
290
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
0
100
C766fe58109bc3750d333f4835ba43c2?s=48 emberconf
0
100
9184d05c3493636df20a38b8bcfd66df?s=48 kazuhei0108
3
970
Dee9a95c0e5483692c54cc5e60e8b09e?s=48 yusuke57
0
120
E505897a79eede1a676f92740261e8f8?s=48 kubode
2
200
E7151ab8219e76672f7a7691dd2c88e6?s=48 seike460
8
2.2k
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
6
710
Fc358d63dcdcbad7a5c29198785dec2c?s=48 naototty
1
190
Beb422437c1dfb5366f197919e41ac50?s=48 lilobase
PRO
0
100
325afd2c9db540c83485f509f2845acb?s=48 hiro_y
1
480
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
120

Featured

See All Featured
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
201
9.7k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
226
8.7k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
330
15k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
178
14k
79acae287842acf29084005533a7fb3b?s=48 hursman
108
9.3k
78b475797a14c84799063c7cd073962f?s=48 holman
462
280k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
146
12k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.5k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
3.8k

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!!!