rwd: friendly typography (by anton kazanov) – front-end techhangout - 2013.06.22
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
![Page 1: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/1.jpg)
Friendly Typography Anton Kazanov
Innovecs
![Page 2: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/2.jpg)
Px, pt, em , rem etc.
Font Size Units
![Page 3: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/3.jpg)
There is no country for pixels
![Page 4: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/4.jpg)
Wide variety of screens and resolutions
![Page 5: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/5.jpg)
Context
![Page 6: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/6.jpg)
![Page 7: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/7.jpg)
![Page 8: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/8.jpg)
Real font size isn’t always
what you want
![Page 9: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/9.jpg)
Perceived Size
![Page 10: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/10.jpg)
Readability
• Use a big font size and adapted line-height
• A line should have approximately 80 chars
• Avoid paragraphs of more than 5 lines
![Page 11: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/11.jpg)
em , rem etc.
Relative Units
![Page 12: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/12.jpg)
em
1em = base font size
inherit from parent
Relative Units
rem
rem – root em
inherit only from root
![Page 13: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/13.jpg)
em
1em = base font size
inherit from parent
Relative Units
rem
rem – root em
inherit only from root
target ÷ context = result
![Page 14: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/14.jpg)
Increase or decrease base font size to adjust text
![Page 15: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/15.jpg)
Base Font
@media only screen and (min-width : 1824px) {
body{
font-size: 160%;
}
}
@media only screen and (min-width : 1224px) {
body{
font-size: 140%;
}
}
![Page 16: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/16.jpg)
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
![Page 17: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/17.jpg)
Fixed line-height
font-size: 140% font-size: 160%
![Page 18: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/18.jpg)
Relative line-height
font-size: 140% font-size: 160%
![Page 19: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/19.jpg)
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
![Page 20: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/20.jpg)
Flexibility
![Page 21: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/21.jpg)
Flexibility
Adaptability
![Page 22: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/22.jpg)
Flexibility
Adaptability
Readability
![Page 23: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/23.jpg)
![Page 24: RWD: Friendly Typography (by Anton Kazanov) – Front-End TechHangout - 2013.06.22](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7499e4a7959272a8b45f5/html5/thumbnails/24.jpg)
Thank You!