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

CSS ابزارهای مختلفی برای کنترل ظاهر متن در اختیار ما قرار می‌دهد. با استفاده از ویژگی‌هایی مانند font-family، font-size، font-weight، font-style، line-height، text-align، text-decoration و letter-spacing می‌توانیم ظاهر نوشته‌ها را دقیق‌تر کنترل کنیم. در این مقاله این ویژگی‌ها را از پایه یاد می‌گیریم و در پایان یک بخش متنی واقعی برای یک صفحه وب طراحی می‌کنیم.

چرا فونت و متن در طراحی وب مهم است؟

فرض کنید دو سایت دقیقاً محتوای یکسانی دارند.

در سایت اول:

• فونت نامناسب است.

• عنوان‌ها بیش از حد بزرگ هستند.

• متن‌ها به هم چسبیده‌اند.

• فاصله خطوط کم است.

• متن‌ها به‌درستی تراز نشده‌اند.

در سایت دوم:

• فونت مناسب انتخاب شده است.

• اندازه عنوان‌ها متعادل است.

• متن خوانا است.

• فاصله خطوط مناسب است.

• ساختار نوشته‌ها واضح است.

حتی اگر HTML هر دو سایت تقریباً یکسان باشد، سایت دوم حرفه‌ای‌تر به نظر می‌رسد.

بنابراین در CSS فقط رنگ و اندازه جعبه‌ها مهم نیست؛ Typography یا تایپوگرافی نیز بخش مهمی از طراحی رابط کاربری است.

تعیین نوع فونت با font-family

اولین ویژگی مهم:

font-family

است.

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

مثال:

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

در این مثال:

Arial

فونت اصلی است و:

sans-serif

فونت جایگزین محسوب می‌شود.

چرا باید فونت جایگزین داشته باشیم؟

فرض کنید بنویسیم:

body {
    font-family: "My Font";
}

اگر این فونت روی سیستم کاربر وجود نداشته باشد و به روش دیگری نیز در صفحه بارگذاری نشده باشد، مرورگر باید از فونت دیگری استفاده کند.

به همین دلیل بهتر است یک fallback مشخص کنیم:

body {
    font-family: "My Font", Arial, sans-serif;
}

یعنی:

اول My Font
اگر موجود نبود → Arial
اگر Arial هم مناسب نبود → یک فونت sans-serif

این روش مخصوصاً زمانی مهم است که با فونت‌های سفارشی کار می‌کنیم.

خانواده‌های عمومی فونت

CSS چند خانواده عمومی یا Generic Font Family نیز دارد.

serif

فونت‌هایی با زوائد و جزئیات بیشتر در انتهای حروف.

body {
    font-family: serif;
}

sans-serif

فونت‌های بدون زوائد.

body {
    font-family: sans-serif;
}

این خانواده برای بسیاری از رابط‌های کاربری مدرن انتخاب رایجی است.

monospace

در این خانواده، حروف معمولاً فضای یکسانی اشغال می‌کنند.

code {
    font-family: monospace;
}

برای نمایش کدها بسیار کاربردی است.

فونت فارسی در وب

در سایت‌های فارسی، انتخاب فونت اهمیت بیشتری پیدا می‌کند؛ زیرا همه فونت‌ها برای حروف فارسی مناسب نیستند.

مثلاً می‌توان از یک فونت فارسی که برای رابط کاربری طراحی شده استفاده کرد:

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

اما صرفاً نوشتن نام فونت کافی نیست. فونت باید برای مرورگر کاربر قابل دسترسی باشد.

در مقاله‌های بعدی، هنگام بررسی فونت‌های فارسی در وب به‌صورت کامل‌تر با روش‌هایی مانند @font-face و بارگذاری فونت سفارشی آشنا خواهیم شد. MDN نیز Web Fonts و @font-face را به عنوان روش استفاده از فونت‌های سفارشی در وب معرفی می‌کند.

تغییر اندازه متن با font-size

ویژگی:

font-size

اندازه فونت را تعیین می‌کند.

مثال:

p {
    font-size: 18px;
}

یا:

h1 {
    font-size: 40px;
}

در اینجا اندازه عنوان ۴۰ پیکسل و اندازه متن پاراگراف ۱۸ پیکسل است.

استفاده از واحد px

