آشنایی با مفهوم تایپوگرافی در طراحی وب


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

تایپوگرافی چیه؟
تایپوگرافی همه جا هست! هر جا که نوشته ای باشه تایپوگرافی هم هست. با استفاده از تایپوگرافی، ما می تونیم ظاهر نوشته ها و احساسی که به ما منتقل می کنن رو تغییر بدیم. این تغییرات روی خواننده ی متن ها اثر می گذارن. ظاهر نوشته ها می تونه روی بازدید کننده های سایت تاثیر بذاره حتی اگه شروع به خوندن نوشته ها هم نکرده باشن. پس باید حواسمون باشه حسی که منتقل می کنیم با موضوعی که راجع بهش نوشتیم یکسان باشه.

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

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

ما توی سایتمون از اندازه ها و شکل های مختلف تایپ فیس “Open Sans” استفاده کردیم.

سریف (Serif) و سنزسریف (Sans-Serif)
قلم ها در تایپوگرافی به دو دسته تقسیم می شن: سریف و سنزسریف. توی فونت های سریف، آخر حروف کشیدگی یا دنباله وجود داره اما توی قلم های سنزسریف (یعنی بدون سریف) این دنباله وجود نداره. برای این که بهتر متوجه بشین به عکس زیر دقت کنید:

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

معمولاً قلم سریف برای متن های بلند و روی کاغذ مناسب تره و قلم های سنزسریف برای صفحه ی نمایش و متن های کوتاه تر مثل عناوین.

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

حالا بیاید به این جزئیات تایپ فیس ها یه نگاهی بندازیم. اینجوری بهتر متوجه می شیم که چه طور یه تایپ فیس می تونه طراحی ما رو قشنگ تر کنه یا برعکس همه ی زحمتامون رو هدر بده (البته لازم نیست که این قسمت ها رو حفظ کنید. فقط کافیه بدونید که تغییر توی این قسمت ها باعث میشه فونت ها با هم تفاوت داشته باشن.)

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

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

تنظیم فاصله (Kerning & Tracking) 
Tracking یعنی فاصله گذاری کلی بین همه ی حروف و کاراکتر ها در یک متن.

با استفاده از ویژگی فاصله گذاری بین حروف (letter-spacing) در CSS می تونیم، در صورت نیاز این مقدار رو تغییر بدیم:

h1 {
    letter-spacing: 5px;
}

با استفاده از ویژگی فاصله گذاری بین کلمات (word-spacing) هم می تونیم این مقدار رو تغییر بدیم. مثل کد زیر:

h1 {
    word-spacing: 15px;
}

Kerning یعنی فاصله ی بین دو کاراکتر. این مقدار رو طراح تایپ فیس مشخص می کنه. چون بعضی از حروف اگه نزدیک هم باشن قشنگ ترن بعضی از حروف هم اگه دوتر باشن زیباتر به نظر می رسن. تغییر این اندازه ها توی CSS کار سختیه.

Leading
این کلمه به معنی فاصله گذاری بین خط های یک متنه. اول تصویر زیر رو نگاه کنید تا بعد در موردش صحبت کنیم:

با استفاده از ویژگی line-height در CSS می تونیم این مقدار پیش فرض فونت ها رو تغییر بدیم:

p {
    line-height: 2;
}

عدد دو مقدار پیش فرض رو دو برابر می کنه.

آشنایی با مفهوم Widows و Orphans در تایپوگرافی
وقتی که یه کلمه تنها توی یه خط و یا آخر یه قسمت از متن، باقی می مونه بهش میگن: Widow توی عکس پایین، بلوک ها نشون دهنده ی کلمه هایی هستن که توی یه ستون قرار می گیرن. Widow همون بلوک آبی رنگه که تک افتاده:

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

حالا اگه این اتفاق توی سایتمون افتاد، یه سری روش ها برای درست کردنش وجود داره. مثل :

- تنظیم کردن اندازه ی فونت ها
- تغییر دادن عرض ظرف ها
- اضافه کردن یا حذف کردن قسمتی از متن
- تغییر دادن میزان فاصله گذاری ها

تراز کردن یا Alignment
ما می تونیم متن ها رو یا به سمت چپ ( که حالت پیش فرض هست و برای زبان هاییه که از چپ به راست نوشته می شن مثل انگلیسی) یا به راست ( مثل زبان فارسی و عربی) یا در مرکز تراز کنیم. تراز به طرف چپ یا چپ چین کردن، متن ها در زبان هایی که از چپ به راست خونده میشن باید به سمت چپ تراز بشن.

و وسط چین کردن معمولا برای عنوان ها و سر صفحه ها استفاده می شه تا بیشتر از بقیه ی قسمت ها به چشم بیاد. توی CSS با استفاده از ویژگی text-align می تونیم این کار رو انجام بدیم. مثل کد زیر:

h1 {
    text-align: center;
}

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

بعضی از زبان ها هم مثل فارسی و عربی از راست به چپ نوشته می شن. این نوشته هارو باید به سمت راست تراز کرد. برای این کار، مقدار right به معنی راست رو برای ویژگی text-align سی اس اس در نظر می گیریم (به همین صورت، برای چپ چین کردن هم مقدار left به معنی چپ را وارد می کنیم.)

حالا فرض کنیم که متنمون انگلیسیه و به سمت چپ ترازش کردیم. می تونیم توضیحات مربوط به عکس ها رو که زیرشون اضافه می کنیم و بهشون Caption می گن -برای این که بیشتر توجه بیننده رو جلب کنن- به سمت راست تراز کنیم. مثل عکس زیر:

اضافه کردن Caption به عکس هم تگ HTML مخصوص به خودشو داره. برای روشن تر شدن این قضیه، به این کد دقت کنید:

figcaption {
    text-align: right;
}

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

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

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

تضاد
توی درس بعد درباره ی رنگ ها مفصل صحبت می کنیم. ولی فعلا بدونید که انتخاب رنگ متن ها و تضاد و اختلافشون با صفحه ی نمایش، روی خوانا بودن اونا تاثیر می ذاره.

توی عکس بالا در سمت چپ تضاد رنگ ها خوب نیست و در سمت راست رنگ های مناسبی انتخاب شدن که خوندن متن رو راحت می کنه. تصویر سمت چپ خوندنش سخته و چشم ها رو اذیت می کنه.

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

فونت های وب
بعضی از فونت ها هستن که فقط برای چاپ کردن مناسبن و نباید ازشون توی سایت استفاده کرد. خوشبختانه Google Fonts که ما فونت Open Sans رو از طریق اون به سایت اضافه کردیم، کلی فونت قشنگ که مناسب استفاده در وب باشه فراهم کرده که با خیال راحت می تونید ازشون استفاده کنید.

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

لیست نظرات
کاربر میهمان
دیدگاه شما چیست؟
کاربر میهمان