Web Typography / RWD Conference Iran 2013 (In Farsi)

تایپوگرافی در طراحی واکنشگرا

ساالر کابلی#RWDConf92 | @Sallar

December 5th, 2013

متون باید خوانا باشند

متون خوانا

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

ناخواناخوانا

متون خوانا

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

علم نور است و جهل تاریکی.علم نور است و جهل تاریکی.

علم نور است و جهل تاریکی.

ع0م .ور ا+ت و )'ل %ری"ی.

انتخاب اندازه قلم

انتخاب اندازه قلم

اندازه قلم اصلی صفحه را به جای پیکسل بر اساس درصد تعیین کنید.

html{ font-size: 100%; }

مرورگرها همیشه به صورت پیش فرض اندازه قلم صفحات را تعیین میکنند و این اندازه را میشود تغییر داد.

انتخاب اندازه قلم

اندازه ارتفاع خطوط را یک بار و بدون واحد تعریف کنید.

html{ font-size: 100%; line-height: 1.5; }

معموال ارتفاع خطوط ۱٫۵ برابر سایز قلم جاری و یا بر اساس نسبت طالیی انتخاب میشود.

انتخاب اندازه قلم

برای تعریف اندازه قلم در صفحه، به جای پیکسل از واحدهای زیر استفاده کنید:

em / rem vw / vh

%

M

انتخاب اندازه قلم

هر واحد em به اندازه ابعاد حرف M بزرگ در عنصر والد است.

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

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

html{ font: 100%/1.5 "Helvetica Neue", sans-serif; } !div{ font-size: 1.2em; // 16 x 1.2 = 19.2px; } !div p{ font-size: 1.4em; // 19.2 x 1.2 = 26.88px; } !div span{ font-size: 1rem; // 16 x 1 = 16px; } !div small{ font-size: 0.8rem; // 16 x 0.8 = 12.8px; }

انتخاب اندازه قلم

از واحد em (و واحدهای مرتبط) می توانید همه جا استفاده کنید!

.box{ border-radius: 1em; height: 10em; width: 30em; padding: 0.2em 0 5em; font-size: 3rem; line-height: 2em; }

انتخاب اندازه قلم

اندازه قلم را طوری تعیین کنید که در هر خط به طور میانگین بین ۴۵ تا ۷۵ حرف وجود داشته باشد.

انتخاب اندازه قلم

سایز متون را بر اساس اهمیت آن ها و بر اساس یک سیستم مقیاس انتخاب کنید.

نسبت طالیی1.61803398875

انتخاب اندازه قلم

نسبت طالیی یکی از بهترین سیستم های انتخاب مقیاس است.

type-scale.com

تایپوگرافی ریسپانسیو

تایپوگرافی ریسپانسیو

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

media all and (max-width: 800px){ html{ font-size: 90%; } }

هنگام تعریف مدیا کوِیری ها از واحد em به جای پیکسل استفاده کنید.

تایپوگرافی ریسپانسیو

یا سایز منت عناصر مختلف را جداگانه و بر اساس نیاز تغییر دهید.

media all and (max-width: 800px){ h1{ font-size: 2em; } }

تایپوگرافی ریسپانسیو

هنگام تعریف مدیا کوِیری ها به جای پیکسل از em استفاده کنید.

media all and (max-width: 50em){ h1{ font-size: 2em; } }

واحد em بر اساس سایز فونت پیش فرض مرورگر عمل میکند.

تایپوگرافی ریسپانسیو

واحد em را چطور محاسبه کنیم؟

px ÷ 16 = em 800px ÷ 16px = 50em

.box{ font-size: 1.5em; line-height: 1.4; width: 30em; //480px } !@media all and (max-width: 30em) { .box{ font-size: 1.4em; line-height: 1.3; width: 20em; //320px } }

FitTextJs.com SimpleFocus.com/flowtype

Type-Scale.com

@SALLAR SALLAR.ME

SALLAR.KABOLI@GMAIL.COM