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.4k
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
350
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
79
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.9k
サブスクリプション機能制御の設計における勘所
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
GraphRAGの仕組みまるわかり
tosuri13
8
520
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
0
300
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
Discover Metal 4
rei315
2
110
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
C++20 射影変換
faithandbrave
0
560
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Speed Design
sergeychernyshev
32
1k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building Applications with DynamoDB
mza
95
6.5k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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!!!