یکی از ساده‌ترین روش‌ها استفاده از پیکسل است:

h1 {
    font-size: 40px;
}

p {
    font-size: 18px;
}

برای شروع یادگیری CSS، px بسیار ساده و قابل فهم است.

در مقالات بعدی که به واحدهای اندازه‌گیری CSS می‌رسیم، با rem، em، درصد و واحدهای دیگر بیشتر آشنا خواهیم شد.

اندازه‌های مختلف برای بخش‌های مختلف

معمولاً همه متن‌های سایت نباید یک اندازه باشند.

مثلاً:

h1 {
    font-size: 42px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

به این ترتیب سلسله‌مراتب بصری ایجاد می‌شود.

کاربر با نگاه کردن به صفحه متوجه می‌شود:

عنوان اصلی
    ↓
عنوان بخش
    ↓
عنوان فرعی
    ↓
متن معمولی

این موضوع در طراحی صفحات وب بسیار مهم است.

ضخامت متن با font-weight

برای کنترل ضخامت فونت از:

font-weight

استفاده می‌کنیم.

مثال:

h1 {
    font-weight: bold;
}

یا:

p {
    font-weight: normal;
}

می‌توان از مقادیر عددی نیز استفاده کرد:

font-weight: 400;

یا:

font-weight: 700;

به صورت ساده می‌توان این مقادیر را چنین در نظر گرفت:

400 → معمولی
700 → ضخیم

البته پشتیبانی از وزن‌های مختلف به خود فونت نیز بستگی دارد.

وزن‌های مختلف

برای مثال:

.title {
    font-weight: 700;
}

.subtitle {
    font-weight: 500;
}

.description {
    font-weight: 400;
}

در اینجا سه سطح متفاوت از وزن متن داریم.

این روش برای ایجاد سلسله‌مراتب در طراحی بسیار مفید است.

حالت متن با font-style

ویژگی:

font-style

برای تعیین حالت متن استفاده می‌شود.

مثلاً:

p {
    font-style: normal;
}

یا:

p {
    font-style: italic;
}

حالت italic متن را به شکل مورب نمایش می‌دهد.

مثال:

<p class="note">
    این یک متن مهم است.
</p>

.note {
    font-style: italic;
}

تراز متن با text-align

برای تعیین تراز افقی متن از:

text-align

استفاده می‌کنیم. این ویژگی تراز محتوای inline داخل یک عنصر block یا سلول جدول را کنترل می‌کند.

مقادیر رایج:

text-align: right;

text-align: left;

text-align: center;

text-align: justify;

متن راست‌چین

برای یک صفحه فارسی:

p {
    text-align: right;
}

متن وسط‌چین

برای عنوان:

h1 {
    text-align: center;
}

متن چپ‌چین

p {
    text-align: left;
}

متن Justify

با:

p {
    text-align: justify;
}

فضای بین کلمات در خطوط افزایش پیدا می‌کند تا متن در دو طرف محدوده خود تراز شود.

در متن‌های فارسی باید نتیجه نهایی را روی صفحه واقعی بررسی کنید؛ چون همیشه Justify بهترین انتخاب برای تمام بخش‌های رابط کاربری نیست.

فاصله بین خطوط با line-height

یکی از مهم‌ترین ویژگی‌ها برای خوانایی متن:

line-height

است.

این ویژگی ارتفاع خط متن را کنترل می‌کند.

مثال:

p {
    line-height: 1.8;
}

یعنی فاصله عمودی خطوط نسبت به اندازه فونت افزایش پیدا می‌کند.

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

مقایسه فاصله خطوط

مثلاً:

p {
    line-height: 1;
}

ممکن است متن فشرده به نظر برسد.

در مقابل:

p {
    line-height: 2;
}

فاصله خطوط بسیار بیشتر می‌شود.

یک مقدار میانی مانند:

p {
    line-height: 1.7;
}

می‌تواند برای متن‌های فارسی انتخاب مناسبی باشد؛ البته مقدار نهایی به فونت و طراحی صفحه بستگی دارد.

فاصله بین حروف با letter-spacing

برای کنترل فاصله بین حروف از:

letter-spacing

استفاده می‌کنیم.

مثال:

h1 {
    letter-spacing: 1px;
}

یا:

.title {
    letter-spacing: 2px;
}

این ویژگی بیشتر در بعضی عنوان‌ها و طراحی‌های خاص کاربرد دارد.

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

فاصله بین کلمات با word-spacing

ویژگی:

word-spacing

برای کنترل فاصله بین کلمات استفاده می‌شود.

مثال:

p {
    word-spacing: 4px;
}

این ویژگی در بعضی طراحی‌ها مفید است، اما مانند letter-spacing بهتر است با احتیاط استفاده شود.

تزئین متن با text-decoration

برای اضافه کردن یا حذف تزئینات متن از:

text-decoration

استفاده می‌کنیم.

مثلاً:

a {
    text-decoration: none;
}

این کد خط زیر لینک را حذف می‌کند.

یا:

a {
    text-decoration: underline;
}

خط زیر متن را فعال می‌کند.

مقادیر دیگری نیز وجود دارند، اما در این مرحله همین دو مورد مهم‌تر هستند.

چرا حذف underline لینک همیشه مناسب نیست؟

ممکن است در طراحی خود بنویسید:

a {
    text-decoration: none;
}

ظاهر لینک تمیزتر می‌شود، اما کاربر ممکن است دیگر متوجه نشود که متن قابل کلیک است.

بنابراین اگر underline را حذف می‌کنید، بهتر است با روش‌های دیگری مانند رنگ، تغییر ظاهر هنگام Hover یا طراحی دکمه‌ای، قابل کلیک بودن عنصر را برای کاربر مشخص کنید.

در مقالات آینده که به Pseudo-Classها می‌رسیم، حالت‌هایی مانند :hover را دقیق‌تر بررسی خواهیم کرد.

تغییر حالت حروف با text-transform

ویژگی:

text-transform

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

مثلاً:

.title {
    text-transform: uppercase;
}

می‌تواند حروف انگلیسی را به حالت بزرگ تبدیل کند.

مقادیر رایج:

uppercase

lowercase

capitalize

در زبان فارسی تأثیر این ویژگی مانند زبان انگلیسی نیست، زیرا مفهوم حروف بزرگ و کوچک در فارسی وجود ندارد.

سایه متن با text-shadow

CSS امکان ایجاد سایه برای متن را نیز فراهم می‌کند:

h1 {
    text-shadow: 2px 2px 4px gray;
}

ساختار ساده آن:

offset-x
offset-y
blur
color

است.

مثال:

h1 {
    text-shadow: 2px 2px 5px #000;
}

این ویژگی در طراحی عنوان‌ها و بعضی Hero Sectionها کاربرد دارد.

با این حال استفاده بیش از حد از Shadow می‌تواند ظاهر قدیمی و شلوغ ایجاد کند؛ بنابراین بهتر است در طراحی مدرن با احتیاط استفاده شود.

ترکیب ویژگی‌های متن

قدرت CSS زمانی بهتر مشخص می‌شود که چند ویژگی را با هم استفاده کنیم.

مثلاً:

h1 {
    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #222;
}

در این مثال:

font-family
→ نوع فونت

font-size
→ اندازه

font-weight
→ ضخامت

line-height
→ ارتفاع خطوط

text-align
→ تراز

color
→ رنگ

را کنترل کرده‌ایم.

ویژگی کوتاه‌شده font

CSS یک ویژگی کوتاه‌شده به نام:

font

نیز دارد که می‌تواند چند ویژگی فونت را در یک declaration مشخص کند. در این shorthand، font-size و font-family الزامی هستند و line-height در صورت استفاده باید بعد از اندازه فونت و با / قرار بگیرد.

مثال:

p {
    font: 18px/1.8 Arial, sans-serif;
}

این کد به صورت مفهومی مشابه تنظیم:

p {
    font-size: 18px;
    line-height: 1.8;
    font-family: Arial, sans-serif;
}

است.

در ابتدای یادگیری بهتر است ویژگی‌ها را جداگانه بنویسید تا نقش هرکدام را به‌خوبی یاد بگیرید.

یک نکته مهم درباره ترتیب font

در shorthand پیچیده‌تر می‌توان نوشت:

p {
    font: italic bold 18px/1.8 Arial, sans-serif;
}

یعنی:

italic
→ حالت فونت

bold
→ ضخامت

18px
→ اندازه

1.8
→ ارتفاع خطوط

Arial, sans-serif
→ خانواده فونت

ترتیب این مقادیر اهمیت دارد. بنابراین تا زمانی که کاملاً با shorthand آشنا نشده‌اید، استفاده از ویژگی‌های جداگانه خواناتر و قابل فهم‌تر است.

طراحی متن برای یک صفحه فارسی

حالا یک ساختار ساده ایجاد کنیم:

<section class="content">
    <h1>یادگیری طراحی وب</h1>

    <h2>چرا CSS یاد بگیریم؟</h2>

    <p>
        CSS به ما کمک می‌کند ظاهر صفحات وب را کنترل کنیم
        و رابط‌های کاربری زیباتر و خواناتری ایجاد کنیم.
    </p>

    <p>
        با یادگیری CSS می‌توانید رنگ‌ها، فونت‌ها،
        فاصله‌ها و ساختار ظاهری عناصر صفحه را کنترل کنید.
    </p>
</section>

حالا CSS:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

.content {
    max-width: 800px;
    margin: 0 auto;
}

.content h1 {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    color: #222;
}

.content h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
}

