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
390
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
89
ゼロから理解する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
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
パスタの技術
yusukebe
1
550
A Gopher's Guide to Vibe Coding
danicat
0
200
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
tool ディレクティブを導入してみた感想
sgash708
1
160
CSC305 Summer Lecture 12
javiergs
PRO
0
130
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
Langfuseと歩む生成AI活用推進
licux
3
320
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Facilitating Awesome Meetings
lara
55
6.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Making Projects Easy
brettharned
117
6.4k
The Pragmatic Product Professional
lauravandoore
36
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Gamification - CAS2011
davidbonilla
81
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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!!!