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
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things...
Search
rockname
June 23, 2021
Programming
1
5.5k
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
[Online] potatotips #74 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/214754/
rockname
June 23, 2021
Tweet
Share
More Decks by rockname
See All by rockname
Unlock the Potential of Swift Code Generation
rockname
0
400
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
91
ゼロから理解する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
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
590
Navigating Dependency Injection with Metro
zacsweers
3
260
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
370
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
testingを眺める
matumoto
1
140
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.4k
為你自己學 Python - 冷知識篇
eddie
1
350
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
Featured
See All Featured
Navigating Team Friction
lara
189
15k
How GitHub (no longer) Works
holman
315
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Speed Design
sergeychernyshev
32
1.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1370
200k
How to Ace a Technical Interview
jacobian
279
23k
It's Worth the Effort
3n
187
28k
BBQ
matthewcrist
89
9.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Transcript
AndroidΞϓϦͰLine HeightΛ ઃఆ͢Δͱ͖ʹҙ͍ͨ͜͠ͱ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
mixi, Inc. ࣗݾհ ϩΫωϜ / rockname • ϛΫγΟͰʮՈΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ •
iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ • εϚϒϥ͕͖
mixi, Inc. લճͷpotatotips #73Ͱͷൃද https://speakerdeck.com/rockname/things-to-keep-in-mind-when-setting-line-height-in-your-ios-app
mixi, Inc. AndroidΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿઃఆ͠ͳ͔ͬͨ߹ ӈਤͷΑ͏ʹځ۶ͳҹΛ༩͑ͯ͠·͏ • ߦؒʹదͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ
ಡΈ͘͢ද͍ࣔͨ͠
mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties
mixi, Inc. android:lineSpacingExtra • TextViewͰߦؒΛࢦఆ͍ͨ͠߹ɺ android:lineSpacingExtraͱ͍͏attributeΛઃఆ͢ΔͱΑ͍
mixi, Inc.
mixi, Inc. Line HeightΛઃఆ • textSize: 30sp ʹରͯ͠ lineSpacingExtra: 6sp
Λઃఆ (Line Height͕36ʹͳΔ͜ͱΛظ)
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظͷ36pxʹରͯ͠4pxେ͖͍Line Heigh t • ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ
mixi, Inc. lineSpacingExtraʹԿઃఆ͠ͳ͔ͬͨ߹ • 30spͷtextSizeʹରͯ͠ɺͦͦσϑΥϧτͰ Line Height͕34pxͱͳ͍ͬͯͨ • ͭ·Γɺ4px͕σϑΥϧτͷlineSpacingExtraͱ͠ ͯઃఆ͞Ε͍ͯͨ
• ͳͷͰɺ android:lineSpacingExtra=“2sp” ͱઃఆ͢ Δͱظ௨Γ36pxͷLine Heightͱͳͬͨ
mixi, Inc. lineSpacingExtraͯ͢-4spͯ͠ઃఆ͢Εྑ͍ͷ͔ʁ • textSizeʹΑͬͯ͜ͷσϑΥϧτͷlineSpacingExtraมΘͬͯ͠·͏ͷͰɺͯ͢Ұ ʹ-4sp͢Εྑ͍ͱ͍͏Ͱͳ͍ • ઃఆ͢ΔtextSize͝ͱʹσϑΥϧτͷlineSpacingExtraΛௐࠪͯ͠ઃఆ͢Δඞཁ͕͋Δ
mixi, Inc. దͳLine HeightͱͳΔΑ͏ʹௐ͍ࠪͯ͠Δࣄྫ https://bignerdranch.com/blog/perfecting-custom-typography-in-android/
Γͨ͘ͳ͍…😇
mixi, Inc. android:lineHeight • Line HeightΛઃఆͰ͖Δattribute͕api level 28ͰՃ͞Εͨ • ෦ͰlineSpacingExtraΛ༻࣮͕ͨ͠ࢪ͞Ε͍ͯΔΒ͍͠
mixi, Inc.
mixi, Inc. android:lineHeightΛͬͯΈΔ • ఆ௨Γ36ptͷLine HeightΛઃఆͰ͖͍ͯͨ 👏
mixi, Inc. ͨͩ͠ɺຊޠͩͱ… • ಉ͘͡textSize: 30sp, lineHeight: 36spͰຊޠΛ දࣔͯ͠ΈΔ •
͢Δͱɺظͷ36ΑΓ6େ͖͍42pxͱͳͬͯ͠·ͬͨ
mixi, Inc. ԤจͱจϑΥϯτͷҧ͍ʹ͍ͭͯ • Ԥจͩͱ༷ʑͳύϥϝʔλ͕ଘࡏ͍ͯͯ͠ɺখจࣈେจࣈʹΑͬͯҰߦ͋ͨΓʹΊΔจࣈͷີେ͖͘มΘΔ • ରͯ͠จʹͦΜͳͷͳ͘ɺࡶʹશ෦ͷจࣈ͕ΞϧϑΝϕοτେจࣈͱಉ͘͡Β͍ͷେ͖͞ͱͳ͍ͬͯΔ https://hayataki-masaharu.jp/web-typography-in-japanese/#.YFND_7T7Rlc
mixi, Inc. ԤจͱจϑΥϯτͷҧ͍ʹ͍ͭͯ • Ԥจͱൺֱͯ͠ځ۶ʹݟ͕͑ͪͳจͷ߹ʹɺߦؒΊʹऔΔ͜ͱ͕ϕετϓϥΫςΟεͱͯ͠ޠΒΕ͍ͯΔ • AndroidͰຊޠͷLine Height͕ظΑΓେ͖͘ઃఆ͞Ε͍ͯΔͷɺ͜ͷ͜ͱΛྀͯ͘͠Ε͍ͯΔͱਪଌͰ͖Δ https://blog.xoxzo.com/en/2018/12/19/japanese-typography-for-web-design/
mixi, Inc. ҰํɺiOSͰ • iOSଆগͳ͘ͱSystem FontͩͱݴޠʹΑΔLine Heightͷࠩͳ͔ͬͨ • ͨͩ͠ɺΘΓʹຊޠͷϑΥϯταΠζউखʹ1pt΄Ͳ(αΠζʹΑΔ)খ͘͞දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯΔ •
͜Εɺจͩͱځ۶ʹݟ͑ͯ͠·͏͜ͱʹର͢ΔOSଆͷྀͩͱਪͰ͖Δ https://qiita.com/moccow/items/4d0870e81db909a7aabd
mixi, Inc. Ԥจ/จʹΑͬͯҟͳΔ༷ʹର͢ΔΈͯͶͰͷରԠ • ΈͯͶͰσβΠϯπʔϧʹFigmaΛ࠾༻͍ͯͯ͠σβΠϯγεςϜͷҰ෦ͱͯ͠ TypographyΛఆٛͯ͠ཧ͍ͯ͠Δ • ͦ͜ͰRobotoNoto Sans CJKͷΑ͏ͳϑΥϯτ͝ͱʹίϯϙʔωϯτΛఆ͍ٛͯ͠Δ
• AndroidͷLine Height͕Ԥจ/จͰҟͳΔ݅ʹ͍ͭͯɺ֤Typographyʹ͓͚Δຊޠͷ σϑΥϧτͷLine HeightΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹөͯ͠Β͍ͬͯΔ • iOSͷϑΥϯταΠζ͕Ԥจ/จͰҟͳΔ݅ʹ͍ͭͯɺ֤Typographyʹ͓͚Δຊޠͷ ϑΥϯταΠζΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹөͯ͠Β͍ͬͯΔ
mixi, Inc. ·ͱΊ • android:lineSpacingExtra ҙਤͨ͠ݟͨʹͳΒͳ͍ͨΊΘͳ͍ํ͕ྑ͍ • api level 28Ͱ͋Δ͕ΘΓʹ
android:lineHeight Λ༻ͨ͠ํ͕ྑ͍ • ຊޠͩͱઃఆͨ͠Line HeightΑΓେ͖Ίʹߦ͕ؒඳը͞ΕΔͨΊɺ ͦͷ༷ΛσβΠφʹڞ༗͓͚ͯ͠Δͱྑ͍
Thank you!!!