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

iOSアプリでLine Heightを
設定するときに注意したいこと / Things to ...

Avatar for rockname rockname
March 26, 2021
Programming
3.6k
2

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/

Avatar for rockname

rockname

March 26, 2021

More Decks by rockname

See All by rockname
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
Avatar for rockname rockname
2
4.8k
Unlock the Potential of Swift Code Generation
Avatar for rockname rockname
0
590
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
Avatar for rockname rockname
0
150
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
Avatar for rockname rockname
2
4.5k
サブスクリプション機能制御の設計における勘所
Avatar for rockname rockname
0
1.3k
Anatomy of Dynamic color
Avatar for rockname rockname
1
1.3k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
Avatar for rockname rockname
10
21k
Optimistic Updatesで
UXを向上させる / Improve UX with Optimistic Updates
Avatar for rockname rockname
2
1.6k
モバイルアプリのリストUIにおける
理想的なState表示について / The ideal state display in a mobile app list UI
Avatar for rockname rockname
6
2.2k

Other Decks in Programming

See All in Programming
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
530
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
160
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
770
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
460
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
170
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
650
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
Avatar for Susisu susisu
0
140
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
180
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
850
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
120
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
550

Featured

See All Featured
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
390
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
210
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
790
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k

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!!!