تایپوگرافی

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

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

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

اندازه متن

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

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

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

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

با بزرگتر شدن اندازه صفحه می توانید از پرس و جوهای رسانه ای برای تغییر ویژگی 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;
}

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

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

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

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

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

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

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

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