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
520

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
4
140
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
450
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
290
070d33664df274636dad3da21c9b21fc?s=48 rockname
4
22k
070d33664df274636dad3da21c9b21fc?s=48 rockname
0
710
070d33664df274636dad3da21c9b21fc?s=48 rockname
12
3.2k
070d33664df274636dad3da21c9b21fc?s=48 rockname
13
1.7k
070d33664df274636dad3da21c9b21fc?s=48 rockname
3
1.6k
070d33664df274636dad3da21c9b21fc?s=48 rockname
2
660

Other Decks in Programming

See All in Programming
9242ec5423930ab9ab881ce07f4d4fcf?s=48 e99h2121
0
1.4k
1998b7a88550e8c58f7efb17d7b72a29?s=48 namizatork
0
410
E1b600a54e2e4c1fe276cfe71a4fb02a?s=48 currylike37
0
370
08d5432a5bc31e6d9edec87b94cb1db1?s=48 k0kubun
2
990
0227f6274b8a6cce078d7f8a91460c41?s=48 eminetto
0
170
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
PRO
2
390
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
28
8.9k
9242ec5423930ab9ab881ce07f4d4fcf?s=48 e99h2121
0
1.5k
042b7c0e45c53de46667f07de2fb2614?s=48 vixentael
0
380
Eed3a8555222270f9eb76edc5799bd56?s=48 eatplaynap
1
170
08d5432a5bc31e6d9edec87b94cb1db1?s=48 k0kubun
18
11k
D845da5233d883972679b1cf05e186c4?s=48 azuma
0
7.7k

Featured

See All Featured
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2.1k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.1k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
14
660
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
29
1.7k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
270
17k
245cee81a9c424266e5e401d844ea881?s=48 lara
595
62k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
26k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
87
5.1k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
111
15k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
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!!!