Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Font Mania - nel bene e nel male

1,285 views

Published on

[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.

Published in: Design
  • Be the first to comment

Web Font Mania - nel bene e nel male

  1. 1. WEB FONT MANIA nel bene e nel male Giulia Laco 16 marzo 2018, Faenza, CSSday
  2. 2. #CSSday #CSSday18
  3. 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. 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. 5. I Web Font sui siti web
  6. 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. 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. 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. 9. UI System Fonts Coerenza con la cromatura
  10. 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. 11. Breve storia della tipografia web UI SYSTEM FONTS 2015
  12. 12. Breve storia della tipografia web
  13. 13. Web FontCome sceglierli Come implementarli Come usarli
  14. 14. Definizioni Typeface Font Famiglia di caratteri Singolo file con un dato peso/stile
  15. 15. COME SCEGLIERLI Da un punto di vista tecnico/strategico 1/3
  16. 16. I Web Font non si visualizzano ovunque nello stesso modo Problema
  17. 17. Text rendering La resa dei caratteri varia: - da OS a OS - anche da singolo browser sul medesimo OS
  18. 18. Text rendering Vettoriale > Alias WEB FONT: PREMESSA
  19. 19. Greyscale-antialiasing WEB FONT: PREMESSA
  20. 20. Subpixel-antialiasing Zach Leatherman https://www.zachleat.com/web/font-smooth/ WEB FONT: PREMESSA
  21. 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. 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. 23. Screen preview https://commercialtype.com/catalog/ caponi/caponi_display/regular WEB FONT: COME SCEGLIERLI
  24. 24. Font-smoothing E del cambiare il comportamento dei browser sull’antialiasing via CSS
  25. 25. Zach Leatherman https://www.zachleat.com/web/font-smooth/
  26. 26. Zach Leatherman https://www.zachleat.com/web/font-smooth/
  27. 27. Zach Leatherman https://www.zachleat.com/web/font-smooth/
  28. 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. 29. Quanti Web Font scegliere? Devo individuare le esigenze in base al contenuto
  30. 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. 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. 32. Ogni scelta è una rinuncia
  33. 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. 34. Non necessariamente un Web Font supporta tutte lingue Problema
  35. 35. Quali lingue mi servono? Devo individuare la gamma Unicode desiderata
  36. 36. Le lingue supportate WEB FONT: COME SCEGLIERLI
  37. 37. Le licenze d’uso del font prescelto potrebbero avere limitazioni inattese Problema
  38. 38. Quali licenze mi servono? Devo pensare a tutte le destinazioni d’uso
  39. 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. 40. Da che fornitore prenderò i Web Font? E con che modello di acquisto?
  41. 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
  42. 42. COME IMPLEMENTARLI Varie strategie 2/3
  43. 43. Dove risiedono i Web Font? Su che server?
  44. 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. 45. Formati di font Quali usare oggi
  46. 46. Ad ogni browser il suo formato Problema
  47. 47. Formati di font TTFSVG OTF WOFF WOFF2 -30% WOFF I più contemporanei WEB FONT: COME IMPLEMENTARLI EOT
  48. 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. 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. 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. 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. 52. Variable Fonts OpenType Font Variations
  53. 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. 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
  55. 55. Variable Fonts Browser support
  56. 56. E se il font non si carica? Problema
  57. 57. Font di riserva Fallback
  58. 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
  59. 59. Attenzione alla Performance
  60. 60. I Web Font bloccano il rendering della pagina Problema
  61. 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. 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. 63. Limitare il numero di glifi per font B SUBSETTING
  64. 64. Subsetting WEB FONT: COME IMPLEMENTARLI
  65. 65. Strategie di Web Font Loading Alcune strategie possibili C
  66. 66. Cosa vede l’utente mentre il sito si carica? Problema
  67. 67. Sfarfallamenti WEB FONT: COME INSTALLARLI
  68. 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. 69. La storia del FOUT e del FOIT Zach Lethearman: https://www.zachleat.com/web/fout-foit-history/
  70. 70. FOIT all’infinito Ex problema Safari fino al 2016
  71. 71. FOUTFlash Of Unstyled Text è progressive enhancement
  72. 72. Come ottengo un FOUT crossbrowser? Problema
  73. 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. 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. 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. 76. Attenzione ai faux Sintesi dei font
  77. 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. 78. Icon fonts Come caricarli
  79. 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. 80. COME USARLI Consigli base 3/3
  81. 81. Responsive web typography Non la starai ignorando, vero?
  82. 82. Responsive Web Typography WEB FONT: COME USARLI IA (Oliver Reichenstein) Dal blog, 2012: https://ia.net/know-how/responsive-typography-the-basics
  83. 83. Equilibrio Alla ricerca della leggibilità perfetta
  84. 84. Textsize Linespacing Measure Readability
  85. 85. paragraph width font-size line-height
  86. 86. lineheight line lenght
  87. 87. line lenght
  88. 88. Il diavolo sta nei dettagli Open Type Features
  89. 89. Open Type WEB FONT: COME USARLI OFF http://open-type.surge.sh/
  90. 90. WEB FONT: COME USARLI Open Type http://open-type.surge.sh/ ON
  91. 91. … nel bene e nel male
  92. 92. 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.
  93. 93. La “Bibbia” tecnica
  94. 94. Un’ottima introduzione ai principi base della Web Typography
  95. 95. Principi base su come abbinare i tipi di carattere.
  96. 96. Un libro da designer a designer
  97. 97. Il primo libro che ha introdotto l’argomento
  98. 98. Un libro molto ricco di contenuti trattati in maniera approfondita
  99. 99. Un po’ di storia
  100. 100. GRAZIE Per l’attenzione VOTA L’INTERVENTO https://joind.in/event/cssday-2018 SEGUIMI @webmatter_it +GiuliaLaco giulialaco
  101. 101. https://plus.google.com/collection/sRGYX https://plus.google.com/collection/gkTXX Collection gkTXX Collection sRGYX
  102. 102. Caratteri utilizzati Unna Input Sans Condensed Krugnthep Zapfino Megalopolis Extra
  103. 103. Credit https://www.flickr.com/photos/biahvid/ 4818560731/in/photolist-iaPzz-4Eu2tZ- NeuWLh-85jyeG-zW8Vv-3BQAK- fUXhCa-9gdR3o-6pKtA4-6pKsSK-6pKsYx-2yfVEm-6pP BxL-6pPCa3-6pKth6-4aeK87-8kNoei-6pPBQs https://www.flickr.com/photos/al_fred/ 2182308559/in/photolist-4jQUiD-oi8HVK-ogJrx7- oi9Rzk-nV5d5M-nV5RBD-ocv81A-o1zTeS-5Mbse3- oczpBX-nV6PbW-nYRrVz-ocpMsE-nV6twY-nV2Vt5- nZqKEA-oauPyC-nV2dM4-oawyLs-nYSGSs-4iajcn- nYT2ft-nV3Jbx-nV3ne3-nV4PLQ-nV3aG3-ocgVrZ- oga2Y9-ogJvHm-ogWtUZ-oi5zox-ocq9Jh-6oVivA- nV3zwt-nV54qb-nV6uLu-eQN7SR-ocysV2-ocnWKG- ogkHo2-ohLrSc-ocqrU9-nV3g6j-8cBMMm-nV5rbB- ogV9vR-nV4xzi-oczds2-ocze5p-ocAm66 https://www.flickr.com/photos/chanceprojects/ 29823295336/in/photolist-MrobFb-fngd4M-qJCihM- PUm3J-4FaAxT-dmftfy-DXcUU6-9wSsL8-7tb3vZ- aUGnoR-aUFC2B-4s3WXA-hA8UE-ra1xz- ghswMY-63tZUW-ra1vd-4auQL3-irPz6L-4auQLN- cqq8KC-4UVMNr-S9gjcA-5n27xu-irPiow-eaLeRu- baAZhT-BeKU6-kCCcoq-qW2iNy-q2whui-BeKTB- BeKR5-BeKRR-Q6BW7Q-pypqkH-MnrQN8-BeKSD- hA8X3-hA8U3-8WtL2t-V9PvGv-pmN7kx https://www.flickr.com/photos/skohlmann/ 10154660144/in/photolist-bUPJxm-31Wqko-gtkhFj- dutSkw-bBRVkT-nV3ne3-oczpBX-nV5JqW-o1A7Av- D89pr-4d2zEe-oeiJhJ-ocqUKy https://www.flickr.com/photos/gjackson/ 7433434840/in/photolist-cjSicE-kYAV43- djNqXg-4WaPTg-6zyy2E-oot9Pk-ocHZhF-CBKFvs- ft9hu1-8X8Zvv-gyt7y9-gXDthf- buECJd-5qYw59-9xKwNa-9wPNpu-pF8bbo-4yhQ97- i4s57p-kWf33M-X54V69-gWna4i-qZUnRU-fsZz1u- dxu2Xs-pmp1Es-8draLx-ARVSPB-coxCvh- fK8KDQ-21Yw1PC-qFnXqT-9quXM8-9mwSb9-5thAzp- nkxQCT-aAQ8Vz-kLBzaL-kAiCWk-nfkm1x- ASVMC-95nEoE-6VhH7v-dD2m6s-4aA3m6-Bg6Xc- pvTNFG-azkZL9-9ShmPi-Ysk2aq https://www.flickr.com/photos/deanhochman/ 29885931442/in/photolist-MwVdd3-e4DEfD-24BpLpi- bqdnxe-a3gYZw-5uSfyY-aKvKbT-rijebG-7CopFv- kURuRD-nfF7vW-8pfFHh-nPSNvS- TAFSBN-51SrSC-6cS9Nf-9Zm5DM-99Wpfw- eD5rhu-4nxisV-5nerfV-9MdjUx-drJ4UH-csio9u- np9rfv-4YZoBy-7yoqTm-84wKoE-7CkUoy- BmDqXw-4arCkR-6LtGzf-d5Xm45-5X6M5N-ghQ1h4- cyB7V9-5kLZ4U-6ayQxd-6cNrft-6cNj3M-saNyPk- HPkqGH-5an3Ut-5kGJcg-kNu81y-rSbxiT-8MCsFM- CV7q5Y-RgYZ61-KmfhAs Icons made by Freepik from www.flaticon.com are licensed by CC 3.0 BY

×