Mobil Yazı Boyutu: Gövde Metni Neden 12px Değil ve Hangi Boyutlar Kullanılmalı
Telefonda gövde metni iOS'ta 17 pt, Android'de 16 sp'dir. On iki bir alt yazıdır, 11 ise taban. Safari yakınlaştırmasın diye input'ları 16 px yapın ve metnin büyümesine izin verin. 11 iOS boyutunun tamamı burada.
Telefonda gövde metni 12 px değildir. Apple'ın varsayılan gövde boyutu 17 punto, Material'ınki 16. On iki bir alt yazıdır ve alt yazılarla dizilmiş bir ekran, insanların gözlerini kısarak baktığı bir ekrandır. Aşağıda dört kural ve bunları alabileceğiniz iOS boyutlarının tam listesi var.
12 px neden hep karşımıza çıkıyor
Mockup'lar büyük bir monitörde, tasarım ekrana sığacak şekilde yakınlaştırılarak çizilir. O mesafede 12 derli toplu, 17 ise bağıran gibi görünür. Yani boyutlar çerçevede ne kadar düzgün durduklarına göre seçilir ve çerçeve telefon değildir.
Sonra telefon kol mesafesinde, güneş altında, yürüyen biri tarafından tutulur. Aynı 12 px artık küçük, parlak ve hareketlidir. Dosyada derli toplu, elde yorucu.
Çözüm, boyutları gözle seçmeyi bırakmak. İki platform da bir tip ölçeği yayımlıyor ve içindeki boyutlar gerçek cihazlarda, gerçek okuma mesafelerinde test edildi. Sayılarınızı oradan alın.
Düzeltme 1: gövde 17'de
12 pt gövde
17 pt, iOS Body
iPhone'da varsayılan Body stili 22 pt satır yüksekliğiyle 17 pt'tir. Android'de Material'ın Body Large'ı 24 sp satır yüksekliğiyle 16 sp'dir. Web'de tarayıcı varsayılanı 16 px. Üç platform, üç farklı birim ve tek cevap: gövde metni 16 ile 17 arasında yaşar.
Bu kuraldan en çok uzun metin etkilenir. Tek satırlık bir etiket küçük olup yine de idare eder. Birinin sonuna kadar okuması gereken bir paragraf idare etmez. Ekranda paragraf varsa gövde boyutunda yazılmalı ve ortaya çıkan fazladan satır, okunmanın bedelidir.
Düzeltme 2: 11'in altı yok
On iki yasak değil. Bir adı var: Caption 1. Fotoğrafın altındaki küçük yazı ya da zaman damgası için tasarlandı; gözden kaçmasına izin verilen metinler için. Gövde metni bu değil.
On bir tabandır. iOS'ta Caption 2 11 pt'tir ve Apple'ın sunduğu en küçük metin stilidir. Material'ın en küçük stili Label Small da 11 sp. İki platform da aynı sayıda durduğunda, onun altına inen bir tasarım, hiçbir sistemin yazmayacağı bir metin yazıyordur.
Küçük stilleri yalnızca ikincil bilgi için kullanın: zaman damgaları, birimler, yasal satırlar, sekme ikonunun altındaki minik etiket. Birinin harekete geçmek için ihtiyaç duyduğu bir bilgiyse, o bir alt yazı değildir.
Düzeltme 3: input'lar 16'da
15 px input
16 px input
Bu bir web kuralı ve insanları şaşırtıyor, çünkü alanda yanlış görünen hiçbir şey yok. iOS Safari, yazı boyutu 16 px'ten küçük olan bir metin input'una yakınlaşır. 16 px veya üzerinde yakınlaşmaz. Yakınlaştırma kendiliğinden geri dönmez, bu yüzden kişi formun geri kalanını görmeden önce parmaklarıyla uzaklaştırmak zorunda kalır.
Çözüm tek satır CSS ve çözüm viewport etiketinde "yakınlaştırmayı kapat" olmamalı. Yakınlaştırmayı engellemek, buna ihtiyacı olan insanlardan bir aracı alır. Bunun yerine input'un yazı boyutunu ayarlayın.
Düzeltme 4: büyümesine izin verin
Sabit yükseklik
Satırlar sarılıyor
Sizin 17'niz bir başlangıç noktası, bir söz değil. İnsanlar Ayarlar'dan metin boyutunu artırır ve iOS onların varsayılanın çok ötesine, erişilebilirlik boyutlarına geçmesine izin verir; orada Body ilk adımda 28 pt'ye, en büyükte 53 pt'ye ulaşır. Android kullanıcıları aynısını yazı tipi ölçeğiyle yapar.
Ekranlarınızı yayına çıkmadan önce en büyük boyutlarda test edin. Üç şeye bakın: üç nokta ile kesilen metin, komşusunun üstüne binen metin ve artık sığmayan bir düğme etiketi. Çare her seferinde aynı. Satırın sarılmasına, satırın büyümesine izin verin ve yükseklikleri sabitlemeyi bırakın.
Web'de aynı fikir, metni px yerine rem ile boyutlandırmak demek; böylece tarayıcının kendi metin boyutu ayarını izler. WCAG, metnin içerik veya işlev kaybı olmadan yüzde 200'e kadar yeniden boyutlandırılabilmesini ister.
11 iOS metin boyutunun tamamı
| Stil | Boyut / satır yüksekliği (pt) | Ne için kullanılır |
|---|---|---|
| Large Title | 34 / 41 | Ana ekranın üstü |
| Title 1 | 28 / 34 | Bölüm ekranları |
| Title 2 | 22 / 28 | Alt bölümler |
| Title 3 | 20 / 25 | Kart ve grup başlıkları |
| Headline | 17 / 22 | Satır başlıkları, yarı kalın |
| Body | 17 / 22 | Paragraflar ve okuma metni |
| Callout | 16 / 21 | Destekleyici metin |
| Subhead | 15 / 20 | Başlık altındaki ikincil satırlar |
| Footnote | 13 / 18 | Notlar ve meta veriler |
| Caption 1 | 12 / 16 | Küçük yazı |
| Caption 2 | 11 / 13 | Taban |
Bunlar iOS'un varsayılan Large metin ayarındaki boyutlar. Yalnızca on bir tane olmasının bir nedeni var: kısa bir ölçek akılda tutması kolaydır ve her ekranda tutarlı kalması kolaydır.
Android'deki karşılıkları, Material 3'te Body Large 16 / 24 ve Label Small 11 / 16.
Bunu geliştiricinize verin
:root {
--text-body: 1.0625rem; /* 17 px, iOS Body */
--text-callout: 1rem;
--text-footnote: 0.8125rem;
--text-floor: 0.6875rem; /* 11 px, never lower */
}
body { font-size: var(--text-body); line-height: 1.3; }
/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }
iOS'ta sistem metin stillerini (.body, .footnote) kullanın ki Dynamic Type bedavaya çalışsın. Android'de metni dp değil sp ile ayarlayın ki yazı tipi ölçeği ayarını izlesin.
SSS
Bir mobil uygulama için minimum yazı boyutu nedir?
Her iki platformda da 11. iOS'ta Caption 2 11 pt, Material 3'te Label Small 11 sp. Harekete geçmek için okunması gereken her şey çok daha büyük olmalı.
iPhone'da gövde metni hangi yazı boyutunda olmalı?
17 pt. Bu, 22 pt satır yüksekliğiyle iOS Body stilinin varsayılanıdır ve kişi metin boyutunu artırdığında büyür.
Android'de gövde metni hangi yazı boyutunda olmalı?
16 sp. Bu, Material 3'te 24 sp satır yüksekliğiyle Body Large'dır.
12px gövde metni için çok mu küçük?
Gövde metni için evet. iOS'ta küçük yazı için tasarlanmış Caption 1 stilinde duruyor. Okuma metni 16 ile 17 arasında olmalı.
iPhone'da bir input'a dokunduğumda sayfam neden yakınlaşıyor?
iOS Safari, yazı boyutu 16 px'ten küçük olan metin input'larına yakınlaşır. Input'u 16 px veya daha büyük yapın, durur.
Metnin sistem ayarıyla ölçeklenmesine izin vermeli miyim?
Evet. İnsanlar Ayarlar'da metin boyutunu haklı nedenlerle artırır, bu yüzden metni kesmek yerine sarılan ve büyüyen satırlar ve düğmeler tasarlayın.
Kaynaklar
- Apple Human Interface Guidelines, Typography: varsayılan Large boyutundaki iOS metin stilleri, punto cinsinden. Body 17/22, Callout 16/21, Subhead 15/20, Footnote 13/18, Caption 1 12/16, Caption 2 11/13, Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22. Body, ilk erişilebilirlik boyutunda 28/34, en büyükte 53/62'dir.
- Material Design 3, Typography: Body Large 16/24 sp ve en küçük stil olarak Label Small 11/16 sp.
- CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier, 2021): iOS Safari, 15 px ve altına ayarlanmış input'lara yakınlaşır, 16 px ve üzerine yakınlaşmaz.
- WCAG 2, 1.4.4 Resize Text: metin, içerik veya işlev kaybı olmadan yüzde 200'e kadar yeniden boyutlandırılabilir.
- Bu sayfadaki örnekler Apple'ın kendi SF Pro'su ile değil, Apple'ın boyutlarında Inter ile dizilmiştir. Örnek kart ve satır metinleri bu sayfa için uydurulmuştur.
- İlk olarak UX Brainy üzerinde bir carousel olarak yayımlandı.
Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.
Get Started
