خصوصیات تایپوگرافی در 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

نوشته معرفی ویژگی های مربوط به تایپوگرافی در Css اولین بار در ممتاز دیزاین. پدیدار شد.

نکته ای که توجه به آن مهم است این است که وقتی اندازه فونت را انتخاب می کنید، نمی توانید به تنهایی روی اندازه های دسکتاپ آن تمرکز کنید. طراحی وب ریسپانسیو مستلزم آن است که اندازه فونت ها را برای اندازه های مختلف صفحه نمایش و دستگاه ها کامپایل کنید تا از بهینه ترین خوانایی برای آن ها اطمینان حاصل کنید. در زیر تصویری از یک مقاله وبلاگ (که دیگر وجود ندارد) از Typecast آمده است که اندازه فونت برای H1s تا H4s، پاراگراف ها و نقل قول ها را مشخص می کند. وب سایت هایی که از اندازه های استاندارد و یا سفارشی خود استفاده می کنند تا بهترین تایپوگرافی را دارند باشند، بسیار منحصر بفرد شناخته می شوند.

حتما متوجه خواهید شد که H5 و H6 در این تصویر حذف شده اند، اما دلیل آن این است که این برچسب ها معمولاً تگ های عنوانی هستند که زیاد استفاده نمی شوند و اندازه فونت های کوچکتری نسبت به بدنه دارند و کمتر از حد معمول استفاده می شوند (پی نوشت ها، اطلاعات حق کپی رایت و غیره).

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

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

1. Smashing Magazine

مجله Smashing با استفاده از یک san-serif بزرگ برای تیتر ها و یک سریف برای پاراگراف ها، تمایز بین بخش های مختلف و بررسی یک مقاله را آسان کرده است. فونت بدنه مقاله وبلاگ آن ها نیز 21 پیکسل بزرگ است و آن را به یکی از بزرگ ترین و خوانا ترین وبلاگ هایی تبدیل می کند که تا به حال با آن برخورد کرده ام. در تلفن همراه، آن ها اندازه فونت را به اندازه مناسب 18 پیکسل کاهش می دهند و هر گونه مشکل خوانایی را برای مخاطبان تلفن همراه خود کاهش می دهند.

2. The Economist

اکونومیست در صفحه اصلی خود از ترکیبی از وزن، اندازه و رنگ فونت برای تقسیم بندی هر دسته مقاله وبلاگ از یکدیگر استفاده می کند. وزن و سلسله مراتب کلماتی مانند «تحلیل اخبار» و «نمودار روزانه» به شما کمک می‌کند تا قبل از خواندن مقاله‌ها، موضوعات یا عناوینی که در هر کدام از آن ها وجود دارد، ابتدا توجه خود را به برچسب‌ها اختصاص دهید.

3. 1stWebDesigner

وب سایت 1stWebDesigner با استفاده از اندازه فونت و سلسله مراتبی که به کار برده، ترکیب بسیار خوبی ارائه می دهد تا بهترین اندازه را برای تایپوگرافی عنوان وبلاگ داشته باشد تا اولین چیزی باشد که می خوانید. همچنین، استفاده از drop cap (در این مورد، حرف بزرگ در ابتدای بدنه مقاله وبلاگ) به عنوان یک پایه آشنا عمل می کند که نشان دهنده شروع مقاله وبلاگ است.

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

4. TechCrunch

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

5. Wired

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

6. Quartz

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

7. Medium

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

8. The Skimm

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

9. FastCompany

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

سخن آخر

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

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

منبع: impactplus.com

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