رنگ و تایپوگرافی

بیشتر حس بصری یک صفحه از دو چیز می‌آید: رنگ و حروف. دو صفحه با یک محتوا می‌توانند یکی حرفه‌ای به نظر برسند و یکی بی‌روح، فقط به خاطر انتخاب رنگ و تایپوگرافی (Typography). در این درس ابزارهای CSS برای هر دو را می‌آموزید؛ همین چند ویژگی ساده، بیشترین تأثیر را در پروژه‌های واقعی شما خواهند داشت.

تعیین رنگ: چهار روش

ویژگی color رنگ متن را تعیین می‌کند و background-color رنگ پس‌زمینه را. CSS چند روش برای نوشتن رنگ می‌دهد:

h1 {
  color: steelblue; /* named color */
}

h2 {
  color: #4682b4; /* hex: red, green, blue in base 16 */
}

button {
  color: rgb(70 130 180); /* the same color with numeric parts */
}

blockquote {
  color: hsl(207 44% 49%); /* hue, saturation, lightness */
}

روش نام، بیش از ۱۴۰ رنگ آماده دارد و برای تمرین راحت است. روش hex رایج‌ترین فرمت در طراحی‌هاست؛ هر جفت رقم یکی از سه جزء قرمز و سبز و آبی است. روش rgb() همان سه جزء را با عدد صریح می‌دهد و hsl() رنگ را با «فام» (Hue)، اشباع و روشنایی توصیف می‌کند؛ برای ساختن پالت سودمند است، چون با ثابت نگه داشتن فام و تغییر روشنایی، سایه‌های هم‌خانوادهٔ یک رنگ به دست می‌آید.

شفافیت را با افزودن یک جزء چهارم به‌شکل درصد می‌گیرید:

.overlay {
  background: rgb(0 0 0 / 40%); /* black with 40% transparency */
}

ویژگی opacity هم کل عنصر را شفاف می‌کند؛ اما فرق مهمی دارد: این ویژگی متن و فرزندان را هم شفاف می‌کند، در حالی که جزء آلفا فقط روی همان رنگ اثر می‌گذارد.

فونت: font-family و استک

ویژگی font-family فونت متن را تعیین می‌کند. نکتهٔ کلیدی این است که هیچ‌گاه نمی‌توانید مطمئن باشید فونت دلخواه روی دستگاه کاربر نصب است؛ برای همین یک استک (Stack) می‌نویسید: فهرستی از فونت‌های جایگزین که از چپ به راست امتحان می‌شوند و آخرشان همیشه یک نام خانوادگی عمومی می‌آید:

body {
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
}

code {
  font-family: "JetBrains Mono", Consolas, monospace;
}

نام فونت‌های چندکلمه‌ای را در گیومه بگذارید. سه نام خانوادگی عمومی همیشه کار می‌کنند: serif با ته‌خط، sans-serif بدون ته‌خط و monospace با عرض ثابت برای کد. فونت مشخصی مثل وزیرمتن را می‌توانید با قاعدهٔ @font-face یا سرویس‌های فونت به صفحه بیاورید؛ در آن حالت هم استک جایگزین را نگه دارید.

اندازه: px و rem و em

واحد اندازهٔ متن را با دقت انتخاب کنید. واحد px پیکسل مطلق است و ساده به نظر می‌رسد، اما واحدهای نسبی با خواست کاربر بزرگ‌نمایی متن هم بالا و پایین می‌شوند و به دسترسی‌پذیری (Accessibility) کمک می‌کنند:

html {
  font-size: 100%; /* the browser base size; usually 16px */
}

h1 {
  font-size: 2.5rem; /* 2.5 times the root size: 40px */
}

p {
  font-size: 1rem; /* same as the base: 16px */
}

small {
  font-size: 0.8em; /* relative to its own parent font */
}

واحد rem نسبت به اندازهٔ فونت عنصر ریشه است و em نسبت به اندازهٔ فونت والد خودِ عنصر. توصیهٔ عملی: اندازهٔ متن‌ها را با rem بنویسید تا کل صفحه یک‌جا با تغییر اندازهٔ پایه مقیاس شود.

وزن، فاصلهٔ سطر و بقیهٔ جعبه‌ابزار متن

بقیهٔ ویژگی‌های پرکاربرد متن را در یک مثال جمع می‌کنیم:

article {
  font-weight: 400;        /* 400 normal, 700 bold */
  line-height: 1.8;        /* line spacing: 1.8 times the font size */
  text-align: justify;     /* text alignment */
  text-decoration: none;   /* removes underline and line-through */
}

article h2 {
  font-weight: 700;
}

مقدار line-height را بدون واحد بنویسید؛ عدد ۱.۸ یعنی فاصلهٔ سطر ۱.۸ برابر اندازهٔ فونت همان عنصر و با تغییر فونت، نسبت حفظ می‌شود. برای متن فارسیِ چندخطی، مقدارهای حدود ۱.۷ تا ۲ خوانایی را محسوس بالا می‌برند. ویژگی text-decoration را هم با یاد داشته باشید: با مقدار none می‌توانید زیرخط پیش‌فرض پیوندها را در منوها بردارید؛ کاری که در درس انتخاب‌گرها دیدید.

تمرین‌ها

/* Write your code here */

article {
  color: hsl(220 30% 20%);
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}

:::

خلاصه

• رنگ را با نام، hex، rgb() یا hsl() بنویسید؛ hsl() برای ساختن پالت خانوادگی بهتر است.
• شفافیت رنگ را با جزء آلفا بگیرید و فرقش را با opacity بدانید که کل عنصر را شفاف می‌کند.
• font-family همیشه استک با جایگزین عمومی می‌خواهد؛ فونت نصب‌نشده رها نمی‌کند.
• اندازهٔ متن را با rem بنویسید تا با اندازهٔ پایهٔ مرورگر یک‌جا مقیاس شود.
• line-height بدون واحد و حدود ۱.۷ تا ۲ برای متن فارسی، خوانایی را به‌طور محسوس بالا می‌برد.

رنگ و متن را دارید؛ در درس بعدی به بزرگ‌ترین معمای مبتدی‌ها می‌پردازیم: چیدمان عنصرها کنار هم با فلکس‌باکس.