Save 37% off PRO during our Black Friday Sale! »

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
600

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
650
070d33664df274636dad3da21c9b21fc?s=48 rockname
4
180
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
560
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
430
070d33664df274636dad3da21c9b21fc?s=48 rockname
5
28k
070d33664df274636dad3da21c9b21fc?s=48 rockname
0
760
070d33664df274636dad3da21c9b21fc?s=48 rockname
12
3.4k
070d33664df274636dad3da21c9b21fc?s=48 rockname
13
1.8k
070d33664df274636dad3da21c9b21fc?s=48 rockname
3
1.7k

Other Decks in Programming

See All in Programming
B83842a07c4241e2aec3e2dfeedf16fe?s=48 mu_mu_mu
0
340
6362c07dc6c77f281f73285cea2f2d5c?s=48 kzkn
0
120
36e72b299b441378e41b6c445296b959?s=48 achiku
1
250
F80dc0ad329fdcb771afd78fe10d9150?s=48 otiai10
1
150
58b40ae3b0db6cf0202a3802e9dd70fe?s=48 cockscomb
0
490
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
180
B04bd8797ce182483a5ded98f7cada6f?s=48 berlysia
14
6.4k
Fe05cd1ac317a2b94eedc0f45cacc424?s=48 akiroom
0
860
73e84f4452b5776013367ba9b15a3629?s=48 nafuka11
0
180
2661b52b92e28d73635638a17c96f4af?s=48 toversus
5
3.3k
9eed44f137609e6ce3b6f1e14f80b9e1?s=48 izumin5210
9
3.9k
023b04c98f39cc041293d780352432ff?s=48 koic
12
1.1k

Featured

See All Featured
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.1k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
24
10k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
307
33k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.2k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
12k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
18k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.6k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
249
21k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
36k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
17
1.2k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.3k

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