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
380
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
85
ゼロから理解する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
令和最新版手のひらコンピュータ
koba789
14
7.8k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
ワープロって実は計算機で
pepepper
2
1.4k
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.2k
Comparing decimals in Swift Testing
417_72ki
0
170
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
170
Flutterと Vibe Coding で個人開発!
hyshu
1
250
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.3k
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
370
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
420
画像コンペでのベースラインモデルの育て方
tattaka
3
1.7k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
200
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
Optimizing for Happiness
mojombo
379
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Done Done
chrislema
185
16k
Building Applications with DynamoDB
mza
96
6.6k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
It's Worth the Effort
3n
186
28k
A Tale of Four Properties
chriscoyier
160
23k
Thoughts on Productivity
jonyablonski
69
4.8k
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!!!