معرفی ویژگی های مربوط به تایپوگرافی در Css

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

خصوصیات تایپوگرافی در CSS

دو گروه اصلی از ویژگی های CSS وجود دارد که سبک تایپوگرافی را کنترل می کنند: فونت و متن. گروه ویژگی های فونت CSS ویژگی های کلی فونت مانند استایل فونت و وزن فونت را دیکته می کنند. در زیر عنصر p را مشاهده خواهید کرد که دارای یک سبک فونت و یک ویژگی وزن فونت است.

p {
  font-style: oblique;
  font-weight: bold;
}

گروه ویژگی های متن CSS با کاراکتر ها، فاصله ها، کلمات و پاراگراف ها سروکار دارد. به عنوان مثال، ویژگی text-indent خط اول یک بلوک متن را دارای فرورفتگی می کند. همچنین ویژگی فاصله بین حروف، فاصله بین یک بلوک متنی را کنترل می کند. در زیر، عنصر p را با یک تورفتگی متن و یک ویژگی فاصله بین حروف مشاهده خواهید کرد.

p {
  text-indent: 50px;
  letter-spacing: 2px;
}

خصوصیات CSS دیگری نیز وجود دارد که می تواند بر تایپوگرافی وب خارج از فونت ها و گروه های ویژگی متن تأثیر بگذارد. به عنوان مثال، ویژگی color یا رنگ پیش زمینه عنصر HTML را کنترل می کند و می تواند برای تغییر رنگ متن استفاده شود. در زیر، عنصر p را با رنگ قرمز خواهید دید.

p {
  color: red;
}

اندازه فونت

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

h6 {
  font-size: 12pt;
}

در بالا عنصر عنوان سطح 6 را روی 12pt تنظیم می کند. برای مقادیر اندازه فونت، 4 نوع واحد اندازه گیری وجود دارد.

اندازه مطلق

این ها کلمات کلیدی استانداردی هستند که مقادیر آن ها توسط Agent کاربر (به عنوان مثال، مرورگر وب) تعریف شده است. مقادیر در مشخصات W3C CSS 2.1 xx-small، x-small، small، medium، large، x-large، xx-large هستند.

اندازه نسبی

کلمات کلیدی استاندارد که به فونت ها بر اساس عنصر والد اندازه می دهند. این ها نیز توسط user agent تعریف می شوند. مقادیر قابل استفاده در این بخش “بزرگ تر” و “کوچک تر” هستند. در زیر خواهید دید که یک عنصر پاراگراف در داخل یک عنصر والد(<div>) که اندازه آن 12pt است (در فایرفاکس) چگونه به نظر می رسد.

div {
  font-size: 12pt;
}
p {
  font-size: large;
}

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

مقادیر بزرگ تر و کوچک تر اندازه فونت عنصر والد را به ارث می برند و سپس اندازه قلم عنصر هدف را به طور نسبی تنظیم می کنند. برای مثال، اگر مقدار عنصر والد روی کوچک تنظیم شود، کلمه کلیدی بزرگ تر عنصر فرزند را بزرگ تر می کند. برای اکثر مرورگرها، تغییر نسبت به واحدهای دقیق حدود 1.2 واحد است، اگرچه این نسبت در بین همه مرورگرها سازگار نیست. به عنوان مثال، اگر متن روی 12pt تنظیم شود، کلمه کلیدی بزرگتر اندازه متن عنصر فرزند را به حدود 12pt x 1.2 تغییر می دهد (بسته به مرورگر)، که برابر با 14.4pt است.

طول مطلق

