Download as PDF, PPTX
Uploaded byGiulia Laco
Web Font Mania - nel bene e nel male
Il documento tratta dell'uso e delle sfide relative ai web font nella progettazione web, evidenziando la loro crescente popolarità e l'importanza della tipografia per l'esperienza utente. Viene esplorata la storia dei font sul web, le tecniche di implementazione e le considerazioni tecniche come il rendering del testo, le licenze e le prestazioni. Vengono anche forniti consigli pratici su come scegliere e implementare i web font in modo efficace.
![La tipografia e i web font nei siti web [#wcvrn18]](https://cdn.slidesharecdn.com/ss_thumbnails/giulialacowebfont-nei-siti-webwcvrn18-181018173325-thumbnail.jpg?width=640&height=640&fit=bounds)
![[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!](https://cdn.slidesharecdn.com/ss_thumbnails/wmf15-custom-cms-2015-06-15-170522193337-thumbnail.jpg?width=640&height=640&fit=bounds)
Web Font Mania - nel bene e nel male
- 1. WEB FONT MANIA nelbene e nel male Giulia Laco 16 marzo 2018, Faenza, CSSday
- 2.
- 3. Mi presento Sono unaweb 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 fontsono 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 suisiti web
- 6. Quanti siti liusano? 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 dellatipografia 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 Coerenzacon 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 dellatipografia web UI SYSTEM FONTS 2015
- 12. Breve storia dellatipografia web
- 13. Web FontCome sceglierli Comeimplementarli Come usarli
- 14. Definizioni Typeface Font Famiglia dicaratteri Singolo file con un dato peso/stile
- 15. COME SCEGLIERLI Da un puntodi vista tecnico/strategico 1/3
- 16. I Web Fontnon si visualizzano ovunque nello stesso modo Problema
- 17. Text rendering La resadei caratteri varia: - da OS a OS - anche da singolo browser sul medesimo OS
- 18. Text rendering Vettoriale >Alias WEB FONT: PREMESSA
- 19.
- 20.
- 21. Text rendering engines DirectWrite 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 macOSLinux 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 WEBFONT: COME SCEGLIERLI
- 24. Font-smoothing E del cambiareil comportamento dei browser sull’antialiasing via CSS
- 25.
- 26.
- 27.
- 28. Font-smoothing WEB FONT: COMEIMPLEMENTARLI 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? Devoindividuare le esigenze in base al contenuto
- 30. Quanti font perpagina? Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#reqFont15 feb 2018 WEB FONT: COME SCEGLIERLI
- 31. Quanti font persito? 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 WebFont supporta tutte lingue Problema
- 35. Quali lingue mi servono? Devoindividuare la gamma Unicode desiderata
- 36. Le lingue supportate WEBFONT: COME SCEGLIERLI
- 37. Le licenze d’usodel font prescelto potrebbero avere limitazioni inattese Problema
- 38. Quali licenze mi servono? Devopensare a tutte le destinazioni d’uso
- 39. Le licenze d’usodei 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 venditadei 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
- 42.
- 43. Dove risiedono i WebFont? Su che server?
- 44. HOSTING (CSS @font-face) WEBFONT: COME IMPLEMENTARLI SELF-HOSTED SERVICE-HOSTED I web font risiedono sul server del sito I web font risiedono sul server esterno del fornitore
- 45.
- 46. Ad ogni browser ilsuo formato Problema
- 47. Formati di font TTFSVGOTF 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 FontVariations
- 53. Variable Fonts Si trattadi 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 disegnatoredel 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
- 55.
- 56. E se ilfont non si carica? Problema
- 57.
- 58. Font stack nelCSS 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
- 59.
- 60. I Web Font bloccanoil rendering della pagina Problema
- 61. Fattori che influisconosulla 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 difont Limitare il numero di FAMIGLIE Limitare il numero di PESI /STILI PER FAMIGLIA (o usare un variable font) A
- 63. Limitare il numero diglifi per font B SUBSETTING
- 64. Subsetting WEB FONT: COMEIMPLEMENTARLI
- 65. Strategie di Web FontLoading Alcune strategie possibili C
- 66. Cosa vede l’utente mentreil sito si carica? Problema
- 67. Sfarfallamenti WEB FONT: COMEINSTALLARLI
- 68. Il testo diquesta 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 delFOUT e del FOIT Zach Lethearman: https://www.zachleat.com/web/fout-foit-history/
- 70. FOIT all’infinito Ex problema Safarifino al 2016
- 71. FOUTFlash Of UnstyledText è progressive enhancement
- 72. Come ottengo unFOUT 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: COMEIMPLEMENTARLI <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.
- 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; }
- 78.
- 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.
- 80.
- 81. Responsive web typography Non lastarai ignorando, vero?
- 82. Responsive Web Typography WEBFONT: COME USARLI IA (Oliver Reichenstein) Dal blog, 2012: https://ia.net/know-how/responsive-typography-the-basics
- 84. Equilibrio Alla ricerca dellaleggibilità perfetta
- 85.
- 86.
- 87.
- 88.
- 89. Il diavolo sta neidettagli Open Type Features
- 90. Open Type WEB FONT:COME USARLI OFF http://open-type.surge.sh/
- 91. WEB FONT: COMEUSARLI Open Type http://open-type.surge.sh/ ON
- 92. … nel bene enel male
- 93. Questione morale Se abbiamochiesto 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.
- 94.
- 95. Un’ottima introduzione ai principibase della Web Typography
- 96. Principi base sucome abbinare i tipi di carattere.
- 97. Un libro da designera designer
- 98. Il primo libroche ha introdotto l’argomento
- 99. Un libro moltoricco di contenuti trattati in maniera approfondita
- 100. Un po’ distoria
- 101.
- 102.
- 103. Caratteri utilizzati Unna Input SansCondensed Krugnthep Zapfino Megalopolis Extra
- 104.