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.

La tipografia e i web font nei siti web [#wcvrn18]

87 views

Published on

Intervento al WordCamp Verona 2018
ABSTRACT: più del 70 % dei siti web utilizza oggi i web font. Ma non tutti li usano ed implementano al meglio. Viaggio attraverso le meravigliose opportunità e le potenziali insidie legate alla scelta e all’implementazione dei web font.

-Breve storia della tipografia web: dal tag font html ai variable fonts.
-Come scegliere i web font: quanti sceglierne, tipologie di servizi offerte dai fornitori di font, lingue e subsetting, licenze e device.
-Come implementare i web font: dove farli risiedere, quali formati utilizzare, come caricarli (buone pratiche di progressive enhancement).
-Come usare i web font: responsive web typography, equilibrio nel typesetting, le caratteristiche dell’open type.

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

La tipografia e i web font nei siti web [#wcvrn18]

  1. 1. LA TIPOGRAFIA E I WEB FONT NEI SITI WEB GIULIA LACO WORDCAMP VERONA 13 OTTOBRE 2018
  2. 2. #wcvrn
  3. 3. MI PRESENTO Sono una web designer/developer, che ha iniziato con il Web degli esordi. Da qualche anno il mio interesse dominante nell’ambito della progettazione è concentrato sull’uso della tipografia e sulle nuove opportunità e sfide portate dai web font. @webmatter_it Giulia Laco
  4. 4. I WEB FONT I web font sono utilizzati ormai sulla quasi totalità dei nuovi siti web e non solo. SITI WEB Pagine AMP APP Annunci in HTML5 E-MAIL in HTML E-BOOK
  5. 5. I Web Font sui siti web
  6. 6. Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#fonts 15 feb 2018 QUANTI SITI USANO I WEB FONT? 70% sì 30% no
  7. 7. http://www.evolutionoftheweb.com/ C’è stata un’epoca in cui i web designer non potevano sapere con che font gli utenti avrebbero visualizzato il sito. EPOCA DEL FONT AGNOSTICISMO
  8. 8. QUALE FONT VIENE LETTO? FONT SUL CLIENT FONT SUL SERVER Il web designer è font agnostico Controllo sul font (salvo problemi di caricamento)
  9. 9. Breve storia della tipografia web Il web designer è font agnostico FONT SUL CLIENT Controllo sul font FONT SUL SERVER La resa dipende dal sistema operativo FONT SUL CLIENT (salvo problemi di caricamento)
  10. 10. UI System Fonts Coerenza con la cromatura del sistema operativo
  11. 11. UI System Fonts font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu”, "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; Un esempio: dichiarazione nel font-stack font-family: system-ui;
  12. 12. @font-face { font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface- Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto- Light"), local("DroidSans"), local("Tahoma"); } body { font-family: "system"; } UI System Fonts Un altro esempio: richiamo tramite @font-face
  13. 13. Breve storia della tipografia web
  14. 14. Breve storia della tipografia web
  15. 15. Definizioni Typeface Font Famiglia di caratteri Singolo file
  16. 16. Variable Fonts OpenType Font Variations
  17. 17. JasonPamenthal https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/
  18. 18. 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)
  19. 19. Variable Fonts Assi che riguardano aspetti a piacere weight width italic slant optical size wght wdth ital slnt opsz Assi più tradizionali Gli assi
  20. 20. RicardoMagalhães https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497
  21. 21. DavidJonathanRoss:https://djr.com/notes/first-variable-font/
  22. 22. Variable Fonts Supporto dei browser 70,94%
  23. 23. Web Font COME SCEGLIERLI | COME IMPLEMENTARLI | COME USARLI
  24. 24. COME SCEGLIERLIDa un punto di vista tecnico/strategico 1/3 I WEB FONT
  25. 25. I Web Font non si visualizzano ovunque nello stesso modo PROBLEMA
  26. 26. Text rendering La resa dei caratteri varia: - da OS a OS - anche da singolo browser sul medesimo OS
  27. 27. Text rendering Dal vettoriale al pixel
  28. 28. GREYSCALE-ANTIALIASING Scala di grigio
  29. 29. Subpixel-antialiasing Solo nei desktop Zach Leatherman https://www.zachleat.com/web/font-smooth/
  30. 30. 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” GDI Free Type Linux Android Chrome OS
  31. 31. Text rendering engines * I dispositivi mobili non usano il subpixel anti-aliasing per via della rotazione degli schermi Desktop SUBPIXEL ANTIALIASING macOS Linux Windows iOS Android Windows mobile SUBPIXEL ANTIALIASING SUBPIXEL ANTIALIASING + HINTING GREYSCALE ANTIALIASING GREYSCALE ANTIALIASING GREYSCALE ANTIALIASING + HINTING
  32. 32. Screen preview https://commercialtype.com/catalog/ caponi/caponi_display/regular
  33. 33. Quanti Web Font scegliere? Devo individuare le esigenze in base al contenuto
  34. 34. Quanti font per pagina? Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#reqFont15 feb 2018
  35. 35. 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 Davalutare Quanti font per SITO?
  36. 36. OGNI SCELTA È UNA RINUNCIA
  37. 37. Testo E FUNZIONE Non tutti i testi assolvono alle stesse funzioni
  38. 38. BODY TEXT FUNCTIONAL TEXT Deve essere letto e capito. Lettura immersiva. DISPLAY TEXT Deve essere notato e deve suggerire qualcosa sul contenuto. Lettura a scansione. Esprime la sua funzione nel momento in cui serve. Non deve richiamare l’attenzione ma deve farsi trovare all’occorrenza. TIPI DI TESTO
  39. 39. https://www.myfonts.com/fonts/positype/scotch/ Text (corpo del testo) Display (titoli) Deck (sottotitoli) FONT E FUNZIONE
  40. 40. Hoefler & Co.: https://dashboard.typography.com/user-guide/choosing-fonts Multipurpose fonts titoli > 18 pixel ScreenSmart fonts body 9-18 pixel FONT E DIMENSIONI
  41. 41. LA CATEGORIA “DISPLAY”
  42. 42. Come li abbinO? Il font-pairing
  43. 43. Ma come li abbini?
  44. 44. 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 FONT-PAIRINGI diversi approcci
  45. 45. Osa negli abbinamenti e sarai notata.
  46. 46. Non necessariamente un Web Font supporta tutte lingue PROBLEMA
  47. 47. Quali lingue mi servono? Devo individuare la gamma Unicode desiderata
  48. 48. Le LINGUE supportate GAMMA UNICODE NOMI DELLE LINGUE
  49. 49. Le licenze d’uso del font prescelto potrebbero avere limitazioni inattese PROBLEMA
  50. 50. Quali licenze mi servono? Devo pensare a tutte le destinazioni d’uso
  51. 51. Le licenze d’uso dei font sono molto diversificate e non è bene dare per scontato nulla. Le licenze supportate
  52. 52. Dove li prendo/compro? PROBLEMA
  53. 53. Da che fornitore prenderò i Web Font? E con che modello di acquisto?
  54. 54. Modalità di vendita dei font 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 Dal 2016 Dal 2018 (nuova formula: font in progress) SORTA DI LEASING
  55. 55. Cosa compro nel dettaglio? PROBLEMA
  56. 56. Open Type Features Il diavolo sta nei dettagli
  57. 57. Open Type OFF http://open-type.surge.sh/
  58. 58. Open Type ON http://open-type.surge.sh/
  59. 59. COME IMPLEMENTARLIVarie strategie 2/3I WEB FONT
  60. 60. Dove risiedono i Web Font? Su che server?
  61. 61. HOSTING (CSS @font-face) SELF-HOSTED SERVICE-HOSTED I web font risiedono sul server del sito I web font risiedono sul server esterno del fornitore
  62. 62. Formati di font Quali usare oggi
  63. 63. Ad ogni browser il suo formato (EX-)PROBLEMA
  64. 64. TTFSVG OTF WOFF WOFF2 -30% I più contemporanei EOT FORMATI DI FONT
  65. 65. @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"); } È datata e fa scaricare il formato EOT a IE9-11 anche se non necessario, visto che supportano il più compresso WOFF. Sintassi @font-face La storica sintassi bulletproof di Fontspring.
  66. 66. @font-face { font-family: FontName; src: url(fontname.woff2) format("woff2"), url(fontname.woff) format("woff”), url(fontname.otf) format("opentype"); } @font-face { font-family: FontName; src: url(fontname.woff2) format("woff2"), url(fontname.woff) format("woff”); } Sintassi @font-face Supporta Android 4.4 e precedenti o anche solo Nuova proposta
  67. 67. WOFF Supporto dei browser 93,2%
  68. 68. WOFF2 Supporto dei browser 79,33%
  69. 69. @font-face { font-family: ‘Amstervar’; src: url(Amstervar_VF.woff2) format(‘woff-variations’); src: url(Amstervar_REGULAR.woff2) format(‘woff2’); font-weight: 400; } Sintassi @font-face Con i Variable Fonts
  70. 70. E se il font non si carica? PROBLEMA
  71. 71. Font di riserva Fallback
  72. 72. font-family: “Proxima Nova”, Arial, Helvetica, sans serif; fallback font default system fontcustom web font FONT STACK Nel CSS
  73. 73. Attenzione alla Performance Web font e rendering di pagina
  74. 74. I Web Font bloccano il rendering della pagina PROBLEMA
  75. 75. A) Limitare il numero di font Limitare il numero di FAMIGLIE Limitare il numero di PESI /STILI PER FAMIGLIA (o usare un variable font :-)
  76. 76. B) Limitare il numero di GLIFI PER font Subsetting
  77. 77. Subsetting
  78. 78. C) Strategie di Web Font Loading Alcune strategie possibili
  79. 79. Cosa vede l’utente mentre il sito si carica? PROBLEMA
  80. 80. SFARFALLAMENTI
  81. 81. Il testo di questa pagina è reso con il… 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 DIFFERENZE CARICAMENTO
  82. 82. FOIT all’infinito EX PROBLEMA Safari fino al 2016
  83. 83. FOUTFlash Of Unstyled Text è progressive enhancement
  84. 84. Come ottengo un FOUT crossbrowser? PROBLEMA
  85. 85. FOUT CROSSBROWSER Come ottenerlo Web Font Loader (Js) Web Font Observer (Js) https://github.com/typekit/webfontloader https://github.com/bramstein/fontfaceobserver @font-face { font-family: Nome Font; src: url(nomefont.woff); … font-display: auto | block | swap | fallback | optional; } Font-display (descrittore CSS) per font SELF-HOSTED Font –display in font provider API ( per Google Fonts ci stanno lavorando)
  86. 86. @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 via Js, solo dopo l’avvenuto caricamento del font Javascript e CLASSE CSS Come funzionano Web Font Loader e Web Font Observer
  87. 87. FONT DISPLAY @font-face descriptor - supporto dei browser 72,83% ATTENZIONE Funziona solo su font in self-hosting
  88. 88. FONT DISPLAY Valori possibili ATTENZIONE Funziona solo su font in self-hosting auto block swap fallback optional
  89. 89. Icon fonts Come caricarli
  90. 90. ICON FONTS https://vimeo.com/118908533 WEB FONT ICON FONT WEB FONT ICON FONT FOUT FOIT Font-display: block non aiuta Meglio una strategia di caricamento diversa dai Web Font (meglio ancora usare icone SVG)
  91. 91. PRELOAD Intanto carico il principale
  92. 92. <head> <link rel=“preload” href=“font.woff” as=“font”> </head> PRELOAD Combatte il lazy loading, lo sviluppatore, sapendo quali font servono, può indicarlo al browser
  93. 93. Preload Supporto dei browser 74,4% ATTENZIONE Funziona solo su font in self-hosting
  94. 94. ATTENZIONE AI FAUX La sintesi dei font da parte dei browser
  95. 95. FAUx bold – Faux italic 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; }
  96. 96. COME USARLI Consigli base per il typesetting 3/3 I WEB FONT
  97. 97. Responsive web typography Tener conto della distanza di lettura
  98. 98. DISTANZA DI LETTURA IA (Oliver Reichenstein) dal blog, 2012: https://ia.net/know-how/responsive-typography-the-basics
  99. 99. DISTANZA e percezione grandezza caratteri
  100. 100. Equilibrio nel typesettingAlla ricerca della leggibilità perfetta
  101. 101. In termini CSS paragraph width font-size line-height
  102. 102. Textsize Linespacing Measure Readability In termini TIPOGRAFICI
  103. 103. lineheight line lenght In termini CSS
  104. 104. FoRma e contenuto Un paragone
  105. 105. UN paragone UX User Experience IA Information Architecture WEB TYPOGRAPHY COPYWRITING: = :
  106. 106. WordPress E la tipografia
  107. 107. Gutenberg, il nuovo editor di WordPress, riuscirà a migliorare l’inserimento di blocchi strutturati di contenuto mantenendo la separazione tra forma e contenuto? DOMANDA
  108. 108. CUSTOM POST TYPES GUTENBERG Editor a blocchi HEADER 1, 2,3, ecc.
  109. 109. BUON TYPESETTING
  110. 110. DOMANDE? Alza la mano! ANCORA? Seguimi: @webmatter_it giulialaco giulia.laco GRAZIE per l’attenzione
  111. 111. www.typestrategy.com ISCRIVITI ALLA NEWSLETTER Lascia la tua mail per aggiornamenti
  112. 112. Principali caratteri utilizzati IBM Plex Sans IBM Plex Sans Condensed IBM Plesk Mono IBM Plesk Serif Medium Italic IMB Plesk Serif SemiBold Italic Montserrat Monserrat light Phosfate Solid pHOSFATE INLINE
  113. 113. https://www.flickr.com/photos/biahvid/4818560731/in/photolist- iaPzz-4Eu2tZ-NeuWLh-85jyeG-zW8Vv-3BQAK- fUXhCa-9gdR3o-6pKtA4-6pKsSK-6pKsYx-2yfVEm-6pPBxL-6pPCa3-6pKt h6-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 Icons made by Freepik from www.flaticon.com are licensed by CC 3.0 BY CREDIT https://www.flickr.com/photos/gerl/6091645954/in/ album-72157627542639094/ https://www.flickr.com/photos/drsnitch/5729774443/in/ photolist-9JjAjx-9NDUgM-7wi4th-D8mHR- uoKez-5p4cFi-6DArCu- MkJ2T-3TjpUh-9gCqsJ-5Jhtu7-6wfTMT-4Z1n4g- jsPFV3-9Ei1QR-8zVrje-8hnpB3-7UX373-jsLYax-6DAnGd- jsL3pg-6DwgTt-9v2cvU-jpQdM-6DAnt9-4e3ye8-6w1WJf- D8mHP-7wi4xw-pF5YXd-9sQ9Yu-5uNHTx-7gQMrZ-7gUNmJ- jpRBU-8hj9Zn-bwErKG-ngDNM- jpLSJ-7weeZF-4VpjRq-7iYT6M-7wef2P-5iraZq- a2QHxY-3vY4o9-2M2HbV-co4yrA-b7EbSK-9uYc72

×