طول های مطلق اندازه های تحت اللفظی هستند. برای مثال 12 پیکسل دقیقاً 12 پیکسل و 2 اینچ دقیقاً 2 اینچ است. طول مطلق اغلب توسط طراحان وب استفاده می شود. مقادیر ممکن برای واحدهای طول مطلق عبارتند از: pt، px، mm، cm، in و pc. میلی‌متر (میلی‌متر)، سانتی‌متر (سانتی‌متر) و اینچ (اینچ) برای ابعاد فیزیکی و واقعی مناسب‌تر هستند و واحدهای اندازه‌گیری هستند که اغلب در طراحی چاپ استفاده می‌شوند. آن ها برای اندازه گیری های مبتنی بر صفحه نمایش به دلیل تنوع زیاد وضوح صفحه نمایش مناسب نیستند.

نقاط (pt) و (pc) اگرچه بهتر از mm، cm و in هستند، اما می توانند از نظر بصری بر اساس dpi مرورگر یا دستگاه متفاوت باشند. بنابراین، هنگام استفاده از طول های مطلق، پیکسل ها (px) کمترین مشکل را دارند. با این حال، یکی از مشکلات px این است که نسخه های قدیمی IE نمی توانند اندازه آنها را به صورت بومی تغییر دهند. اگر برای مخاطبانی که احتمالاً اندازه متن را به صورت دستی از طریق مرورگر وب خود تغییر می دهند، توسعه داده می شود، واحد اندازه گیری px ممکن است گزینه خوبی نباشد. هنگام استفاده از px برای اندازه فونت مطمئن شوید که در دسترسی مشکلی ندارد.

طول نسبی

نوع دیگر واحدهای اندازه تایپوگرافی در Css، طول های نسبی هستند. این بدان معنی است که اندازه آن ها به اندازه فونت اختصاص داده شده به عنصر والد آن ها بستگی دارد. واحدهای ممکن em، % و ex هستند. طراحان وب زیادی از ex استفاده نمی کنند. اندازه تقریبی آن ارتفاع حرف “x” در فونت فعلی است. کار کردن با مقادیر em و % بسیار ساده تر است. em و % یکسان عمل می کنند و این فقط به خاطر syntax آن ها است:

• 0.5em برابر با 50% است
• 1em برابر با 100% است
• 0.2em برابر با 20٪ است
• 0.73em برابر با 73% است
• 2.21em برابر با 221٪ است

نحوه استفاده از آن ها در کد:

html, body {
  font-size: 85%; /* = (.85em) */
}

h1 {
  font-size: 110%; /* = (1.1em) */
}

نسبت ها همگی به اندازه فونت والد عنصر مربوط هستند. بنابراین، اگر اندازه فونت پایه (در بدنه یا html) روی 80٪ تنظیم شده باشد، یک فرزند با اندازه فونت 0.2em یا 20٪ همان 20٪ ارتفاع از 80٪ اصلی را خواهد داشت.

پشته فونت ها

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

body {
  font-family: Georgia, Times, "Times New Roman", serif;
}

در مثال بالا، مرورگر وب از چپ به راست می رود تا زمانی که فونتی را در رایانه کاربر پیدا کند. برای مثال فونت جورجیا را جستجو می کند و اگر آن را پیدا نکرد به فونت Times و … می رود. گزینه‌های زیادی برای ایجاد پشته‌های فونت وجود دارد و تعداد زیادی پشته فونت از پیش ساخته شده در وبلاگ‌ها و IDE‌هایی مانند Dreamweaver موجود است.

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

1. باید مقدار مناسبی از فونت های بازگشتی در آن وجود داشته باشد. در مثال بالا فقط سه مورد را فهرست می کند، اما اگر تعداد بیشتری وجود داشته باشد، ایده آل تر خواهد بود.
2. فونت های انتخاب شده باید در تعدادی از پلتفرم ها در دسترس باشند. به عنوان مثال، Arial به طور گسترده در ویندوز استفاده می شود، در حالی که معادل نزدیک آن، Helvetica، تقریباً در تمام مک ها وجود دارد.
3. برای پشته‌های فونت‌هایی که کاربران لینوکس را در خود جای می‌دهند، توجه به نکات مربوط به فونت ها در لینوکس بسیار مهم است.

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

منبع: webfx.com