تایپوگرافی

اگر هیچ سبکی برای متن خود تعیین نکنید، مرورگرها سبک های پیش فرض خود را اعمال خواهند کرد. اینها شیوه نامه های عامل کاربر نامیده می شوند و ممکن است از مرورگری به مرورگر دیگر متفاوت باشند. کاربران می توانند تنظیمات برگزیده خود را برای نمایش متن نیز تنظیم کنند.

اگر طول خط را مشخص نکنید، مرورگرها خطوط متن را در لبه صفحه می‌پیچند. بنابراین متن در وب به طور پیش‌فرض پاسخ‌گو است – به گونه‌ای جریان می‌یابد که با نمای کاربر مطابقت داشته باشد.

اما فقط به این دلیل که متن بر روی صفحه نمایش قرار می گیرد به این معنی نیست که خواندن آن راحت است. تایپوگرافی خوب به معنای ارائه متن شما به شیوه ای مناسب است. تایپوگرافی بیشتر از انتخاب فونت های مناسب برای استفاده است. شما باید ترجیحات کاربر، اندازه متن، طول خط و فاصله بین خطوط متن را در نظر بگیرید.

اندازه متن

تشخیص اندازه متن در وب دشوار است.

اگر شخصی از یک صفحه نمایش کوچک استفاده می کند، ممکن است مطمئن باشید که صفحه نمایش او به اندازه یک دست به چشمانش نزدیک باشد.

اما با بزرگ‌تر شدن و بزرگ‌تر شدن صفحه‌نمایش، ایجاد این ارتباط سخت‌تر می‌شود. یک صفحه نمایش با اندازه لپ تاپ احتمالاً نزدیک به بیننده خواهد بود، اما یک مانیتور رومیزی با صفحه عریض تقریباً به اندازه یک صفحه تلویزیون است. مردم به اندازه یک بازو دورتر از صفحه دسکتاپ می نشینند اما خیلی دورتر از تلویزیون می نشینند.

با این حال، در حالی که نمی توانید به طور قطعی بدانید که یک نفر چقدر از صفحه نمایش فاصله دارد، می توانید سعی کنید از اندازه های متنی استفاده کنید که امیدوارم مناسب باشد. برای صفحه‌های کوچک‌تر از اندازه‌های متن کوچک‌تر و برای صفحه‌های بزرگ‌تر از اندازه‌های متن بزرگ‌تر استفاده کنید.

با بزرگتر شدن اندازه صفحه می توانید از پرس و جوهای رسانه ای برای تغییر ویژگی font-size استفاده کنید.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

مقیاس بندی متن

جابه‌جایی بین اندازه‌های متن ثابت در نقاط شکست خاص بسیار پرشور است. یک رویکرد پاسخگوتر این است که اجازه دهید عرض دستگاه کاربر بر اندازه متن تأثیر بگذارد.

واحد vw در CSS مخفف "wideport width" است. اتصال اندازه فونت به عرض درگاه نمایش به این معنی است که متن متناسب با عرض مرورگر بزرگ و کوچک می شود. این امر پیش بینی اندازه متن در هر عرض خاص را دشوار می کند، اما می دانید که اندازه متن برای عرض مرورگر کاربر مناسب است.

مهم است که از vw به تنهایی در اعلام اندازه فونت استفاده نکنید.

نکن
html {
  font-size: 2.5vw;
}

اگر این کار را انجام دهید، کاربر نمی تواند اندازه متن را تغییر دهد. اگر متن را در یک واحد نسبی ترکیب کنید - مانند em , rem یا ch , اندازه متن قابل تغییر خواهد بود. تابع calc() CSS برای این کار عالی است.

انجام دادن
html {
  font-size: calc(0.75rem + 1.5vw);
}

اجازه دهید مرورگر حساب را انجام دهد. این امر پیش بینی دقیق اندازه متن در هر عرض خاص را دشوار می کند، اما می دانید که اندازه متن در محدوده مناسب خواهد بود. مرورگر کاربر از محاسبه دقیق اندازه متن مراقبت می کند.

اما اکنون این احتمال وجود دارد که متن در صفحه نمایش های باریک بسیار کوچک و در صفحه های عریض بیش از حد بزرگ شود.

بستن متن

احتمالاً نمی خواهید متن شما کوچک شود و به سمت افراط رشد کند. می توانید با استفاده از تابع clamp() CSS کنترل کنید که مقیاس بندی کجا شروع و به پایان می رسد. این مقیاس بندی را به یک محدوده خاص "بسته" می کند.

تابع clamp() مانند تابع calc() است اما سه مقدار می گیرد. مقدار وسط همان چیزی است که به calc() ارسال می کنید. مقدار باز کردن حداقل اندازه را مشخص می کند، در این مورد 1rem است تا از اندازه فونت ترجیحی کاربر کمتر نشود. مقدار بسته شدن حداکثر اندازه را مشخص می کند.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

اکنون اندازه متن به تناسب صفحه کاربر کوچک می شود و بزرگ می شود، اما اندازه متن هرگز کمتر از 1rem یا بالاتر از 2rem نمی شود.

