A font-face dos Desejos

Uma breve apresentação da história das 4 eras das webfontes, até os dias de hoje.

Transcript

2. QUEM SOU Front-end figuarnieri.github.io figuarnieri
3. A FONT-FACE DOS DESEJOS
4. EU AMO FONTES
5. As 4 eras das webfontes Era Pré-histórica (1991 à 1996) Era Sistêmicas (1996 à 2010) Era WebApps (2010 à 2016) Era Variável (2016 à ?)
6. A era Pré-histórica • 2 tipos de fontes padrões (Monospace e Sans Serif) • <img /> era a única técnica de fonte customizada
7. PRIMEIRO SITE WEBMOTORS
8. A era Sistêmica • Inserida a tag <font /> no Netscape • Possibilidades de utilizar fontes do sistema operacional nos sites • Primeiro draft da W3C para font no CSS
9. AMPSOFT WINDOWS & MAC FONTS
10. A Era WebApps • Fonts por bibliotecas JS (Cufón, Adobe Typekit) • @font-face (FontAwesome, Google Fonts, Font Squirrel e etc...) • Code Point (Google Material Design)
11. FONTELLO
12. CODE POINT
13. Era Fontes Variáveis • Weight (wght) • Width (wdth) • Slant (slnt) • Optical Size (opsz) • Italics (ital) • Grade (GRAD) • font-variation-settings • CPAL / COLR
14. Eadweard Muybridge
15. EXEMPLOS? (https://figuarnieri.github.io/fons-variabilis/index.html)
16. E agora?
18. A web não está concluída, é apenas a ponta do iceberg. As novas mudanças irão balançar o mundo ainda mais. -Tim Berners-Lee
19. ↘ https://www.youtube.com/watch?v=ES0M -MmzEuk ↘ http://web.archive.org/web/19970607020847/http://www.webmotors.com.br/ ↘ http://www.ampsoft.net/webdesign -l/WindowsMacFonts.html ↘ https://en.wikipedia.org/wiki/Typeface ↘ https://en.wikipedia.org/wiki/Web_typography ↘ http://cufon.shoqolate.com ↘ https://fonts.google.com/ ↘ https://alistapart.com/article/the -era-of-symbol-fonts ↘ https://www.axis-praxis.org/ ↘ https://v-fonts.com/ ↘ https://glyphsapp.com/tutorials/creating -a-microsoft-color-font ↘ https://www.colorfonts.wtf/ ↘ https://docs.microsoft.com/en -us/typography/opentype/spec/ Referências
20. Obrigado ;)