تایپوگرافی که با صفحه هماهنگ میشود: Responsive Typography
در فصل ۸ (Typography)، با clamp() و مفهوم Fluid Typography آشنا شدیم. حالا که Media Query و Breakpointها رو کامل دیدیم، وقتشه این دو رویکرد رو، در کنار هم، برای ساخت یک سیستم تایپوگرافی واکنشگرای کامل، ترکیب کنیم.
دو رویکرد اصلی برای تایپوگرافی واکنشگرا
برای تغییر اندازه فونت بین صفحهنمایشهای مختلف، دو رویکرد اصلی وجود داره:
- رویکرد پلکانی (Step-based): استفاده از Media Query برای تغییر اندازه فونت در چند نقطه مشخص (Breakpoint).
- رویکرد سیال (Fluid): استفاده از
clamp()برای تغییر پیوسته و نرم اندازه فونت، بدون نقطه پرش مشخص.
رویکرد پلکانی با Media Query
h1 {
font-size: 2rem;
}
@media (min-width: 600px) {
h1 {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 3.5rem;
}
}در این روش، اندازه فونت، فقط در نقاط مشخصی (Breakpoint) تغییر میکنه؛ بین این نقاط، اندازه کاملاً ثابت میمونه. این رویکرد، خوانا و کنترلپذیره، ولی ممکنه در عرضهای بین دو Breakpoint، گاهی اندازه فونت، نسبت به فضای موجود، کمی نامتناسب بهنظر برسه.
رویکرد سیال با clamp()
h1 {
font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
}همونطور که در فصل ۸ کامل دیدیم، این روش، بدون هیچ Media Queryای، اندازه فونت رو، بهطور پیوسته و نرم، متناسب با عرض صفحه، بین یک حداقل و حداکثر، تغییر میده.
مقایسه این دو رویکرد
| ویژگی | رویکرد پلکانی (Media Query) | رویکرد سیال (clamp) |
|---|---|---|
| نوع تغییر | ناگهانی، در نقاط مشخص | پیوسته و نرم |
| حجم کد | بیشتر (نیاز به چند Rule جدا) | کمتر (یک خط برای همه حالتها) |
| کنترل دقیق در هر نقطه | بسیار دقیق و پیشبینیپذیر | کمی کمتر قابلپیشبینی در میانهها |
در عمل، خیلی از پروژههای واقعی، ترکیبی از هر دو رویکرد رو بهکار میبرن: clamp() برای تیترهای بزرگ (که نرمی تغییر اهمیت بصری داره)، و گاهی Media Query برای مواردی که نیاز به کنترل دقیقتر در نقاط خاص وجود داره.
هماهنگ کردن کل مقیاس تایپوگرافی با Breakpointها
:root {
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 2rem;
}
@media (min-width: 768px) {
:root {
--font-size-base: 1.125rem;
--font-size-lg: 1.5rem;
--font-size-xl: 2.75rem;
}
}
p {
font-size: var(--font-size-base);
}
h1 {
font-size: var(--font-size-xl);
}یک الگوی بسیار رایج و مقیاسپذیر، تعریف کل مقیاس تایپوگرافی بهصورت CSS Custom Properties (که بهطور کامل در فصل ۱۶ بررسیشون میکنیم) روی :root، و سپس تغییر این متغیرها، فقط در چند Breakpoint مشخص. با این روش، بهجای نوشتن دهها Media Query جدا برای هر عنصر متنی، فقط با تغییر چند متغیر مرکزی، کل تایپوگرافی صفحه، هماهنگ و یکجا بهروزرسانی میشه.
line-height در تایپوگرافی واکنشگرا
h1 {
font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
line-height: 1.15;
}
p {
font-size: 1rem;
line-height: 1.6;
}یادآوری مهم از فصل ۸: همیشه از مقدار بدون واحد برای line-height استفاده کنید، مخصوصاً وقتی font-size با clamp() پیوسته تغییر میکنه؛ چون فقط مقدار بدون واحد، بهطور خودکار و نسبی، با هر اندازه فونتی که در هر لحظه فعاله، هماهنگ میمونه.
عرض خط (Line Length) در صفحهنمایشهای بزرگ
.article-body {
max-width: 65ch;
margin-inline: auto;
}این هم یادآوری از فصل ۸: در صفحهنمایشهای بزرگ، بدون محدود کردن عرض متن (با واحد ch)، خطوط متن، بیشازحد طولانی میشن و خوانایی رو کاهش میدن. این نکته، در طراحی واکنشگرا اهمیت بیشتری پیدا میکنه، چون تفاوت عرض بین موبایل و مانیتور بزرگ، میتونه بسیار زیاد باشه.
تغییر letter-spacing و text-align در Breakpointهای مختلف
h1 {
text-align: center;
letter-spacing: -0.01em;
}
@media (min-width: 768px) {
h1 {
text-align: start;
}
}گاهی، علاوه بر اندازه، سایر جنبههای تایپوگرافی (مثل چیدمان یا فاصلهگذاری حروف) هم، بین موبایل و دسکتاپ، تفاوت معناداری دارن؛ مثلاً یک تیتر که در موبایل، بهخاطر محدودیت عرض، بهتره وسطچین باشه، ولی در دسکتاپ، با فضای بیشتر، از سمت شروع متن (start، همون مفهوم فصل ۱۱) چیده بشه.
یک مثال کامل و جامع
:root {
--font-size-h1: clamp(1.75rem, 5vw, 3rem);
--font-size-body: 1rem;
}
h1 {
font-size: var(--font-size-h1);
line-height: 1.15;
letter-spacing: -0.01em;
text-align: center;
}
p {
font-size: var(--font-size-body);
line-height: 1.65;
max-width: 65ch;
margin-inline: auto;
}
@media (min-width: 768px) {
h1 {
text-align: start;
}
}این مثال، ترکیبی از هر دو رویکرد (سیال با clamp، و پلکانی با Media Query برای چیدمان)، همراه با اصول خوانایی (خط بدون واحد و محدودیت طول خط) رو، در یک سیستم تایپوگرافی واکنشگرای منسجم، کنار هم قرار میده.
نکات مهم
- تایپوگرافی واکنشگرا میتواند با رویکرد پلکانی (Media Query) یا رویکرد سیال (clamp)، یا ترکیبی از هر دو، پیادهسازی شود.
- استفاده از CSS Custom Properties برای مقیاس تایپوگرافی، بهروزرسانی هماهنگ کل صفحه را، فقط با تغییر چند متغیر مرکزی، ممکن میکند.
- در طراحی واکنشگرا، اصولی مثل line-height بدون واحد و محدودیت max-width با ch، اهمیت بیشتری پیدا میکنند، چون تفاوت اندازه صفحه بین موبایل و دسکتاپ میتواند بسیار زیاد باشد.
اشتباهات رایج
- استفاده انحصاری از یک رویکرد (فقط پلکانی یا فقط سیال) در سراسر پروژه، بدون در نظر گرفتن نیاز واقعی هر عنصر.
- فراموش کردن هماهنگی line-height با تغییرات پیوسته font-size ناشی از clamp().
- عدم محدود کردن max-width پاراگرافها در صفحهنمایشهای بزرگ، که باعث خطوط بیشازحد طولانی میشود.
جمعبندی
تایپوگرافی واکنشگرا، ترکیبی از دو رویکرد اصلی است: پلکانی (تغییر اندازه فونت در نقاط مشخص با Media Query) و سیال (تغییر پیوسته با clamp)؛ در عمل، بسیاری از پروژهها از ترکیب هر دو بهره میبرند. استفاده از CSS Custom Properties برای مقیاس تایپوگرافی، و رعایت اصولی مثل line-height بدون واحد و محدودیت طول خط، پایهی یک سیستم تایپوگرافی واکنشگرای منسجم و خوانا را میسازد.