Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iOSアプリでLine Heightを 設定するときに注意したいこと / Things to ...
Search
rockname
March 26, 2021
Programming
2
3.3k
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/
rockname
March 26, 2021
Tweet
Share
More Decks by rockname
See All by rockname
Unlock the Potential of Swift Code Generation
rockname
0
370
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
83
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
4k
サブスクリプション機能制御の設計における勘所
rockname
0
1.1k
Anatomy of Dynamic color
rockname
1
1.2k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
20k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1.4k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
2k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
510
Other Decks in Programming
See All in Programming
Understanding Kotlin Multiplatform
l2hyunwoo
0
240
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
750
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
300
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
820
Jakarta EE Meets AI
ivargrimstad
0
480
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
380
階層化自動テストで開発に機動力を
ickx
1
450
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
260
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Code Reviewing Like a Champion
maltzj
524
40k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Speed Design
sergeychernyshev
32
1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
iOSΞϓϦͰLine HeightΛ ઃఆ͢Δͱ͖ʹҙ͍ͨ͜͠ͱ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
mixi, Inc. ࣗݾհ ϩΫωϜ / rockname • ϛΫγΟͰʮՈΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ •
iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ • εϚϒϥ͕͖
mixi, Inc. iOSΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿઃఆ͠ͳ͔ͬͨ߹ ӈਤͷΑ͏ʹځ۶ͳҹΛ༩͑ͯ͠·͏ • ߦؒʹదͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ
ಡΈ͘͢ද͍ࣔͨ͠
mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties
mixi, Inc. NSParagraphStyle > lineSpacing • iOSͰߦؒΛࢦఆ͍ͨ͠߹ͪ͜ΒΛ͏ • lineSpacingΛઃఆͨ͠NSParagraphStyleΛ NSAttributedStringʹՃ͢Δ
mixi, Inc.
mixi, Inc. Line HeightΛઃఆ • fontSize: 25pt ʹରͯ͠ lineSpacing: 5pt
Λઃఆ (Line Height͕30ʹͳΔ͜ͱΛظ)
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظͷ30ptʹରͯ͠5ptେ͖͍Line Height • ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ
mixi, Inc. UIFont > lineHeight • UIFontʹσϑΥϧτͰlineHeight͕ઃఆ͞Ε͍ͯΔ • ͜ͷΛߟྀͯ͠NSAttributedStringʹlineSpacing Λઃఆ͢Δඞཁ͕͋ͬͨ
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • UIFont.font.pointSizeͱUIFont.lineHeightͱ NSParagraphStyle.lineSpacing ӈਤͷΑ͏ͳؔ • ͭ·ΓɺҎԼͷΑ͏ͳ͕ࣜΓཱͭ lineSpacing
= ఆ͢Δߦؒ - (lineHeight - fontSize)
mixi, Inc.
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ఆ௨Γ30ptͷLine HeightΛઃఆͰ͖͍ͯΔ
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
Thank you!!!