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
iOSアプリでLine Heightを 設定するときに注意したいこと / Things to ...
Search
rockname
March 26, 2021
Programming
2
3.3k
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/
rockname
March 26, 2021
Tweet
Share
More Decks by rockname
See All by rockname
Unlock the Potential of Swift Code Generation
rockname
0
360
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
80
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.9k
サブスクリプション機能制御の設計における勘所
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
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
CDK引数設計道場100本ノック
badmintoncryer
2
480
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
990
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Raft: Consensus for Rubyists
vanstee
140
7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Bash Introduction
62gerente
613
210k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Adopting Sorbet at Scale
ufuk
77
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Facilitating Awesome Meetings
lara
54
6.5k
Speed Design
sergeychernyshev
32
1k
Transcript
iOSΞϓϦͰLine HeightΛ ઃఆ͢Δͱ͖ʹҙ͍ͨ͜͠ͱ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
mixi, Inc. ࣗݾհ ϩΫωϜ / rockname • ϛΫγΟͰʮՈΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ •
iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ • εϚϒϥ͕͖
mixi, Inc. iOSΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿઃఆ͠ͳ͔ͬͨ߹ ӈਤͷΑ͏ʹځ۶ͳҹΛ༩͑ͯ͠·͏ • ߦؒʹదͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ
ಡΈ͘͢ද͍ࣔͨ͠
mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties
mixi, Inc. NSParagraphStyle > lineSpacing • iOSͰߦؒΛࢦఆ͍ͨ͠߹ͪ͜ΒΛ͏ • lineSpacingΛઃఆͨ͠NSParagraphStyleΛ NSAttributedStringʹՃ͢Δ
mixi, Inc.
mixi, Inc. Line HeightΛઃఆ • fontSize: 25pt ʹରͯ͠ lineSpacing: 5pt
Λઃఆ (Line Height͕30ʹͳΔ͜ͱΛظ)
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظͷ30ptʹରͯ͠5ptେ͖͍Line Height • ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ
mixi, Inc. UIFont > lineHeight • UIFontʹσϑΥϧτͰlineHeight͕ઃఆ͞Ε͍ͯΔ • ͜ͷΛߟྀͯ͠NSAttributedStringʹlineSpacing Λઃఆ͢Δඞཁ͕͋ͬͨ
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • UIFont.font.pointSizeͱUIFont.lineHeightͱ NSParagraphStyle.lineSpacing ӈਤͷΑ͏ͳؔ • ͭ·ΓɺҎԼͷΑ͏ͳ͕ࣜΓཱͭ lineSpacing
= ఆ͢Δߦؒ - (lineHeight - fontSize)
mixi, Inc.
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ఆ௨Γ30ptͷLine HeightΛઃఆͰ͖͍ͯΔ
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
Thank you!!!