RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22
24
Friendly Typography Anton Kazanov Innovecs
description
В субботу, 22 июня, состоялась первая внешняя встреча TechHangout сообщества! Мероприятие прошло под лозунгом «One day of inspiring talks on Front-End». На Front-End TechHangout Антон Казанов, специалист компании Innovecs, поведал нам о RWD: Friendly Typography. * TechHangout сообщество было основано в 2012 году разработчиками компании Innovecs с целью обмена знаниями и опытом. Эта внутренняя инициатива оказалась настолько востребованной и популярной, что за незначительное время у Hangout появился свой логотип, блог и группа на facebook с возможностью обсудить услышанное. Подобные встречи являются частью образовательного проекта Innovecs, который активно развивает направление внутренних тренингов, программу обмена знаниями и опытом среди специалистов. Если у вас есть неутомимое рвение к новым знаниям, профессиональному росту, или же вы хотите поделиться своим опытом - добро пожаловать в TechHangout Club! Присоединяйтесь к обсуждению - https://www.facebook.com/groups/techhangout/ Читайте нас на - http://hangout.innovecs.com/
Transcript of RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22
Friendly Typography Anton Kazanov
Innovecs
Px, pt, em , rem etc.
Font Size Units
There is no country for pixels
Wide variety of screens and resolutions
Context
Real font size isn’t always
what you want
Perceived Size
Readability
• Use a big font size and adapted line-height
• A line should have approximately 80 chars
• Avoid paragraphs of more than 5 lines
em , rem etc.
Relative Units
em
1em = base font size
inherit from parent
Relative Units
rem
rem – root em
inherit only from root
em
1em = base font size
inherit from parent
Relative Units
rem
rem – root em
inherit only from root
target ÷ context = result
Increase or decrease base font size to adjust text
Base Font
@media only screen and (min-width : 1824px) {
body{
font-size: 160%;
}
}
@media only screen and (min-width : 1224px) {
body{
font-size: 140%;
}
}
If there was a property
which screams
don’t use pixel values
it’s line-height
Source: http://webdesign.tutsplus.com/articles/typography-articles/taking-the-erm-out-of-ems
Fixed line-height
font-size: 140% font-size: 160%
Relative line-height
font-size: 140% font-size: 160%
Fully Fluid
• vw: each unit is equal to 1% of the width of the containing block
• vh: each unit is equal to 1% of the height of the containing block
• vmin: each unit is equal to whichever one is smaller
Flexibility
Flexibility
Adaptability
Flexibility
Adaptability
Readability
Thank You!