.content p {
    font-size: 17px;
    line-height: 1.9;
    text-align: right;
}

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

چرا line-height برای فارسی اهمیت زیادی دارد؟

در زبان فارسی، شکل حروف و اتصال آن‌ها باعث می‌شود فاصله خطوط روی خوانایی تأثیر زیادی داشته باشد.

برای مثال:

p {
    line-height: 1;
}

ممکن است متن فشرده و خسته‌کننده باشد.

اما:

p {
    line-height: 1.8;
}

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

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

فونت و وراثت

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

برای مثال:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

باعث می‌شود بسیاری از عناصر داخل body همین تنظیمات را به ارث ببرند؛ مگر اینکه خودشان مقدار دیگری داشته باشند.

این ویژگی باعث می‌شود لازم نباشد فونت را برای تک‌تک عناصر صفحه تعریف کنیم.

برای مثال:

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

h1 {
    font-size: 40px;
}

p {
    font-size: 18px;
}

در اینجا هر دو h1 و p از فونت تعریف‌شده برای body استفاده می‌کنند، ولی اندازه مخصوص خودشان را دارند.

یک پروژه کوچک: کارت آموزشی

حالا یک کارت کامل طراحی کنیم.

HTML

<div class="course-card">

    <h2>آموزش CSS</h2>

    <p class="description">
        در این دوره با اصول طراحی صفحات وب
        و CSS از پایه آشنا می‌شوید.
    </p>

    <a href="#" class="course-link">
        مشاهده دوره
    </a>

