Web Font Mania - nel bene e nel male
•1 like•1,824 views
Download to read offline
Report
[Italiano] - Intervento al CSSday del 16/03/2018 ABSTRACT: I web font sono utilizzati ormai sulla quasi totalità dei nuovi siti web e non solo. Indubbiamente rappresentano una ghiotta opportunità per la comunicazione. Non sempre però gli utilizzatori sono consapevoli di tutte le conseguenze che ciò comporta: nel bene e nel male. Ragionamenti tecnici e strategici su come sceglierli, come usarli (buone pratiche di typesetting) e come implementarli con attenzione ai nuovi formati (woff2, variable font), alla performance e al progressive enhancement.
Recommended
![La tipografia e i web font nei siti web [#wcvrn18]](https://public.slidesharecdn.com/_next/static/media/rec_thumb_placeholder.82109866.jpeg)
More Related Content
Similar to Web Font Mania - nel bene e nel male
Similar to Web Font Mania - nel bene e nel male(20)
Web Font Mania - nel bene e nel male
- 1. WEB FONT MANIA nel bene e nel male Giulia Laco 16 marzo 2018, Faenza, CSSday
- 3. Mi presento Sono una web designer/developer, che ha iniziato con (…ehm) l’HTML 2.0, quindi in epoca pre-CSS. Da qualche anno mi occupo molto di: Web Typography Font optimisation Typography strategy @webmatter_it Giulia Laco
- 4. I web font sono utilizzati ormai sulla quasi totalità dei nuovi siti web e non solo. WEB FONT MANIA SITI WEB Pagine AMP APP Annunci in HTML5 E-MAIL in HTML E-BOOK
- 5. I Web Font sui siti web
- 6. Quanti siti li usano? Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#fonts 15 feb 2018 70% sì 30% no
- 7. Ma non è sempre stato così… http://www.evolutionoftheweb.com/ C’è stata un’epoca in cui i web designer non potevano sapere con che font gli utenti avrebbero visualizzato il proprio sito. FONT AGNOSTICISMO
- 8. Breve storia della tipografia web Il web designer è font agnostico FONT SUL CLIENT Si ha finalmente il controllo sul font (salvo problemi di caricamento) FONT SUL SERVER La resa dipende dal sistema operativo FONT SUL CLIENT
- 9. UI System Fonts Coerenza con la cromatura
- 10. UI System Fonts font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; Un esempio font-family: system-ui; Non ancora supportato da alcun browser CSS FONTS MODULE LEVEL 4
- 11. Breve storia della tipografia web UI SYSTEM FONTS 2015
- 12. Breve storia della tipografia web
- 13. Web FontCome sceglierli Come implementarli Come usarli
- 14. Definizioni Typeface Font Famiglia di caratteri Singolo file con un dato peso/stile
- 15. COME SCEGLIERLI Da un punto di vista tecnico/strategico 1/3
- 16. I Web Font non si visualizzano ovunque nello stesso modo Problema
- 17. Text rendering La resa dei caratteri varia: - da OS a OS - anche da singolo browser sul medesimo OS
- 18. Text rendering Vettoriale > Alias WEB FONT: PREMESSA
- 20. Subpixel-antialiasing Zach Leatherman https://www.zachleat.com/web/font-smooth/ WEB FONT: PREMESSA
- 21. Text rendering engines Direct Write Core Text Microsoft Apple Allinea i caratteri alla griglia, col risultato che: - i pesi regolari sembrano più sottili e - i grassetti sembrano ancora più pesanti Predilige la CHIAREZZA a scapito dell’accuratezza di riproduzione del font Preserva maggiormente il DISEGNO dei caratteri, il risultato è più “sfocato” WEB FONT: PREMESSA GDI Free Type Linux Android Chrome OS
- 22. Text rendering engines Desktop SUBPIXEL ANTIALIASING macOS Linux Windows iOS Android Windows mobile * I dispositivi mobili non usano il subpixel anti-aliasing per via della rotazione degli schermi SUBPIXEL ANTIALIASING SUBPIXEL ANTIALIASING + HINTING GREYSCALE ANTIALIASING GREYSCALE ANTIALIASING GREYSCALE ANTIALIASING + HINTING WEB FONT: PREMESSA
- 23. Screen preview https://commercialtype.com/catalog/ caponi/caponi_display/regular WEB FONT: COME SCEGLIERLI
- 24. Font-smoothing E del cambiare il comportamento dei browser sull’antialiasing via CSS
- 28. Font-smoothing WEB FONT: COME IMPLEMENTARLI Zach Leatherman https://www.zachleat.com/web/font-smooth/ Meglio lasciar fare ai browser -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; Se desidero un testo con carattere più sottile, cercherò un font più sottile!
- 29. Quanti Web Font scegliere? Devo individuare le esigenze in base al contenuto
- 30. Quanti font per pagina? Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#reqFont15 feb 2018 WEB FONT: COME SCEGLIERLI
- 31. Quanti font per sito? WEB FONT: QUANTI SCEGLIERNE DISPLAYBODY TEXT font pairing oppure stessa font-family CITAZIONI/ TRAFILETTI/ RICHIAMI/ RIASSUNTI/ NAVIGAZIONE/ PULSANTI/ CALL TO ACTION META INFO Bold + Bold Italic oppure Regular + Italic Regular Italic Bold Bold Italic Da valutare caso a caso
- 32. Ogni scelta è una rinuncia
- 33. Font Pairing – approcci WEB FONT: COME ABBINARLI http://www.designmantic.com/ blog/infographics/ten- commandments-of-typography/ https:// www.pinterest.com/search/ pins/?q=font%20pairing http:// www.typewolf.com/ http://designtaxi.com/ news/373220/ Infographic-The-Art-Of- Pairing-Google-Fonts/ http:// www.typography.com/ fonts/obsidian/overview/ Best of…Do’s & Don’ts By exampleCombinatorio Autoriale
- 34. Non necessariamente un Web Font supporta tutte lingue Problema
- 35. Quali lingue mi servono? Devo individuare la gamma Unicode desiderata
- 36. Le lingue supportate WEB FONT: COME SCEGLIERLI
- 37. Le licenze d’uso del font prescelto potrebbero avere limitazioni inattese Problema
- 38. Quali licenze mi servono? Devo pensare a tutte le destinazioni d’uso
- 39. Le licenze d’uso dei font sono molto diversificate e non è bene dare per scontato nulla. Le licenze supportate WEB FONT: COME SCEGLIERLI
- 40. Da che fornitore prenderò i Web Font? E con che modello di acquisto?
- 41. Modalità di vendita dei font WEB FONT: COME SCEGLIERLI Ha chiuso il 01/07/2015 Librerie in abbonamentoLibrerie gratuite Font in abbonamento Singoli font Varie fonderie (anche custom font) Solo desktop Dal 2015 desktop, dal 2018 web (formula innovativa) Ha chiuso il 31/12/2016 NEW Dal 2016 Dal 2018 (nuova formula: font in progress) Sorta di leasing
- 43. Dove risiedono i Web Font? Su che server?
- 44. HOSTING (CSS @font-face) WEB FONT: COME IMPLEMENTARLI SELF-HOSTED SERVICE-HOSTED I web font risiedono sul server del sito I web font risiedono sul server esterno del fornitore
- 45. Formati di font Quali usare oggi
- 46. Ad ogni browser il suo formato Problema
- 47. Formati di font TTFSVG OTF WOFF WOFF2 -30% WOFF I più contemporanei WEB FONT: COME IMPLEMENTARLI EOT
- 48. Sintassi @font-face WEB FONT: COME IMPLEMENTARLI @font-face { font-family: FontName; src: url(fontname.eot?#iefix) format("embeddedopentype"), url(fontname.woff2) format("woff2"), url(fontname.woff) format("woff"), url(fontname.otf) format("opentype"), url(fontname.svg#fontname) format("svg"); } La storica sintassi bulletproof di Fontspring È datata e fa scaricare il formato EOT a IE9-11 anche se non necessario, visto che supportano il più compresso WOFF
- 49. @font-face { font-family: FontName; src: url(fontname.woff2) format("woff2"), url(fontname.woff) format("woff”), url(fontname.otf) format("opentype"); } Sintassi @font-face WEB FONT: COME IMPLEMENTARLI Nuova proposta (supporta Android 4.4 e precedenti) O anche solo @font-face { font-family: FontName; src: url(fontname.woff2) format("woff2"), url(fontname.woff) format("woff”); }
- 50. Sintassi @font-face WEB FONT: COME IMPLEMENTARLI Per dare precedenza ai font locali (ma non è una buona idea) @font-face { font-family: FontName; src: local("FontName"), url(fontname.woff2) format("woff2"), url(fontname.woff) format("woff”); }
- 51. Sintassi @font-face WEB FONT: COME IMPLEMENTARLI E cosa succede con i Variable Fonts? @font-face { font-family: ‘Amstervar’; src: url(Amstervar_VF.woff2) format(‘woff-variations’); src: url(Amstervar_REGULAR.woff2) format(‘woff2’); font-weight: 400; }
- 52. Variable Fonts OpenType Font Variations
- 53. Variable Fonts Si tratta di un formato di font che consente ad un unico file di interpretare più stili possibili. OpenType Font Variations Typeface VF Typeface Roman Typeface Bold Typeface Italic Typeface Bold Italic … (+ Typeface Italic VF)
- 54. Variable Fonts Il disegnatore del font crea degli assi a cui applicare le variazioni. L’utilizzatore del font può modulare a piacere i vari assi oppure scegliere fra le istanze suggerite dal disegnatore. Gli assi https://www.axis-praxis.org/specimens/decovar
- 56. E se il font non si carica? Problema
- 58. Font stack nel CSS WEB FONT: COME IMPLEMENTARLI Si vedono se il primo font non si carica (o prima che si carichi) font-family: “Proxima Nova”, Arial, Helvetica, sans serif; fallback font default system font custom font
- 60. I Web Font bloccano il rendering della pagina Problema
- 61. Fattori che influiscono sulla velocità WEB FONT: COME IMPLEMENTARLI A B C NUMERO DI FONT (famiglie e pesi) NUMERO DI GLIFI (gamma Unicode) Subsetting: lingue, Open Type WEB FONT LOADING caricamento asincrono, preload, …
- 62. Limitare il numero di font Limitare il numero di FAMIGLIE Limitare il numero di PESI /STILI PER FAMIGLIA (o usare un variable font) A
- 63. Limitare il numero di glifi per font B SUBSETTING
- 64. Subsetting WEB FONT: COME IMPLEMENTARLI
- 65. Strategie di Web Font Loading Alcune strategie possibili C
- 66. Cosa vede l’utente mentre il sito si carica? Problema
- 67. Sfarfallamenti WEB FONT: COME INSTALLARLI
- 68. Il testo di questa pagina è reso con il… Differenze WEB FONT: COME IMPLEMENTARLI Il testo di questa pagina è reso con il… Il testo di questa pagina è reso con il… Il testo di questa pagina è reso con il… richiesta al server web-font loading web-font loaded FOUT FOIT
- 69. La storia del FOUT e del FOIT Zach Lethearman: https://www.zachleat.com/web/fout-foit-history/
- 70. FOIT all’infinito Ex problema Safari fino al 2016
- 71. FOUTFlash Of Unstyled Text è progressive enhancement
- 72. Come ottengo un FOUT crossbrowser? Problema
- 73. FOUT crossbrowser WEB FONT: COME IMPLEMENTARLI Web Font Loader Web Font Observer https://github.com/typekit/webfontloader https://github.com/bramstein/fontfaceobserver Web Font API @font-face { font-family: Nome Font; src: url(nomefont.woff); … font-display: auto | block | swap | fallback | optional; } Proprietà CSS font-display
- 74. Classe CSS WEB FONT: COME IMPLEMENTARLI @font-face { font-family: My Family; font-weight: 400; src: url(myfamily.woff2) format(“woff2”), url(myfamily.woff) format(“woff”); } body { font-family: sans-serif; } .fonts-loaded body { font-family: My Family, sans-serif; } La classe viene assegnata solo dopo l’avvenuto caricamento del font
- 75. Preload WEB FONT: COME IMPLEMENTARLI <head> <link rel=“preload” href=“font.woff” as=“font”> </head> Combatte il lazy loading, lo sviluppatore, sapendo quali font servono, può indicarlo al browser
- 76. Attenzione ai faux Sintesi dei font
- 77. Faux bold – Faux italic WEB FONT: COME IMPLEMENTARLI Dipende da come scrivo il CSS o da come lo scrivono i sistemi di terze parti http://www.fonts.com/support/faq/family- grouping @font-face { font-family: Nomefont, serif; src: url(nomefont-regular.woff) format("woff"); font-weight: normal; } h1 { font-family: Nomefont, serif; font-weight: bold; }
- 79. Icon fonts WEB FONT: COME IMPLEMENTARLI https://vimeo.com/118908533Zach Leatherman, Better @font-face with Font Load Events WEB FONT FOUT ICON FONT FOIT WEB FONT ICON FONT Usare un caricamento FOIT e non FOUT. Molti consigliano però di usare SVG per le icone.
- 81. Responsive web typography Non la starai ignorando, vero?
- 82. Responsive Web Typography WEB FONT: COME USARLI IA (Oliver Reichenstein) Dal blog, 2012: https://ia.net/know-how/responsive-typography-the-basics
- 84. Equilibrio Alla ricerca della leggibilità perfetta
- 88. line lenght
- 89. Il diavolo sta nei dettagli Open Type Features
- 90. Open Type WEB FONT: COME USARLI OFF http://open-type.surge.sh/
- 91. WEB FONT: COME USARLI Open Type http://open-type.surge.sh/ ON
- 92. … nel bene e nel male
- 93. Questione morale Se abbiamo chiesto ai nostri utenti di utilizzare tempo e banda per scaricare i web font, allora dobbiamo usarli come si deve, al meglio di quanto possono offrirci.
- 95. Un’ottima introduzione ai principi base della Web Typography
- 96. Principi base su come abbinare i tipi di carattere.
- 97. Un libro da designer a designer
- 98. Il primo libro che ha introdotto l’argomento
- 99. Un libro molto ricco di contenuti trattati in maniera approfondita
- 100. Un po’ di storia
- 103. Caratteri utilizzati Unna Input Sans Condensed Krugnthep Zapfino Megalopolis Extra