Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

iOSアプリでLine Heightを
設定するときに注意したいこと / Things to ...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for rockname rockname
March 26, 2021
Programming
3.7k
2

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/

Avatar for rockname

rockname

March 26, 2021

More Decks by rockname

See All by rockname
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
210
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
Avatar for rockname rockname
2
4.9k
Unlock the Potential of Swift Code Generation
Avatar for rockname rockname
0
640
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
Avatar for rockname rockname
0
160
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
Avatar for rockname rockname
2
4.6k
サブスクリプション機能制御の設計における勘所
Avatar for rockname rockname
0
1.4k
Anatomy of Dynamic color
Avatar for rockname rockname
1
1.4k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
Avatar for rockname rockname
10
21k
Optimistic Updatesで
UXを向上させる / Improve UX with Optimistic Updates
Avatar for rockname rockname
2
1.7k

Other Decks in Programming

See All in Programming
GraphQL の onError と Nullability のこれから
Avatar for Yosuke Kurami quramy
0
190
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
AIで開発が速くなった先で、開発チームは何を目指すか
Avatar for Yuki Shiho shihochan
1
1.9k
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
Avatar for Naruo Yoshiki naruogram
0
270
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
1
150
AI時代のIaC入門 〜なぜインフラをコードで管理したいのか？〜 / Introduction to IaC in the AI Era
Avatar for アキキー | Akihisa Ikeda akihisaikeda
5
1.2k
Lambda durable functionsでHuman in the Loopを楽に…楽に……
Avatar for Har1101 har1101
2
210
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
Avatar for Ochtum ochtum
0
160
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
Avatar for Nathan Abondance nabondance
0
120
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
360
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
230
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
3
890

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
1k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
380
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
930
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.5k
HDC tutorial
Avatar for Michiel Stock michielstock
2
980
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k

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