تایپوگرافی

اگر هیچ سبکی برای متن خود مشخص نکنید، مرورگرها سبک‌های پیش‌فرض خود را اعمال می‌کنند. این سبک‌ها، سبک‌های عامل کاربر (User Agent Stylesheets ) نامیده می‌شوند و ممکن است از مرورگری به مرورگر دیگر متفاوت باشند. کاربران می‌توانند تنظیمات دلخواه خود را برای نمایش متن نیز تنظیم کنند.

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

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

اندازه متن

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

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

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

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

شما می‌توانید از کوئری‌های رسانه‌ای برای تغییر ویژگی 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 مخفف "عرض نمایشگر" است. اتصال اندازه فونت به عرض نمایشگر به این معنی است که متن متناسب با عرض مرورگر بزرگ و کوچک می‌شود. این امر پیش‌بینی اندازه متن در هر عرض خاص را دشوار می‌کند، اما می‌دانید که اندازه متن برای عرض مرورگر کاربر مناسب خواهد بود.

مهم است که از 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 نخواهد بود.

طول خط

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

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

هر چیزی بین ۴۵ تا ۷۵ کاراکتر به طور گسترده به عنوان طول خط رضایت‌بخش برای یک صفحه تک ستونی در یک صفحه متن سریف شده در اندازه متن در نظر گرفته می‌شود. خط ۶۶ کاراکتری (با احتساب حروف و فاصله‌ها) به طور گسترده ایده‌آل در نظر گرفته می‌شود. برای کار چند ستونی، میانگین بهتر ۴۰ تا ۵۰ کاراکتر است.

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

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

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

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

ارتفاع خط

اگرچه در 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 را نیز اضافه کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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