اندازه فونت موبایل: چرا متن اصلی 12px نیست و چه اندازه‌هایی را باید به کار برد
متن اصلی روی گوشی در iOS برابر 17 pt و در اندروید 16 sp است. عدد 12 اندازه کپشن است و 11 کف مجاز. ورودی‌ها را روی 16 px بگذارید تا Safari زوم نکند و بگذارید متن بزرگ شود. هر 11 اندازه iOS داخل مقاله است.
متن اصلی روی گوشی 12 px نیست. اندازه پیشفرض متن اصلی در Apple برابر 17 پوینت و در Material برابر 16 است. عدد 12 اندازه کپشن است و صفحه‌ای که همه‌اش کپشن باشد، صفحه‌ای است که مردم چشم‌هایشان را برایش تنگ میکنند. در ادامه چهار قاعده و فهرست کامل اندازه‌های iOS را می‌بینید تا از آن‌ها عدد بردارید.
چرا 12 px مدام سروکله‌اش پیدا میشود
موکاپ‌ها روی مانیتور بزرگ و با زوم برای جا شدن در صفحه طراحی می‌شوند. از آن فاصله 12 مرتب به نظر می‌رسد و 17 فریاد می‌زند. پس اندازه‌ها را بر اساس زیبایی‌شان در فریم انتخاب می‌کنیم، و فریم همان گوشی نیست.
بعد گوشی به اندازه طول دست از چشم فاصله دارد، زیر نور آفتاب، در دست کسی که راه می‌رود. همان 12 px حالا کوچک است، براق است و تکان می‌خورد. در فایل مرتب، در دست خسته‌کننده.
راه‌حل این است که دیگر اندازه را با چشم انتخاب نکنیم. هر دو پلتفرم یک مقیاس تایپ منتشر کرده‌اند و اندازه‌هایش روی دستگاه‌های واقعی و در فاصله‌های خواندن واقعی آزمایش شده‌اند. عددها را از همان‌جا بردارید.
قاعده 1: متن اصلی روی 17
متن اصلی 12 pt
17 pt، Body در iOS
در iPhone استایل پیشفرض Body برابر 17 pt با ارتفاع خط 22 pt است. در اندروید، Body Large در Material برابر 16 sp با ارتفاع خط 24 sp است. در وب، پیشفرض مرورگر 16 px است. سه پلتفرم، سه واحد متفاوت و یک جواب: متن اصلی بین 16 تا 17 زندگی میکند.
متن‌های طولانی بیشترین فشار را روی این قاعده می‌آورند. یک برچسب تک‌خطی می‌تواند کوچک باشد و جان سالم به در ببرد. پاراگرافی که کسی باید تا آخر بخواند نمی‌تواند. اگر در صفحه پاراگراف هست، باید با اندازه Body نوشته شود و خط اضافه‌ای که ایجاد میکند بهای خوانده شدن است.
قاعده 2: هیچ چیز زیر 11 نباشد
عدد 12 ممنوع نیست. اسم دارد: Caption 1. برای نوشته‌های ریز زیر عکس یا یک برچسب زمانی است، متنی که مجاز است دیده نشود. متن اصلی از آن جنس نیست.
عدد 11 کف است. Caption 2 در iOS برابر 11 pt است و کوچک‌ترین استایل متنی است که Apple عرضه میکند. کوچک‌ترین استایل Material یعنی Label Small هم 11 sp است. وقتی هر دو پلتفرم روی یک عدد می‌ایستند، طراحی‌ای که پایین‌تر برود متنی می‌نویسد که هیچ‌کدام از دو سیستم نمی‌نویسند.
استایل‌های کوچک را فقط برای اطلاعات ثانویه استفاده کنید: برچسب زمانی، واحدها، خطوط حقوقی، برچسب ریز زیر آیکن تب. اگر اطلاعاتی است که کسی باید بر اساسش کاری بکند، کپشن نیست.
قاعده 3: ورودی‌ها روی 16
ورودی با 15 px
ورودی با 16 px
این یکی قاعده وب است و آدم‌ها را غافلگیر میکند چون هیچ چیز فیلد اشتباه به نظر نمی‌رسد. Safari در iOS وقتی اندازه فونت یک ورودی متنی کوچک‌تر از 16 px باشد داخلش زوم میکند. با 16 px یا بیشتر این اتفاق نمی‌افتد. زوم خودش برنمی‌گردد، پس کاربر باید با دو انگشت صفحه را کوچک کند تا بقیه فرم را ببیند.
راه‌حل یک خط CSS است و نباید «خاموش کردن زوم» در تگ viewport باشد. بستن زوم ابزاری را از کسانی می‌گیرد که به آن نیاز دارند. به جایش اندازه فونت ورودی را درست بگذارید.
قاعده 4: بگذارید رشد کند
ارتفاع ثابت
خطوط میشکنند
17 شما نقطه شروع است، نه تضمین. مردم اندازه متن را در Settings بالا میبرند و iOS اجازه می‌دهد خیلی فراتر از پیشفرض بروند، تا اندازه‌های دسترسی‌پذیری، جایی که Body در اولین پله به 28 pt و در بزرگ‌ترین به 53 pt می‌رسد. کاربران اندروید با font scale همین کار را میکنند.
صفحه‌هایتان را پیش از انتشار با بزرگ‌ترین اندازه‌ها تست کنید. سه چیز را دنبال کنید: متنی که با سه‌نقطه بریده شده، متنی که روی همسایه‌اش می‌افتد و برچسب دکمه‌ای که دیگر جا نمی‌شود. درمان هر بار یکی است. بگذارید خط بشکند، بگذارید ردیف رشد کند و دست از ثابت کردن ارتفاع‌ها بردارید.
در وب همین ایده یعنی اندازه متن را با rem بدهید نه px، تا از تنظیم اندازه متن خود مرورگر پیروی کند. WCAG می‌خواهد متن تا 200 درصد بدون از دست رفتن محتوا یا عملکرد قابل تغییر اندازه باشد.
هر 11 اندازه متن در iOS
| استایل | اندازه / ارتفاع خط (pt) | کاربرد |
|---|---|---|
| Large Title | 34 / 41 | بالای یک صفحه اصلی |
| Title 1 | 28 / 34 | صفحه‌های بخش‌ها |
| Title 2 | 22 / 28 | زیربخش‌ها |
| Title 3 | 20 / 25 | عنوان کارت‌ها و گروه‌ها |
| Headline | 17 / 22 | عنوان ردیفها، semibold |
| Body | 17 / 22 | پاراگراف‌ها و متن خواندنی |
| Callout | 16 / 21 | متن پشتیبان |
| Subhead | 15 / 20 | خطوط ثانویه زیر عنوان |
| Footnote | 13 / 18 | یادداشت‌ها و فراداده |
| Caption 1 | 12 / 16 | نوشته ریز |
| Caption 2 | 11 / 13 | کف مجاز |
این‌ها اندازه‌ها در تنظیم پیشفرض Large در iOS هستند. دلیل اینکه فقط یازده تا وجود دارد این است: مقیاس کوتاه در ذهن جا میشود و نگه داشتنش در همه صفحه‌ها یکدست آسان است.
معادل‌های اندروید در Material 3 عبارت‌اند از Body Large با 16 / 24 و Label Small با 11 / 16.
این را به توسعه‌دهنده‌تان بدهید
: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 از استایل‌های متنی سیستم (.body، .footnote) استفاده کنید تا Dynamic Type مجانی کار کند. در اندروید متن را با sp بنویسید نه dp، تا از تنظیم font scale پیروی کند.
سوالات متداول
حداقل اندازه فونت برای یک اپ موبایل چقدر است؟
11، در هر دو پلتفرم. Caption 2 در iOS برابر 11 pt و Label Small در Material 3 برابر 11 sp است. هر چیزی که مردم برای انجام کاری باید بخوانند، باید خیلی بزرگتر باشد.
متن اصلی در iPhone چه اندازهای باید باشد؟
17 pt. این پیشفرض استایل Body در iOS است، با ارتفاع خط 22 pt، و وقتی کاربر اندازه متن را بالا ببرد بزرگتر میشود.
متن اصلی در اندروید چه اندازهای باید باشد؟
16 sp. این همان Body Large در Material 3 است، با ارتفاع خط 24 sp.
آیا 12px برای متن اصلی خیلی کوچک است؟
برای متن اصلی، بله. این اندازه در استایل Caption 1 در iOS قرار دارد که برای نوشته‌های ریز است. متن خواندنی باید 16 تا 17 باشد.
چرا وقتی در iPhone روی یک ورودی میزنم صفحهام زوم میشود؟
Safari در iOS داخل ورودیهای متنی که اندازه فونتشان کمتر از 16 px است زوم میکند. ورودی را روی 16 px یا بزرگتر بگذارید تا متوقف شود.
آیا بگذارم متن با تنظیم سیستم بزرگ شود؟
بله. مردم به دلایل خوبی اندازه متن را در Settings بالا میبرند، پس ردیفها و دکمههایی طراحی کنید که میشکنند و رشد میکنند، نه اینکه متن را ببرند.
منابع
- Apple Human Interface Guidelines, Typography: استایل‌های متنی iOS در اندازه پیشفرض Large، بر حسب پوینت. 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 در اولین اندازه دسترسی‌پذیری 28/34 و در بزرگ‌ترین 53/62 است.
- Material Design 3, Typography: Body Large با 16/24 sp و Label Small با 11/16 sp به‌عنوان کوچک‌ترین استایل.
- CSS-Tricks، 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier، 2021): Safari در iOS داخل ورودیهای 15 px یا کمتر زوم میکند، نه 16 px یا بیشتر.
- WCAG 2, 1.4.4 Resize Text: متن باید تا 200 درصد بدون از دست رفتن محتوا یا عملکرد قابل تغییر اندازه باشد.
- نمونه‌های این صفحه با فونت Inter و در اندازه‌های Apple نوشته شده‌اند، نه با SF Pro خود Apple. متن کارت و ردیف نمونه برای همین صفحه ساخته شده است.
- نخستین بار به‌صورت کاروسل در UX Brainy منتشر شد.
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
