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 to keep in mind when setting Line Height in your Android app
Search
rockname
June 23, 2021
Programming
1
3.8k
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
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
1
2.6k
サブスクリプション機能制御の設計における勘所
rockname
0
710
Anatomy of Dynamic color
rockname
1
980
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
18k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
1.4k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
380
The practice of inclusive design -WWDC21-
rockname
1
1.1k
2021年度 ミクシィ新卒研修 -iOSアプリ開発- / 2021 iOS mixi training
rockname
6
47k
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
Java 22 Overview
kishida
1
190
Domain-Driven Transformation
hschwentner
2
1.5k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
380
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
Featured
See All Featured
A better future with KSS
kneath
231
16k
The Invisible Side of Design
smashingmag
294
49k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Music & Morning Musume
bryan
41
5.6k
Automating Front-end Workflow
addyosmani
1357
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Navigating Team Friction
lara
179
13k
Thoughts on Productivity
jonyablonski
60
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Documentation Writing (for coders)
carmenintech
60
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!!!