</div>

CSS

.course-card {
    width: 350px;
    padding: 30px;

    background-color: #f5f5f5;

    font-family: Arial, sans-serif;

    text-align: right;
}

.course-card h2 {
    margin-top: 0;

    color: #222;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.5;
}

.course-card .description {
    color: #555;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.9;

    word-spacing: 2px;
}

.course-link {
    color: #e65c00;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
}

در این مثال بسیاری از ویژگی‌هایی که یاد گرفتیم در کنار هم قرار گرفته‌اند.

اشتباهات رایج در کار با فونت و متن

۱. استفاده از فونتی که در دسترس نیست

مثلاً:

body {
    font-family: MyFont;
}

اگر فونت در دسترس نباشد، نتیجه ممکن است با چیزی که انتظار دارید متفاوت باشد.

بهتر است fallback داشته باشید:

body {
    font-family: "MyFont", Arial, sans-serif;
}

۲. استفاده بیش از حد از فونت‌های مختلف

مثلاً:

h1 {
    font-family: Arial;
}

h2 {
    font-family: Georgia;
}

p {
    font-family: Verdana;
}

button {
    font-family: Tahoma;
}

این کار ممکن است صفحه را نامنظم کند.

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

۳. اندازه بسیار کوچک متن

مثلاً:

p {
    font-size: 10px;
}

ممکن است خواندن متن را سخت کند.

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

۴. line-height بسیار کم

مثلاً:

p {
    line-height: 1;
}

برای پاراگراف‌های طولانی ممکن است خوانایی مناسبی نداشته باشد.

۵. استفاده بیش از حد از letter-spacing

این کار مخصوصاً در متن فارسی می‌تواند ظاهر کلمات را غیرطبیعی کند.

