web typography / rwd conference iran 2013 (in farsi)
DESCRIPTION
Some insights about web typography and a simple guide to make content more pleasant to read on web. (in Farsi)TRANSCRIPT
تایپوگرافی در طراحی واکنشگرا
ساالر کابلی#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 } }
