استفاده از فونت‌های فارسی در وب

بهنام نوبخت · ۱۴۰۵/۶/۲۸

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

از طرف دیگر، استفاده صحیح از فونت در وب فقط به نوشتن font-family محدود نمی‌شود. اگر بخواهیم یک فونت فارسی اختصاصی را در پروژه استفاده کنیم، باید با @font-face، فرمت فونت، وزن‌های مختلف، font-display، Fallback Font، اندازه متن، line-height و عملکرد بارگذاری فونت آشنا باشیم.

در این مقاله یاد می‌گیریم چگونه یک سیستم Typography مناسب برای یک وب‌سایت فارسی ایجاد کنیم و فونت‌هایی مانند Vazirmatn یا سایر فونت‌های فارسی را به شکل اصولی در پروژه استفاده کنیم.

فونت در وب چیست؟

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

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

مثلاً:

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

در این مثال ابتدا مرورگر Arial را بررسی می‌کند و اگر در دسترس نباشد، از sans-serif استفاده می‌کند.

ویژگی font-family در واقع یک فهرست اولویت‌بندی‌شده از فونت‌ها است و مرورگر از گزینه مناسب موجود استفاده می‌کند.

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

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

برای مثال، این دو متن را تصور کنید:

بنو سرویس

و:

Beno Service

حتی اگر هر دو از نظر اندازه یکسان باشند، انتخاب فونت روی ظاهر و خوانایی آن‌ها تأثیر متفاوتی خواهد داشت.

در یک سایت فارسی معمولاً باید به موارد زیر توجه کنیم:

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

فونت‌ها در فرمت‌های مختلفی ارائه می‌شوند.

برخی فرمت‌های رایج عبارت‌اند از:

WOFF
WOFF2
TTF
OTF

در پروژه‌های وب مدرن، WOFF2 معمولاً انتخاب بسیار مناسبی است؛ زیرا برای استفاده وب طراحی شده و حجم مناسبی دارد.

به عنوان یک قاعده عملی، اگر فونت موردنظر شما نسخه WOFF2 دارد، معمولاً بهتر است از آن استفاده کنید.

WOFF چیست؟

WOFF مخفف:

Web Open Font Format

است.

این فرمت برای استفاده از فونت در وب ایجاد شده است.

نسخه جدیدتر آن:

WOFF2

است که در پروژه‌های جدید معمولاً انتخاب مناسبی محسوب می‌شود.

فونت فارسی مناسب را چگونه انتخاب کنیم؟

قبل از اینکه فونت را به پروژه اضافه کنیم، باید آن را انتخاب کنیم.

برای انتخاب فونت فارسی به موارد زیر توجه کنید:

۱. خوانایی

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

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

بهتر است فونت وزن‌های مختلف داشته باشد، مثلاً:

البته لازم نیست تمام وزن‌ها را در پروژه بارگذاری کنیم.

۳. پشتیبانی مناسب از فارسی

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

۴. حجم فایل

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

۵. مجوز استفاده

همیشه باید مجوز فونت را بررسی کنیم و مطمئن شویم استفاده از آن در پروژه مجاز است.

فونت‌های فارسی معروف

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

برای مثال:

Vazirmatn
IRANSansX
Shabnam
Sahel
Estedad
Yekan

هر فونت ویژگی‌ها و مجوز خاص خودش را دارد.

در این مقاله برای مثال‌ها از یک فونت فرضی با نام BenoFont استفاده می‌کنیم تا ساختار یادگیری به یک فونت خاص وابسته نباشد.

استفاده از فونت سیستم

ساده‌ترین روش این است که از فونت‌های موجود روی سیستم استفاده کنیم.

مثلاً:

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

اما این روش یک مشکل دارد.

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

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

Fallback Font چیست؟

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

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

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

اگر موجود نبود، سراغ:

Tahoma

می‌رود.

اگر آن هم موجود نبود:

Arial

و در نهایت:

sans-serif

استفاده می‌شود.

وجود یک Fallback مناسب مهم است، زیرا تضمینی وجود ندارد که تمام کاربران فونت خاصی را روی سیستم خود داشته باشند.

`font-face` چیست؟

اگر بخواهیم فونت خودمان را در پروژه بارگذاری کنیم، از:

@font-face

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

font-face به CSS اجازه می‌دهد یک فونت سفارشی را از فایل محلی یا منبع قابل دسترس برای مرورگر تعریف کند.