۶. استفاده بیش از حد از text-shadow

سایه زیاد معمولاً باعث شلوغ شدن طراحی می‌شود.

در طراحی مدرن، معمولاً استفاده محدود و هدفمند از Shadow نتیجه بهتری دارد.

تمرین‌های این مقاله

تمرین ۱

یک صفحه بسازید و فونت کلی آن را تغییر دهید:

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

سپس چند فونت مختلف را امتحان کنید.

تمرین ۲

برای این عناصر اندازه‌های متفاوت تعیین کنید:

h1
h2
h3
p

هدف این است که سلسله‌مراتب بصری واضحی ایجاد کنید.

تمرین ۳

یک پاراگراف بلند ایجاد کنید و مقدارهای مختلف line-height را امتحان کنید:

line-height: 1;
line-height: 1.5;
line-height: 1.8;
line-height: 2;

نتیجه را با هم مقایسه کنید.

تمرین ۴

یک عنوان طراحی کنید و موارد زیر را روی آن اعمال کنید:

فونت
اندازه
وزن
رنگ
تراز
سایه

تمرین ۵

یک کارت فارسی طراحی کنید که شامل:

• عنوان

• توضیح

• لینک

باشد و برای هر بخش اندازه، وزن و فاصله خطوط مناسبی تعیین کنید.

چالش مقاله

یک بخش معرفی برای صفحه اصلی سایت طراحی کنید.

ساختار HTML:

<section class="intro">

    <h1>به وب‌سایت ما خوش آمدید</h1>

    <p>
        اینجا می‌توانید با جدیدترین آموزش‌ها
        و مطالب آموزشی آشنا شوید.
    </p>

    <a href="#">شروع کنید</a>

</section>

سپس با CSS آن را طوری طراحی کنید که:

• عنوان بزرگ و واضح باشد.

• متن توضیحی خوانا باشد.

• فاصله خطوط مناسب باشد.

• فونت مناسب استفاده شود.

• عنوان و متن تراز مناسبی داشته باشند.

• لینک ظاهر واضحی داشته باشد.

• طراحی برای زبان فارسی مناسب باشد.

سعی کنید بدون استفاده از کتابخانه یا فریم‌ورک CSS این بخش را طراحی کنید.

نکات مهم این مقاله

بعد از مطالعه این مقاله باید بتوانید:

• از font-family استفاده کنید.

• مفهوم fallback font را بدانید.

• خانواده‌های عمومی فونت را بشناسید.

• اندازه متن را با font-size تغییر دهید.

• ضخامت متن را با font-weight کنترل کنید.

• حالت متن را با font-style تغییر دهید.

• متن را با text-align تراز کنید.

• فاصله خطوط را با line-height تنظیم کنید.

• فاصله حروف را با letter-spacing کنترل کنید.

• فاصله کلمات را با word-spacing تغییر دهید.

• از text-decoration استفاده کنید.

• مفهوم text-transform را بدانید.

• برای متن سایه ایجاد کنید.

• از ویژگی کوتاه‌شده font استفاده کنید.

• فونت را برای یک صفحه فارسی به شکل مناسب تنظیم کنید.

جمع‌بندی

فونت و متن فقط بخش کوچکی از CSS به نظر می‌رسند، اما در واقع نقش بسیار مهمی در کیفیت طراحی یک وب‌سایت دارند. با font-family نوع فونت را تعیین کردیم، با font-size اندازه را تغییر دادیم و با font-weight و font-style ظاهر و ضخامت آن را کنترل کردیم.

همچنین با text-align تراز متن، با line-height فاصله خطوط، با letter-spacing فاصله حروف و با word-spacing فاصله کلمات را تنظیم کردیم. ویژگی‌هایی مانند text-decoration، text-transform و text-shadow نیز ابزارهای بیشتری برای کنترل ظاهر متن در اختیار ما قرار می‌دهند.

در طراحی سایت فارسی، انتخاب فونت مناسب و تنظیم صحیح فاصله خطوط اهمیت ویژه‌ای دارد. در ادامه دوره، زمانی که به مبحث واحدهای اندازه‌گیری و سپس فونت‌های فارسی و Web Fonts برسیم، می‌توانیم این موضوع را حرفه‌ای‌تر دنبال کنیم.