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
370
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
83
ゼロから理解する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
iOS開発スターターキットの作り方
akidon0000
0
230
Understanding Kotlin Multiplatform
l2hyunwoo
0
240
AI Ramen Fight
yusukebe
0
120
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
290
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
750
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
9
1.6k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
310
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
360
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
What's new in Adaptive Android development
fornewid
0
130
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
230
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Bash Introduction
62gerente
613
210k
How GitHub (no longer) Works
holman
314
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Optimizing for Happiness
mojombo
379
70k
What's in a price? How to price your products and services
michaelherold
246
12k
Unsuck your backbone
ammeep
671
58k
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!!!