Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOSアプリでLine Heightを
設定するときに注意したいこと / Things to keep in mind when setting Line Height in your iOS app

070d33664df274636dad3da21c9b21fc?s=47 rockname
March 26, 2021
Programming
1
850

iOSアプリでLine Heightを
設定するときに注意したいこと / Things to keep in mind when setting Line Height in your iOS app

[Online] potatotips #73 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/202810/

070d33664df274636dad3da21c9b21fc?s=128

rockname

March 26, 2021
Tweet

More Decks by rockname

See All by rockname
Optimistic Updatesで
UXを向上させる / Improve UX with Optimistic Updates
070d33664df274636dad3da21c9b21fc?s=48 rockname
2
450
モバイルアプリのリストUIにおける
理想的なState表示について / The ideal state display in a mobile app list UI
070d33664df274636dad3da21c9b21fc?s=48 rockname
5
870
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
070d33664df274636dad3da21c9b21fc?s=48 rockname
4
210
The practice of inclusive design -WWDC21-
070d33664df274636dad3da21c9b21fc?s=48 rockname
1
760
AndroidアプリでLine Heightを
設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
070d33664df274636dad3da21c9b21fc?s=48 rockname
2
1.1k
2021年度 ミクシィ新卒研修 -iOSアプリ開発- / 2021 iOS mixi training
070d33664df274636dad3da21c9b21fc?s=48 rockname
7
40k
2020年度 ミクシィ新卒研修 -設計・テスト- / 2020 design test mixi training
070d33664df274636dad3da21c9b21fc?s=48 rockname
0
940
デザインにオブジェクト指向を適用する / Apply Object-Oriented to your design
070d33664df274636dad3da21c9b21fc?s=48 rockname
12
3.9k
モバイルアプリを開発する上で理想的な色の命名規則 / Ideal color naming convention for developing mobile apps
070d33664df274636dad3da21c9b21fc?s=48 rockname
13
1.9k

Other Decks in Programming

See All in Programming
2022 - COSCUP - 打造高速 Ruby 專案開發流程
888339de9e7a88688b6acb30d33e66cd?s=48 elct9620
0
100
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
341ac9f717b3904d6674784c0fcd9cf2?s=48 owaspkansai
0
290
Introduction to Property-Based Testing @ COSCUP 2022
Fd9f21969cd8a0cbf0b2f48a9af0cc28?s=48 cybai
1
150
SwiftUIで「意図」を伝える / swiftui_intention
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
2
150
Untangling Coroutine Testing (Droidcon Berlin 2022)
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
480
NestJS_meetup_atamaplus
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
210
Rust、何もわからない...#3
5d9c07f0c2044b1407a84d88362bc84d?s=48 estie
0
160
段階的な技術的負債の解消方法.pdf
41e5cd2b99a8e7c84f91a8137c8be3ed?s=48 ko2ic
2
930
パラメタライズドテスト
4f8c3a1aedaf9aafd6c74ab077d9ad18?s=48 ledsun
0
220
Register-based calling convention for Go functions
86d54dc23ace2b5920f7d5777949ed8f?s=48 cjamhe01385
0
410
Scaling Productivity- How we have improved our dev experience
63c8b0590595c3de58406678ef99a6bf?s=48 sockeqwe
1
120
RustのWebフレームワーク周りの概観
E42cffccdc14c60a449caac8de0ce0e0?s=48 hayao
0
180

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.3k
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
123
7.7k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
21k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
6
570
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k

Transcript

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

  2. mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ
 ։ൃͯ͠Δ •

    iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖

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


    ಡΈ΍͘͢ද͍ࣔͨ͠

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

  5. mixi, Inc. NSParagraphStyle > lineSpacing • iOSͰߦؒΛࢦఆ͍ͨ͠৔߹͸ͪ͜ΒΛ࢖͏ • lineSpacingΛઃఆͨ͠NSParagraphStyleΛ
 NSAttributedStringʹ௥Ճ͢Δ

  6. mixi, Inc.

  7. mixi, Inc. Line HeightΛઃఆ • fontSize: 25pt ʹରͯ͠ lineSpacing: 5pt

    Λઃఆ
 (Line Height͕30ʹͳΔ͜ͱΛظ଴)

  8. mixi, Inc. ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظ଴஋ͷ30ptʹରͯ͠5ptେ͖͍Line Height • ૝ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ

  9. mixi, Inc. UIFont > lineHeight • UIFontʹ͸σϑΥϧτͰlineHeight͕ઃఆ͞Ε͍ͯΔ • ͜ͷ஋Λߟྀͯ͠NSAttributedStringʹlineSpacing
 Λઃఆ͢Δඞཁ͕͋ͬͨ

  10. mixi, Inc. ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • UIFont.font.pointSizeͱUIFont.lineHeightͱ
 NSParagraphStyle.lineSpacing͸
 ӈਤͷΑ͏ͳؔ܎ • ͭ·ΓɺҎԼͷΑ͏ͳ͕ࣜ੒Γཱͭ
 lineSpacing

    = ૝ఆ͢Δߦؒ - (lineHeight - fontSize)

  11. mixi, Inc.

  12. mixi, Inc. ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ૝ఆ௨Γ30ptͷLine HeightΛઃఆͰ͖͍ͯΔ

  13. mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ

  14. mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ

  15. mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ

  16. Thank you!!!