Přednáška Petra Grochála o použití písma na webu

1. Jak pracovat s fonty na
front-endu
Petr Grochál
petr.grochal@superkoderi.cz
www.superkoderi.cz
#frontendisti, 9. 4. 2015

2. Trocha historie
1. Web-safe fonts
○ Arial, Verdana, Helvetica, Times New Roman, ...
2. Nahrazování fontů
○ Cufon - Canvas/VML
○ Sifr - Flash
○ Flir - embedované obrázky

3. Současnost
Web fonts (EOT, TTF, WOFF, SVG)
● EOT - IE8 a nižší
● TTF - Safari, Android, iOS
● WOFF - všechny moderní prohlížeče
● SVG - Safari na iOS 4.1 a nižším

4. Budoucnost
WOFF 2.0
● nová generace web fontů
● větší komprese
● menší datová náročnost

5. Jaká je podpora v prohlížečích?
@font-face

6. Jaká je podpora v prohlížečích?
WOFF

7. Jaká je podpora v prohlížečích?
WOFF 2.0 - zatím jen “Blink”

8. Ke najít webfonty?
Self-hosted
● chcete mít kontrolu nad soubory
● Font Squirrel, Font Spring

9. Ke najít webfonty?
Cloud-hosted
● nemůžete nebo nechcete nahrávat soubory na server
● jednoduchá správa
● nemusíte se zatěžovat se zápisem @font-face
● Google Fonts, Fonts.com, Typekit, Cloud.typography, ...
Custom fonty
● zákazník občas dodá svůj vlastní font

10. Jak správně zapsat v CSS?
● různé řezy - kombinace font-style a font-weight
● co znamenají hashtagy v url?
zdroj: https://css-tricks.com/snippets/css/using-font-face/

11. Jak správně zapsat v CSS?
Jen WOFF a WOFF 2.0
zdroj: https://css-tricks.com/snippets/css/using-font-face/

12. Font Squirrel Webfont Generator

13. Font Squirrel Webfont Generator

14. Typekit

15. Typekit

16. Ikonkové fonty
● vektor
● jednoduchá změna barvy
● již hotové ikonkové sety na Icomoon, Fontastic, …
● možnost vygenerování vlastního fontu z SVG
http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/

17. Licence
● dát si pozor na to, pod jakou je font licencí
● za vygenerovaný font ručí developer
● možnost využít cloudových řešení jako
Typekit nebo Fonts.com

18. Tipy a triky
● font z Google fonts špatně vykresluje některé znaky -
stáhnout a vygenerovat
● české znaky - přidat language subset s českými
znaky, na Google fonts checkbox “Latin Extended”
● Příliš mnoho fontů - větší datová náročnost, déle se
stahují
● Pro mobilní zařízení vyzkoušejte condensed verzi
fontu

19. Tipy a triky
● Pokud se fonty v Chrome vykreslují špatně, zkuste
použít -webkit-font-smoothing: antialiased;
● Ve Firebugu se vám vysvítí, který font se aktuálně
používá
● zamezení zvětšování fontu na některých mobilních
zařízeních
body { -webkit-text-size-adjust: 100%; }
● velikost mřížky u ikonkového fontu nastavte podle
největší ikony a jednotlivé ikony vkládejte v té
velikosti jako jsou v designu

20. Užitečné odkazy
● http://www.cssfontstack.com - kompletní kolekce web safe fontů
● http://www.fontsquirrel.com - kolekce free webfontů, webfont generátor
● http://www.google.com/fonts
● http://www.typekit.com
● http://www.fonts.com
● http://www.456bereastreet.
com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabl
ing_user_zoom/

21. direction: rtl - pozor na záporné pozicování doleva :), resetovat letter-spacing

24. Děkuji za pozornost
Petr Grochál
petr.grochal@superkoderi.cz
www.superkoderi.cz
#frontendisti, 9. 4. 2015