ساختار ساده:

@font-face {
    font-family: "BenoFont";

    src:
        url("/fonts/BenoFont-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;
}

سپس:

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

ساختار پروژه برای فونت

فرض کنید پروژه ما این ساختار را دارد:

project/
│
├── index.html
│
├── css/
│   └── style.css
│
├── fonts/
│   ├── BenoFont-Regular.woff2
│   ├── BenoFont-Medium.woff2
│   └── BenoFont-Bold.woff2
│
└── images/

در فایل CSS:

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;
}

چرا مسیر فایل مهم است؟

فرض کنید style.css در:

css/style.css

باشد و فونت در:

fonts/font.woff2

قرار داشته باشد.

مسیر صحیح از CSS:

url("../fonts/font.woff2")

است.

اما اگر CSS و فونت در یک پوشه باشند:

assets/
├── style.css
└── font.woff2

می‌توانیم بنویسیم:

url("font.woff2")

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

تعریف وزن Regular

فرض کنید فایل فونت معمولی ما:

BenoFont-Regular.woff2

است.

می‌توانیم بنویسیم:

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

سپس:

body {
    font-family:
        "BenoFont",
        sans-serif;

    font-weight: 400;
}

تعریف وزن Medium

اگر فایل Medium داشته باشیم:

BenoFont-Medium.woff2

می‌توانیم تعریف کنیم:

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Medium.woff2")
        format("woff2");

    font-weight: 500;
    font-style: normal;

    font-display: swap;
}

دقت کنید که نام font-family همان نام قبلی است:

"BenoFont"

تفاوت اصلی در:

font-weight: 500;

است.

تعریف وزن Bold

برای Bold:

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Bold.woff2")
        format("woff2");

    font-weight: 700;
    font-style: normal;

    font-display: swap;
}

حالا مرورگر می‌داند که برای font-weight: 700 باید از فایل Bold استفاده کند.

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

استفاده از چند وزن

حالا می‌توانیم سه وزن داشته باشیم:

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Medium.woff2")
        format("woff2");

    font-weight: 500;
    font-style: normal;

    font-display: swap;
}

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Bold.woff2")
        format("woff2");

    font-weight: 700;
    font-style: normal;

    font-display: swap;
}

سپس:

body {
    font-family: "BenoFont", sans-serif;
    font-weight: 400;
}

h1,
h2,
h3 {
    font-weight: 700;
}

.button {
    font-weight: 500;
}

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

چرا نباید همه وزن‌ها را بارگذاری کنیم؟

فرض کنید فونت شما دارای:

باشد.

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

اگر واقعاً فقط از:

400
500
700

استفاده می‌کنیم، بهتر است فقط همان وزن‌ها را وارد پروژه کنیم.

در پروژه‌های واقعی، مدیریت منابع فونت بخشی از بهینه‌سازی عملکرد سایت است. حتی در برخی شرایط می‌توان با Subset کردن فونت یا unicode-range فقط بخش موردنیاز کاراکترها را بارگذاری کرد.

`font-display` چیست؟

وقتی مرورگر باید یک فونت وب را دانلود کند، ممکن است دانلود آن کمی زمان ببرد.

font-display مشخص می‌کند متن در هنگام بارگذاری فونت چگونه نمایش داده شود.

مثلاً:

@font-face {
    font-family: "BenoFont";

    src:
        url("../fonts/BenoFont-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

یکی از مقادیر رایج:

font-display: swap;

است.

`font-display: swap`

وقتی از:

font-display: swap;

استفاده می‌کنیم، مرورگر اجازه دارد ابتدا متن را با فونت جایگزین نمایش دهد و پس از آماده شدن فونت اصلی، آن را جایگزین کند.

برای بسیاری از وب‌سایت‌ها این رفتار انتخاب مناسبی است؛ زیرا کاربر نباید مدت زیادی بدون متن قابل مشاهده منتظر بماند.

سایر مقادیر `font-display`

مقادیر اصلی عبارت‌اند از:

auto
block
swap
fallback
optional

هرکدام رفتار متفاوتی برای دوره بارگذاری فونت دارند.

در پروژه‌های معمول وب، swap یکی از گزینه‌های رایج و قابل فهم است.

فونت و `line-height`

یکی از مهم‌ترین نکات Typography فارسی، فاصله خطوط است.

مثلاً:

body {
    font-size: 16px;
    line-height: 1.8;
}

برای پاراگراف‌های فارسی، Line Height مناسب اهمیت زیادی دارد.

مثلاً:

p {
    line-height: 2;
}

ممکن است برای یک متن فارسی طولانی خوانایی مناسبی ایجاد کند.

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

یک اشتباه رایج

گاهی می‌بینیم:

p {
    line-height: 1;
}

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

نتیجه:

خط اول
خط دوم
خط سوم

بیش از حد به هم نزدیک می‌شوند.

برای متن‌های طولانی بهتر است Line Height را با تست واقعی محتوا تنظیم کنیم.

فونت و `font-size`

مثلاً:

body {
    font-size: 16px;
}

و:

h1 {
    font-size: 48px;
}

اما در طراحی Responsive بهتر است اندازه تیترها را نیز منعطف کنیم.

مثلاً:

h1 {
    font-size:
        clamp(2rem, 5vw, 4rem);
}

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

فونت و `font-weight`

وزن فونت با:

font-weight

کنترل می‌شود.

مثلاً:

.title {
    font-weight: 700;
}

مقادیر عددی رایج:

هستند، اما اینکه کدام وزن واقعاً در دسترس باشد به Font Family بستگی دارد.

`font-weight: bold` یا `700`؟

هر دو می‌توانند برای درخواست یک وزن ضخیم استفاده شوند:

font-weight: bold;

یا:

font-weight: 700;

در طراحی سیستماتیک بهتر است وزن‌های مورد استفاده را مشخص کنیم:

:root {
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

سپس:

body {
    font-weight: var(--font-weight-regular);
}

h1,
h2,
h3 {
    font-weight: var(--font-weight-bold);
}

ایجاد سیستم Typography

به جای اینکه در هر قسمت پروژه مقادیر تصادفی بنویسیم، بهتر است یک سیستم Typography داشته باشیم.

مثلاً:

:root {
    --font-body: "BenoFont", sans-serif;

    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

سپس:

body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

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

فونت فارسی در پروژه بنو سرویس

فرض کنیم ساختار پروژه ما این باشد:

benoservice/
│
├── index.html
│
├── css/
│   └── style.css
│
├── fonts/
│   ├── Vazirmatn-Regular.woff2
│   ├── Vazirmatn-Medium.woff2
│   └── Vazirmatn-Bold.woff2
│
└── images/

در style.css:

@font-face {
    font-family: "Vazirmatn";

    src:
        url("../fonts/Vazirmatn-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";

    src:
        url("../fonts/Vazirmatn-Medium.woff2")
        format("woff2");

    font-weight: 500;
    font-style: normal;

    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";

    src:
        url("../fonts/Vazirmatn-Bold.woff2")
        format("woff2");

    font-weight: 700;
    font-style: normal;

    font-display: swap;
}

و سپس:

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

    font-weight: 400;

    line-height: 1.8;
}

طراحی Typography برای بنو سرویس

می‌توانیم یک سیستم ساده ایجاد کنیم:

:root {
    --font-family:
        "Vazirmatn",
        sans-serif;

    --font-size-body: 1rem;
    --font-size-small: 0.875rem;

    --font-size-h1:
        clamp(2.25rem, 6vw, 4.5rem);

    --font-size-h2:
        clamp(1.8rem, 4vw, 3rem);

    --font-size-h3:
        clamp(1.3rem, 3vw, 1.75rem);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

body {
    font-family: var(--font-family);

    font-size: var(--font-size-body);

    font-weight:
        var(--font-weight-regular);

    line-height: 1.8;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
}

حالا Typography پروژه ساختار مشخصی دارد.

فونت و ترکیب فارسی و انگلیسی

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

ممکن است داشته باشیم:

طراحی سایت با Next.js

یا:

ASP.NET Core API

یا:

HTML / CSS / JavaScript

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

یک Font Stack مناسب می‌تواند شامل Fallbackهای مناسب باشد:

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

فونت برای کدها

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

مثلاً:

code,
pre {
    font-family:
        "Cascadia Code",
        "Courier New",
        monospace;
}

دلیل آن این است که در فونت‌های Monospace عرض کاراکترها برای نمایش کد قابل پیش‌بینی‌تر است.

مثلاً:

<div class="container">
    <h1>Hello World</h1>
</div>

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

فونت در دکمه‌ها

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

مثلاً:

button,
input,
textarea,
select {
    font: inherit;
}

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

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

فونت و Input

مثلاً:

<input
    type="text"
    placeholder="نام خود را وارد کنید"
>

CSS:

input {
    font-family: inherit;
    font-size: inherit;
}

یا:

input,
textarea,
button,
select {
    font: inherit;
}

این روش معمولاً باعث می‌شود Typography فرم با سایت هماهنگ باشد.

آیا باید از `!important` برای فونت استفاده کنیم؟

خیر.

مثلاً این کار:

body {
    font-family: "Vazirmatn" !important;
}

راهکار مناسبی برای حل مشکل Typography نیست.

اگر فونت اعمال نمی‌شود، باید علت را بررسی کنیم:

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

اگر فونت کار نکرد، اولین کار باز کردن DevTools مرورگر است.

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

مثلاً:

Vazirmatn-Regular.woff2

اگر وضعیت فایل:

باشد، احتمالاً مسیر اشتباه است.

اگر فایل اصلاً درخواست نشده باشد، ممکن است مرورگر نیازی به آن ندیده باشد یا تعریف @font-face صحیح نباشد.

بررسی Console

اگر خطایی در بارگذاری فونت وجود داشته باشد، Console مرورگر نیز می‌تواند اطلاعات مفیدی ارائه دهد.

بنابراین وقتی فونت نمایش داده نمی‌شود، فوراً CSS را تغییر ندهید.

ابتدا بررسی کنید:

1. آیا فایل وجود دارد؟
2. آیا مسیر درست است؟
3. آیا فایل دانلود می‌شود؟
4. آیا font-family درست نوشته شده؟
5. آیا وزن درست تعریف شده؟

فونت‌های Variable

بعضی فونت‌ها Variable هستند.

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

برای مثال:

@font-face {
    font-family: "BenoVariable";

    src:
        url("../fonts/BenoVariable.woff2")
        format("woff2");

    font-weight: 100 900;
    font-style: normal;

    font-display: swap;
}

در این حالت یک فایل می‌تواند محدوده‌ای از وزن‌ها را پوشش دهد. font-weight در @font-face می‌تواند به‌صورت یک بازه نیز تعریف شود.

آیا Variable Font همیشه بهتر است؟

نه لزوماً.

باید بین موارد زیر تعادل برقرار کنیم:

تعداد فایل‌ها
حجم فایل
انعطاف‌پذیری
پشتیبانی
نیاز واقعی پروژه

اگر یک Variable Font حجم زیادی داشته باشد و پروژه فقط دو وزن نیاز داشته باشد، ممکن است چند فایل Static کوچک انتخاب مناسب‌تری باشند.

بنابراین همیشه:

جدیدتر = بهتر

نیست.

بهینه‌سازی فونت

فونت یکی از منابعی است که می‌تواند روی Performance سایت تأثیر بگذارد.

چند نکته مهم:

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

اگر فقط:

400
500
700

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

از فرمت مناسب استفاده کنید

در پروژه‌های جدید معمولاً WOFF2 انتخاب مناسبی است.

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

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

`font-display` را آگاهانه انتخاب کنید

برای مثال:

font-display: swap;

رفتار مناسبی برای بسیاری از پروژه‌ها ایجاد می‌کند.

Subset کردن فونت

فرض کنید یک Font File شامل Glyphهای زیادی باشد که پروژه شما اصلاً به آن‌ها نیاز ندارد.

می‌توان فونت را Subset کرد تا فقط مجموعه‌ای از کاراکترهای موردنیاز در فایل باقی بماند.

این موضوع می‌تواند حجم دانلود فونت را کاهش دهد.

در بعضی سناریوها نیز unicode-range به مرورگر اجازه می‌دهد فایل فونت را فقط در صورت وجود کاراکترهای مربوطه درخواست کند.

البته Subsetting باید با دقت انجام شود؛ مخصوصاً برای سایت‌هایی که محتوای کاربران یا زبان‌های مختلف دارند.

فونت و SEO

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

اما Typography مناسب روی تجربه کاربری، خوانایی و درک محتوا تأثیر دارد.

مثلاً:

فونت خوانا
+
اندازه مناسب
+
Line Height مناسب
+
Contrast مناسب
=
تجربه خواندن بهتر

بنابراین هنگام طراحی صفحات محتوایی، فونت را فقط یک عنصر تزئینی در نظر نگیرید.

اشتباهات رایج در استفاده از فونت فارسی

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

اگر یک فونت بسیار بزرگ را فقط برای یک عنوان استفاده کنیم، ممکن است ارزش آن نسبت به هزینه بارگذاری مناسب نباشد.

۲. بارگذاری تمام وزن‌ها

مثلاً:

در حالی که پروژه فقط سه وزن نیاز دارد.

۳. استفاده نکردن از Fallback

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

font-family:
    "Vazirmatn",
    sans-serif;

۴. اشتباه در مسیر فونت

مثلاً:

url("/font/Vazirmatn.woff2")

در حالی که فایل در:

/fonts/

قرار دارد.

۵. تعریف نکردن وزن صحیح

اگر فایل Bold را این‌طور تعریف کنیم:

font-weight: 400;

اما بعد انتظار داشته باشیم:

font-weight: 700;

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

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

مثلاً:

فونت A برای Header
فونت B برای Body
فونت C برای Button
فونت D برای Footer

معمولاً باعث ناهماهنگی بصری می‌شود.

در اکثر پروژه‌ها یک Font Family اصلی با چند وزن، انتخاب بسیار منطقی‌تری است.

پروژه عملی — سیستم فونت بنو سرویس

در این تمرین یک سیستم کامل Typography ایجاد می‌کنیم.

مرحله اول — فایل‌ها

ساختار:

benoservice/
│
├── css/
│   └── style.css
│
├── fonts/
│   ├── Vazirmatn-Regular.woff2
│   ├── Vazirmatn-Medium.woff2
│   └── Vazirmatn-Bold.woff2
│
└── index.html

مرحله دوم — تعریف فونت

@font-face {
    font-family: "Vazirmatn";

    src:
        url("../fonts/Vazirmatn-Regular.woff2")
        format("woff2");

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";

    src:
        url("../fonts/Vazirmatn-Medium.woff2")
        format("woff2");

    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";

    src:
        url("../fonts/Vazirmatn-Bold.woff2")
        format("woff2");

    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

مرحله سوم — Typography پایه

:root {
    --font-family:
        "Vazirmatn",
        sans-serif;

    --font-size-base: 16px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

body {
    font-family: var(--font-family);

    font-size: var(--font-size-base);

    font-weight:
        var(--font-weight-regular);

    line-height: 1.8;
}

مرحله چهارم — تیترها

h1,
h2,
h3 {
    margin-block: 0;

    font-weight:
        var(--font-weight-bold);

    line-height: 1.4;
}

h1 {
    font-size:
        clamp(2.25rem, 6vw, 4.5rem);
}

h2 {
    font-size:
        clamp(1.8rem, 4vw, 3rem);
}

h3 {
    font-size:
        clamp(1.25rem, 3vw, 1.75rem);
}

مرحله پنجم — متن

p {
    margin-block: 0;

    line-height: 2;
}

برای متن‌های طولانی می‌توانیم عرض خواندن را نیز محدود کنیم:

.article-content {
    max-inline-size: 70ch;
}

این کار باعث می‌شود خطوط بیش از حد طولانی نشوند.

ساخت یک Card با Typography مناسب

<article class="service-card">

    <span class="service-card__category">
        خدمات
    </span>

    <h3 class="service-card__title">
        طراحی سایت حرفه‌ای
    </h3>

    <p class="service-card__description">
        طراحی و توسعه وب‌سایت‌های مدرن،
        سریع و Responsive برای کسب‌وکار شما.
    </p>

    <a
        href="#"
        class="service-card__link"
    >
        مشاهده خدمات
    </a>

</article>

CSS:

.service-card {
    padding: 28px;

    border: 1px solid #ddd;

    border-radius: 20px;
}

.service-card__category {
    font-size: 0.875rem;

    font-weight: 500;
}

.service-card__title {
    margin-block: 12px;
}

.service-card__description {
    margin-block-end: 20px;
}

حالا Typography Component ما دارای سلسله‌مراتب مشخص است:

Category
   ↓
Title
   ↓
Description
   ↓
Action

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

تمرین ۱ — اضافه کردن فونت

یک فونت فارسی را به پروژه خود اضافه کنید و با:

@font-face

آن را تعریف کنید.

تمرین ۲ — سه وزن

برای فونت خود سه وزن تعریف کنید:

400
500
700

سپس:

متن عادی → 400
Button → 500
Heading → 700

قرار دهید.

تمرین ۳ — Typography System

یک سیستم Typography برای سایت ایجاد کنید که شامل:

Body
Small
H1
H2
H3
Button
Caption

باشد.

تمرین ۴ — فرم

یک فرم فارسی طراحی کنید و بررسی کنید که:

button,
input,
textarea,
select {
    font: inherit;
}

چه تفاوتی در ظاهر ایجاد می‌کند.

جمع‌بندی

فونت یکی از پایه‌های اصلی طراحی حرفه‌ای سایت فارسی است.

برای استفاده صحیح از فونت در وب باید چند مفهوم را کنار هم قرار دهیم:

Font Family
      ↓
@font-face
      ↓
Font Format
      ↓
Font Weight
      ↓
Font Display
      ↓
Fallback
      ↓
Typography
      ↓
Performance

در یک پروژه واقعی، هدف فقط این نیست که «فونت فارسی نمایش داده شود». هدف این است که فونت:

خوانا باشد،
ظاهر مناسبی داشته باشد،
وزن‌های موردنیاز را پشتیبانی کند،
روی موبایل و دسکتاپ مناسب باشد،
حجم غیرضروری به سایت اضافه نکند،
و در کنار سایر اجزای UI یک سیستم بصری منسجم ایجاد کند.

همچنین @font-face امکان تعریف فونت‌های سفارشی را فراهم می‌کند و با مشخص کردن font-weight و font-style می‌توان چند فایل فونت را به یک خانواده فونت منطقی متصل کرد.

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

۰۰

نظرات

هنوز نظری ثبت نشده است.

استفاده از فونت‌های فارسی در وب

فونت در وب چیست؟

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

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

WOFF چیست؟

فونت فارسی مناسب را چگونه انتخاب کنیم؟

۱. خوانایی

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

۳. پشتیبانی مناسب از فارسی

۴. حجم فایل

۵. مجوز استفاده

فونت‌های فارسی معروف

استفاده از فونت سیستم

Fallback Font چیست؟

font-face چیست؟

ساختار پروژه برای فونت

چرا مسیر فایل مهم است؟

تعریف وزن Regular

تعریف وزن Medium

تعریف وزن Bold

استفاده از چند وزن

چرا نباید همه وزن‌ها را بارگذاری کنیم؟

font-display چیست؟

font-display: swap

سایر مقادیر font-display

فونت و line-height

یک اشتباه رایج

فونت و font-size

فونت و font-weight

font-weight: bold یا 700؟

ایجاد سیستم Typography

فونت فارسی در پروژه بنو سرویس

طراحی Typography برای بنو سرویس

فونت و ترکیب فارسی و انگلیسی

فونت برای کدها

فونت در دکمه‌ها

فونت و Input

آیا باید از !important برای فونت استفاده کنیم؟

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

بررسی Console

فونت‌های Variable

آیا Variable Font همیشه بهتر است؟

بهینه‌سازی فونت

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

از فرمت مناسب استفاده کنید

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

font-display را آگاهانه انتخاب کنید

Subset کردن فونت

فونت و SEO

اشتباهات رایج در استفاده از فونت فارسی

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

۲. بارگذاری تمام وزن‌ها

۳. استفاده نکردن از Fallback

۴. اشتباه در مسیر فونت

۵. تعریف نکردن وزن صحیح

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

پروژه عملی — سیستم فونت بنو سرویس

مرحله اول — فایل‌ها

مرحله دوم — تعریف فونت

مرحله سوم — Typography پایه

مرحله چهارم — تیترها

مرحله پنجم — متن

ساخت یک Card با Typography مناسب

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

تمرین ۱ — اضافه کردن فونت

تمرین ۲ — سه وزن

تمرین ۳ — Typography System

تمرین ۴ — فرم

جمع‌بندی

نظرات

`font-face` چیست؟

`font-display` چیست؟

`font-display: swap`

سایر مقادیر `font-display`

فونت و `line-height`

فونت و `font-size`

فونت و `font-weight`

`font-weight: bold` یا `700`؟

آیا باید از `!important` برای فونت استفاده کنیم؟

`font-display` را آگاهانه انتخاب کنید