طول خط

وب چاپی نیست، اما می توانیم از دنیای چاپ درس هایی بیاموزیم و آنها را در وب به کار ببریم.

رابرت برینگهورست در کتاب کلاسیک خود به نام عناصر سبک تایپوگرافیک این را در مورد طول خط (یا اندازه گیری) می گوید:

هر چیزی از 45 تا 75 کاراکتر به طور گسترده به عنوان طول خط رضایت بخش برای یک صفحه تک ستونی در یک صفحه متن ردیف شده در اندازه متن در نظر گرفته می شود. خط 66 کاراکتری (شمارش حروف و فاصله ها) به طور گسترده ای ایده آل در نظر گرفته می شود. برای کار چند ستونی، میانگین بهتر 40 تا 50 کاراکتر است.

شما نمی توانید طول خط را مستقیماً در CSS تنظیم کنید. هیچ خاصیت line-length وجود ندارد. اما می‌توانید با محدود کردن عرض ظرف، از پهن شدن بیش از حد متن جلوگیری کنید. ویژگی max-inline-size برای این کار عالی است.

طول خط خود را با واحد ثابتی مانند px تنظیم نکنید. کاربران می توانند اندازه فونت خود را کم و زیاد کنند و طول خط شما باید متناسب با آن تنظیم شود. از یک واحد نسبی مانند rem یا ch استفاده کنید.

نکن
article {
  max-inline-size: 700px;
}
انجام دادن
article {
  max-inline-size: 66ch;
}

استفاده از واحدهای ch برای عرض باعث می شود که خطوط جدید با نویسه 66 در آن اندازه فونت بسته شوند.

ارتفاع خط

اگرچه در CSS خاصیت line-length وجود ندارد، ویژگی line-height وجود دارد.

خطوط کوتاه‌تر متن می‌توانند مقادیر line-height بزرگ‌تری داشته باشند. اما اگر از مقادیر بزرگ line-height برای خطوط طولانی متن استفاده کنید، برای چشم خواننده دشوار است که از انتهای یک خط به ابتدای خط بعدی حرکت کند.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

از مقادیر بدون واحد برای اعلام line-height خود استفاده کنید. این تضمین می کند که ارتفاع خط نسبت به font-size باشد.

نکن
line-height: 24px;
انجام دادن
line-height: 1.5;

ترکیبات و مقیاس

به یاد داشته باشید که هنگام ایجاد رابط کاربری خود برای وضوح و جریان صفحه بهتر، سلسله مراتب را اولویت بندی کنید. یک راه عالی برای انجام این کار استفاده از مقیاس تایپوگرافی است که در سیستم طراحی شما تعبیه شده است .

فونت های وب

تایپ فیس مانند صدایی برای کلمات شماست. برای طولانی ترین زمان در وب، گزینه های فونت بسیار کمی وجود داشت. فونت سیستم تنها گزینه بود. اما اکنون می توانید فونت وب را انتخاب کنید که با محتوای شما مطابقت داشته باشد.

از @font-face استفاده کنید تا به مرورگرها بگویید فایل‌های فونت وب شما را کجا پیدا کنند. از woff2 به عنوان فرمت فونت وب خود استفاده کنید. به خوبی پشتیبانی می شود و بهترین عملکرد را دارد.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

اما هر فایل فونت وب که اضافه می‌کنید به طور بالقوه می‌تواند تجربه کاربر را کاهش دهد زیرا زمان بارگذاری صفحه را افزایش می‌دهد. به یاد داشته باشید، طراحی فقط به این نیست که پیکسل های نهایی چگونه به نظر می رسند. سرعت رنگ آمیزی آن پیکسل ها بخش مهمی از تجربه کاربر است. تجربه ای که سریع به نظر می رسد یک تجربه کاربری خوب است.

بارگذاری فونت

می توانید درخواست کنید که مرورگرها در اسرع وقت شروع به دانلود یک فایل فونت کنند. یک عنصر link را به head سند خود اضافه کنید که به فایل فونت وب شما ارجاع می دهد. یک ویژگی rel با مقدار preload به مرورگر می گوید که آن فایل را اولویت بندی کند. یک ویژگی as با مقدار font به مرورگر می گوید که این چه نوع فایلی است. ویژگی type به شما امکان می دهد حتی دقیق تر باشید.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

حتی اگر خودتان فایل‌های فونت را میزبانی می‌کنید، باید ویژگی crossorigin را وارد کنید.

از ویژگی CSS font-display استفاده کنید تا به مرورگر بگویید چگونه جابجایی از فونت سیستمی به فونت وب را مدیریت کند. شما می توانید انتخاب کنید که هیچ متنی نمایش داده نشود تا زمانی که فونت وب بارگیری شود. می‌توانید فورا فونت سیستم را نمایش دهید و پس از بارگیری آن، به فونت وب بروید. هر دوی این استراتژی ها جنبه های منفی خود را دارند. اگر قبل از نمایش هر متنی منتظر بمانید تا فونت وب دانلود شود، کاربران ممکن است برای مدت طولانی به یک صفحه خالی خیره شوند. اگر ابتدا متن را با فونت سیستمی نشان دهید و سپس به فونت وب تغییر دهید، کاربران ممکن است با تغییر محتوا در صفحه مواجه شوند.

