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
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Unlock the Potential of Swift Code Generation
rockname
0
410
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
110
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
4.1k
サブスクリプション機能制御の設計における勘所
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
2.1k
Other Decks in Programming
See All in Programming
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
890
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
370
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
370
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
490
dynamic!
moro
9
6.1k
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
56
6.6k
Practical Orchestrator
shlominoach
190
11k
Side Projects
sachag
455
43k
Navigating Team Friction
lara
189
15k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Documentation Writing (for coders)
carmenintech
75
5k
Being A Developer After 40
akosma
91
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Making Projects Easy
brettharned
119
6.4k
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!!!