Tweet
Tweet

Slide 1

Slide 1 text

AndroidΞϓϦͰLine HeightΛ
 ઃఆ͢Δͱ͖ʹ஫ҙ͍ͨ͜͠ͱ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname

Slide 2

Slide 2 text

mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ
 ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖

Slide 3

Slide 3 text

mixi, Inc. લճͷpotatotips #73Ͱͷൃද https://speakerdeck.com/rockname/things-to-keep-in-mind-when-setting-line-height-in-your-ios-app

Slide 4

Slide 4 text

mixi, Inc. AndroidΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹
 ӈਤͷΑ͏ʹځ۶ͳҹ৅Λ༩͑ͯ͠·͏ • ߦؒʹద੾ͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ
 ಡΈ΍͘͢ද͍ࣔͨ͠

Slide 5

Slide 5 text

mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties

Slide 6

Slide 6 text

mixi, Inc. android:lineSpacingExtra • TextViewͰߦؒΛࢦఆ͍ͨ͠৔߹͸ɺ
 android:lineSpacingExtraͱ͍͏attributeΛઃఆ͢ΔͱΑ͍

Slide 7

Slide 7 text

mixi, Inc.

Slide 8

Slide 8 text

mixi, Inc. Line HeightΛઃఆ • textSize: 30sp ʹରͯ͠ lineSpacingExtra: 6sp Λઃఆ
 (Line Height͕36ʹͳΔ͜ͱΛظ଴)

Slide 9

Slide 9 text

mixi, Inc. ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظ଴஋ͷ36pxʹରͯ͠4pxେ͖͍Line Heigh t • ૝ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ

Slide 10

Slide 10 text

mixi, Inc. lineSpacingExtraʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹ • 30spͷtextSizeʹରͯ͠ɺͦ΋ͦ΋σϑΥϧτͰ Line Height͕34pxͱͳ͍ͬͯͨ • ͭ·Γɺ4px͕σϑΥϧτͷlineSpacingExtraͱ͠ ͯઃఆ͞Ε͍ͯͨ • ͳͷͰɺ android:lineSpacingExtra=“2sp” ͱઃఆ͢ Δͱظ଴௨Γ36pxͷLine Heightͱͳͬͨ

Slide 11

Slide 11 text

mixi, Inc. lineSpacingExtra͸͢΂ͯ-4spͯ͠ઃఆ͢Ε͹ྑ͍ͷ͔ʁ • textSizeʹΑͬͯ͜ͷσϑΥϧτͷlineSpacingExtra͸มΘͬͯ͠·͏ͷͰɺ͢΂ͯҰ཯ ʹ-4sp͢Ε͹ྑ͍ͱ͍͏࿩Ͱ͸ͳ͍ • ઃఆ͢ΔtextSize͝ͱʹσϑΥϧτͷlineSpacingExtraΛௐࠪͯ͠ઃఆ͢Δඞཁ͕͋Δ

Slide 12

Slide 12 text

mixi, Inc. ద੾ͳLine HeightͱͳΔΑ͏ʹௐ͍ࠪͯ͠Δࣄྫ΋ https://bignerdranch.com/blog/perfecting-custom-typography-in-android/

Slide 13

Slide 13 text

΍Γͨ͘ͳ͍…😇

Slide 14

Slide 14 text

mixi, Inc. android:lineHeight • Line HeightΛઃఆͰ͖Δattribute͕api level 28Ͱ௥Ճ͞Εͨ • ಺෦Ͱ͸lineSpacingExtraΛ࢖༻࣮ͨ͠૷͕ࢪ͞Ε͍ͯΔΒ͍͠

Slide 15

Slide 15 text

mixi, Inc.

Slide 16

Slide 16 text

mixi, Inc. android:lineHeightΛ࢖ͬͯΈΔ • ૝ఆ௨Γ36ptͷLine HeightΛઃఆͰ͖͍ͯͨ 👏

Slide 17

Slide 17 text

mixi, Inc. ͨͩ͠ɺ೔ຊޠͩͱ… • ಉ͘͡textSize: 30sp, lineHeight: 36spͰ೔ຊޠΛ
 දࣔͯ͠ΈΔ • ͢Δͱɺظ଴஋ͷ36ΑΓ6΋େ͖͍42pxͱͳͬͯ͠·ͬͨ