یک سازش خوب این است که قبل از نمایش هر متنی برای مدت کوتاهی منتظر بمانید. اگر فونت وب قبل از اتمام آن زمان بارگیری شود، متن با استفاده از فونت وب بدون تغییر محتوا نمایش داده می شود. اگر پس از اتمام زمان، فونت وب همچنان بارگیری نشده باشد، متن با استفاده از فونت سیستم نمایش داده می شود تا حداقل کاربر بتواند محتوا را بخواند.

اگر همچنان می‌خواهید فونت وب جایگزین فونت سیستم شود، هر زمان که فونت وب در نهایت بارگیری شد، از مقدار font-display swap استفاده کنید.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

اگر می‌خواهید پس از رندر شدن متن، فونت سیستم را fallback کنید، از یک مقدار font-display استفاده کنید.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

فونت های متغیر

اگر از وزن‌ها یا سبک‌های مختلف از یک فونت استفاده می‌کنید، ممکن است از تعداد زیادی فایل فونت جداگانه استفاده کنید—یک فایل فونت جداگانه برای هر وزن یا سبک.

فونت های متغیر با استفاده از یک فایل این مشکل را حل می کنند. به جای داشتن فایل‌های جداگانه برای معمولی، پررنگ، پررنگ‌تر و غیره، یک فایل فونت متغیر پاسخگو است. این شامل تمام اطلاعاتی است که برای نمایش در طیفی از وزن ها یا سبک ها نیاز دارد.

حرف A در وزن های مختلف نشان داده شده است.

این بدان معنی است که یک فایل فونت متغیر بزرگتر از یک فایل فونت معمولی است، اما یک فایل فونت متغیر احتمالا کوچکتر از چندین فایل فونت معمولی خواهد بود. اگر از وزن‌های مختلف زیادی استفاده می‌کنید، یک فونت متغیر می‌تواند عملکرد زیادی را به شما بدهد.

تایپوگرافی خوب در وب فقط مربوط به انتخاب نوع شما به عنوان یک طراح نیست. تایپوگرافی پاسخگو نیز در مورد احترام به دستگاه و اتصال شبکه کاربر است. نتیجه نهایی طرحی است که بدون توجه به اینکه چگونه دیده می شود، احساس درستی می کند.

اکنون که بر متن واکنش گرا مسلط شده اید، زمان آن رسیده است که به سراغ تصاویر واکنش گرا بروید.

درک خود را بررسی کنید

دانش خود را در تایپوگرافی آزمایش کنید

برای بسته بندی متن در نمای درگاه، باید سبک ها اضافه شوند.

درست است، واقعی
اضافه کردن سبک ها ضروری نیست.
نادرست
متن به طور پیش‌فرض بدون هیچ گونه سبک اضافی بسته می‌شود.

clamp() برای تایپوگرافی سیال مفید است زیرا

این امکان جاسازی آسان توابع calc() را فراهم می کند
در حالی که این درست است، دلیل خوبی برای استفاده از clamp() برای تایپوگرافی نیست.
پشتیبانی مرورگر از آن عالی است.
در حالی که این درست است، دلیل خوبی برای استفاده از clamp() برای تایپوگرافی نیست.
این اجازه می دهد تا اندازه فونت را بین حداقل ها و حداکثرهای معقول قفل کنید در حالی که یک مقدار متوسط ​​مقیاس پذیر را نیز ارائه می دهد.
دقیقاً از متن بسیار کوچک یا بیش از حد بزرگ جلوگیری کنید، در حالی که اندازه فونت را با مقیاس بندی صاف نیز ارائه دهید.
ریاضی را آسان می کند.
دوباره امتحان کنید.

کدام نوع از مقادیر line-height در این راهنما توصیه شده است؟

24px
پست به صراحت می گوید از مقادیر پیکسل برای line-height استفاده نکنید.
2rem
در حالی که رم ها مقادیر نسبی هستند، اما همچنان می توانند ارتفاع خط های خیلی کوچک یا خیلی بزرگ ایجاد کنند.
1.5
مقادیر نسبی بدون واحد توصیه می شود.
2vw
واحدهای Viewport به عنوان line-height مشکل ساز هستند.

font-display چه کاری انجام می دهد؟

به مرورگر می گوید که چگونه تغییر از فونت سیستمی به فونت وب را مدیریت کند.
به انتقال به یک فونت سفارشی کمک می کند.
اجازه می دهد تا فونت را برای block یا inline-block خطی تنظیم کنید.
فونت ها انواع نمایشگر ندارند.
در صورت مخفی بودن یا نبودن فونت تغییر می کند.
فونت ها را نمی توان پنهان کرد.
کنترل زمان‌بندی تجربه کاربر از بارگیری فونت‌های راه دور را فراهم می‌کند.
به نویسندگان کمک می کند تا تجربه بارگیری فونت های سفارشی را تنظیم کنند.