Slide 18

Slide 18 text

mixi, Inc. Ԥจͱ࿨จϑΥϯτͷҧ͍ʹ͍ͭͯ • Ԥจͩͱ༷ʑͳύϥϝʔλ͕ଘࡏ͍ͯͯ͠ɺখจࣈେจࣈʹΑͬͯҰߦ͋ͨΓʹ઎ΊΔจࣈͷີ౓͸େ͖͘มΘΔ • ରͯ͠࿨จʹͦΜͳ΋ͷ͸ͳ͘ɺࡶʹશ෦ͷจࣈ͕ΞϧϑΝϕοτେจࣈͱಉ͘͡Β͍ͷେ͖͞ͱͳ͍ͬͯΔ https://hayataki-masaharu.jp/web-typography-in-japanese/#.YFND_7T7Rlc

Slide 19

Slide 19 text

mixi, Inc. Ԥจͱ࿨จϑΥϯτͷҧ͍ʹ͍ͭͯ • Ԥจͱൺֱͯ͠ځ۶ʹݟ͕͑ͪͳ࿨จͷ৔߹ʹ͸ɺߦؒ͸޿ΊʹऔΔ͜ͱ͕ϕετϓϥΫςΟεͱͯ͠ޠΒΕ͍ͯΔ • AndroidͰ೔ຊޠͷLine Height͕ظ଴஋ΑΓ΋େ͖͘ઃఆ͞Ε͍ͯΔͷ͸ɺ͜ͷ͜ͱΛ഑ྀͯ͘͠Ε͍ͯΔͱਪଌͰ͖Δ https://blog.xoxzo.com/en/2018/12/19/japanese-typography-for-web-design/

Slide 20

Slide 20 text

mixi, Inc. ҰํɺiOSͰ͸ • iOSଆ͸গͳ͘ͱ΋System FontͩͱݴޠʹΑΔLine Heightͷࠩ͸ͳ͔ͬͨ • ͨͩ͠ɺ୅ΘΓʹ೔ຊޠͷϑΥϯταΠζ͸উखʹ1pt΄Ͳ(αΠζʹΑΔ)খ͘͞දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯΔ • ͜Ε΋ɺ࿨จͩͱځ۶ʹݟ͑ͯ͠·͏͜ͱʹର͢ΔOSଆͷ഑ྀͩͱਪ࡯Ͱ͖Δ https://qiita.com/moccow/items/4d0870e81db909a7aabd

Slide 21

Slide 21 text

mixi, Inc. Ԥจ/࿨จʹΑͬͯҟͳΔ࢓༷ʹର͢ΔΈͯͶͰͷରԠ • ΈͯͶͰ͸σβΠϯπʔϧʹFigmaΛ࠾༻͍ͯͯ͠σβΠϯγεςϜͷҰ෦ͱͯ͠ TypographyΛఆٛͯ͠؅ཧ͍ͯ͠Δ • ͦ͜Ͱ͸Roboto΍Noto Sans CJKͷΑ͏ͳϑΥϯτ͝ͱʹίϯϙʔωϯτΛఆ͍ٛͯ͠Δ • AndroidͷLine Height͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ σϑΥϧτͷLine HeightΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ • iOSͷϑΥϯταΠζ͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ ϑΥϯταΠζΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ

Slide 22

Slide 22 text

mixi, Inc. ·ͱΊ • android:lineSpacingExtra ͸ҙਤͨ͠ݟͨ໨ʹͳΒͳ͍ͨΊ࢖Θͳ͍ํ͕ྑ͍ • api level 28Ͱ͸͋Δ͕୅ΘΓʹ android:lineHeight Λ࢖༻ͨ͠ํ͕ྑ͍ • ೔ຊޠͩͱઃఆͨ͠Line HeightΑΓେ͖Ίʹߦ͕ؒඳը͞ΕΔͨΊɺ
 ͦͷ࢓༷ΛσβΠφʹڞ༗͓͚ͯ͠Δͱྑ͍

Slide 23

Slide 23 text

Thank you!!!