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.

Variable Fonts: il futuro della tipografia è già cominciato

285 views

Published on

Intervento al CSSday 15/03/2019 Faenza (Italy)

ABSTRACT - L’innovativo formato di font che sta cambiando la storia della tipografia e del web design. Incredibilmente efficace in un’ottica di ottimizzazione della performance e della progettazione responsive, il formato ha potenzialità di utilizzo creativo che spaziano dalle interfacce digitali, all’animazione del testo, all’espressione del brand in modi nuovi, prima impensabili. In un unico file un armamentario tipografico che aspetta di essere usato.

YouTube: https://www.youtube.com/watch?v=D2Uta2jW0GY
Vimeo: https://vimeo.com/332610955
Facebook: https://www.facebook.com/watch/?v=337857423560579

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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

Variable Fonts: il futuro della tipografia è già cominciato

  1. 1. VARIABLE FONTS ILFUTURODELLATIPOGRAFIAÈGIÀCOMINCIATO GIULIALACO 15 marzo 2019 – FAENZA (RA)
  2. 2. #CSSday #CSSday19
  3. 3. Mi presento Sono una web designer/developer, che ha iniziato con l’HTML 2.0, quindi in epoca pre-CSS. WEB TYPOGRAPHER / FONT STRATEGIST Web typography Font optimisation Typography strategy @webmatter_it Giulia Laco 2019©GiuliaLaco
  4. 4. DEFINIZIONE 2019©GiuliaLaco VARIABLE FONTS
  5. 5. JasonPamental https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/
  6. 6. PREMESSA 2019©GiuliaLaco
  7. 7. Definizioni TYPEFACE FONTCarattere tipografico Singolo file 2019©GiuliaLaco TYPEFACEFAMILY Famiglia di caratteri tipografici
  8. 8. EVOLUZIONE TYPEFAMILIESFamiglie di caratteri tipografici 2019©GiuliaLaco tondo vs. corsivo (italic) tipi differentiinizio 1500 1700 abbiamo famiglie allargate (condesed, extended) 1900 prime famiglie di caratteri (abbinamento del corsivo al tondo)
  9. 9. TERMINOLOGIA ITALIANO 2019©GiuliaLaco ENGLISH STRETTISSIMO STRETTO NORMALE LARGO LARGHISSIMO COMPRESSED CONDENSED REGULAR OR MEDIUM WIDE EXTENDED CHIARISSIMO CHIARO NORMALE NERETTO NERO NERISSIMO EXTRA LIGHT LIGHT OR THIN REGULAR OR MEDIUM SEMIBOLD BOLD EXTRA BOLD OR BLACK larghezza carattere peso carattere
  10. 10. CHIHAVOLUTO iVARIABLEFONTS? 2019©GiuliaLaco
  11. 11. VARIABLEFONTS OpenTypeFontVariations 2019©GiuliaLaco ATypI,settembre2016
  12. 12. SUPPORTODEIBROWSER 2019©GiuliaLaco
  13. 13. Variable Fonts SUPPORTO DEIBROWSER(FONTECANIUSE) 9,54% Marzo2018 2019©GiuliaLaco
  14. 14. Variable Fonts SUPPORTO DEIBROWSER(FONTECANIUSE) 70,94% Ottobre2018 2019©GiuliaLaco
  15. 15. Variable Fonts SUPPORTO DEIBROWSER(FONTECANIUSE) 78,26% Marzo2019 2019©GiuliaLaco
  16. 16. COS’èUNVARIABLEFONT? 2019©GiuliaLaco
  17. 17. DISTINZIONE FONT VARIABILE 2019©GiuliaLaco FONTSTATICO OpenType 1.8 (con tabelle aggiuntive delle variazioni) OpenType TTFOTF WOFF WOFF2 -30%
  18. 18. DEFINIZIONE 2019©GiuliaLaco Un font variabile è un singolo file di font che si comporta come più font* * «A variable font is a single font file that behaves like multiple fonts.» —John Hudson, Sept. 2016
  19. 19. DIFFERENZE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html ) FILE
  20. 20. DIFFERENZE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE Typeface VF Typeface Roman Typeface Bold Typeface Italic Typeface Bold Italic … (Typeface Italic VF) FILE
  21. 21. GLIASSIDIVARIAZIONE 2019©GiuliaLaco
  22. 22. 2019©GiuliaLaco https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369 ASSIDIVARIAZOINE VARIABLEFONTS
  23. 23. ASSIDIVARIAZOINE ASSIPERSONALIZZATIASSIREGISTRATI CUSTOM AXESREGISTERED AXES VARIABLEFONTS wght wdth ital slnt opsz XHGH GRAD COSA BOHH MAHH 2019©GiuliaLaco
  24. 24. ASSIREGISTRATI 2019©GiuliaLaco
  25. 25. PESO VARIABLEFONTS 2019©GiuliaLaco Nunito asse peso 54 156 wght
  26. 26. CSS VARIABLEFONTS 2019©GiuliaLaco Nunito wght 1ASSE
  27. 27. CSS VARIABLEFONTS 2019©GiuliaLaco Usare la proprietà di basso livello in attesa di CSS4 Font Module font-variation-settings
  28. 28. PESO&LARGHEZZA VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse peso asselarghezza wght wdth 38 250 40160
  29. 29. CSS VARIABLEFONTS 2019©GiuliaLaco wght wdth Amstelvar Alpha 2ASSI
  30. 30. PESO&LARGHEZZA VARIABLEFONTS 2019©GiuliaLaco Cabin VF Beta asse peso asselarghezza* wght wdth 95 128 1000 * l’asse wdth qui sarebbe meglio descritto come asse di compressione
  31. 31. CSS VARIABLEFONTS 2019©GiuliaLaco wght wdth Cabin VF Beta 2ASSI
  32. 32. OPTICAl-SIZE VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse optical-size 10 72 opsz
  33. 33. METALTYPE 2019©GiuliaLaco OPTICALSIZE https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/
  34. 34. FONTEDIMENSIONI 2019©GiuliaLaco OPTICALSIZE https://www.myfonts.com/fonts/positype/scotch/https://www.webtype.com/https://dashboard.typography.com/user-guide/choosing-fonts
  35. 35. 2019©GiuliaLaco asse optical-size + CSS font-size
  36. 36. OPTICAl-SIZE VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse optical-size 10 72 opsz
  37. 37. CSS VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha 3ASSI wght wdth opsz
  38. 38. ITALIC VARIABLEFONTS 2019©GiuliaLaco Bree serif asse del corsivo 0 1 ital AaGg AGga AaGg AaGgTimes New Roman
  39. 39. INTERPOLAZIONE Imagehttps://www.alphabettes.org/responsive-variable-fonts/ …elacompatibilitàdipunti.
  40. 40. INTERPOLAZIONE Perunacorrettainterpolazionefra diversitracciatioccorreavereuna compatibilitàdipunti. Nonnecessariamenteciòsiverifica fraduestilidifonttradizionalmente inseritinellastessafamiglia tipografica. 2019©GiuliaLaco
  41. 41. ITALIC&SLANT VARIABLEFONTS 2019©GiuliaLaco asse corsivo ital asse inclinazione slnt + Roslindale Variable Italic
  42. 42. ASSIPERSONALIZZATI 2019©GiuliaLaco
  43. 43. >64.000 2019©GiuliaLaco GLI ASSI DI VARIAZIONE POSSIBILI
  44. 44. RicardoMagalhães https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497
  45. 45. DavidJonathanRoss:https://djr.com/notes/first-variable-font/
  46. 46. DavidJonathanRoss:https://djr.com/notes/first-variable-font/
  47. 47. https://create.adobe.com/2018/5/22/variable_fonts_are_t.html
  48. 48. 2019©GiuliaLaco
  49. 49. 2019©GiuliaLaco Lo voglio di un bel VERDE SOFFICE. Non un verde-blu come le uova del pettirosso, ma neppure un verde-giallastro come i boccioli del narciso. Ora l’unico campione che ho qui è un po’ troppo giallo, ma non vorrei che si andasse all’estremo opposto e si facesse troppo blu. Dovrebbe essere una specie di giallo-verde-grigiastro.
  50. 50. 2019©GiuliaLaco Continua per altre quattro stanze
  51. 51. 2019©GiuliaLaco Hai preso nota? Verde, blu, giallo, rosso e bianco
  52. 52. LEISTANZE 2019©GiuliaLaco
  53. 53. LEISTANZE VARIABLEFONTS 2019©GiuliaLaco Lesceltedichiseneintende(itypedesigner)
  54. 54. https://www.axis-praxis.org/
  55. 55. https://www.axis-praxis.org/
  56. 56. IVANTAGGI VARIABLE FONTS 2019©GiuliaLaco
  57. 57. PERFORMANCE 2019©GiuliaLaco
  58. 58. 2019©GiuliaLaco Le «font variations» del formato OpenType 1.8 migliorano la performance di caricamento dei web font? DIPENDE!
  59. 59. PERFORMANCE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE PESO KB KB KB KB KB KB KB KB KB KB VARIABLEFONTS
  60. 60. PERFORMANCE 2019©GiuliaLaco Ricordatidi - utilizzare il formato fi compressione woff2 - valutare se fare il subsetting (licenza permettendo) - utilizzare buone pratiche di web font loading VARIABLEFONTS
  61. 61. OPTICALSIZE 2019©GiuliaLaco
  62. 62. 2019©GiuliaLaco
  63. 63. FINETUNING 2019©GiuliaLaco
  64. 64. ADATTAMENTOALLELINGUE 2019©GiuliaLaco
  65. 65. RESPONSIVE/FLUIDWEB 2019©GiuliaLaco
  66. 66. GLISVANTAGGI VARIABLE FONTS 2019©GiuliaLaco
  67. 67. LASCELTA 2019©GiuliaLaco
  68. 68. ILCOSTO 2019©GiuliaLaco
  69. 69. ILPOTENZIALECRIMINALEJ 2019©GiuliaLaco Criminitipografici
  70. 70. L’IMPLEMENTAZIONE 2019©GiuliaLaco VARIABLE FONTS
  71. 71. FALLBACK:FONTSTACK 2019©GiuliaLaco
  72. 72. FONTSTACK VARIABLEFONTS 2019©GiuliaLaco font-family: “Typeface VF”, “Typeface”, Helvetica, sans-serif; Static webfont websafe system font Variable webfont default system font (generic name) NO
  73. 73. FONTSTACK VARIABLEFONTS 2019©GiuliaLaco body { font-family: “Typeface”, sans-serif; } @supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } Feature query
  74. 74. @FONT-FACE 2019©GiuliaLaco
  75. 75. @FONT-FACE VARIABLEFONTS 2019©GiuliaLaco @font-face { font-family: “Typeface VF”; src: url(‘Typeface_VF.woff2') format('woff2-variations'), /* il prossimo standard, ora per Safari */ url(‘Typeface_VF.woff2') format('woff2'); /* per gli altri browser che supportano i VF*/ } @font-face { font-family: “Typeface”; src: url(‘Typeface_Regular.woff2') format('woff2'); } @font-face { font-family: “Typeface”'; src: url(‘Typeface_Bold.woff2') format('woff2'); font-weight: 700; }
  76. 76. DOVELITROVO? 2019©GiuliaLaco
  77. 77. DOVELITROVO? 2019©GiuliaLaco • CREATIVECLOUDDIADOBE • GOOGLEFONTSEARLYACCESS • DISTRIBUTORIDIFONT • FONDERIEINDIPENDENTI • Chiediallatuafonderiadifiducia VARIABLEFONTS
  78. 78. DOVELITROVO? 2019©GiuliaLaco GOOGLEFONTSEARLYACCESS @import url(https://fonts.googleapis.com/earlyaccess/cabinvfbeta.css); @import url(https://fonts.googleapis.com/earlyaccess/amstelvaralpha.css); @import url(https://fonts.googleapis.com/earlyaccess/nunitovfbeta.css); VARIABLEFONTS
  79. 79. STRUMENTI 2019©GiuliaLaco
  80. 80. STRUMENTI 2019©GiuliaLaco axis-praxis.org VARIABLEFONTS
  81. 81. STRUMENTI 2019©GiuliaLaco v-fonts.com VARIABLEFONTS
  82. 82. STRUMENTI 2019©GiuliaLaco play.typedetail.com VARIABLEFONTS
  83. 83. STRUMENTI 2019©GiuliaLaco wakamaifondue.com VARIABLEFONTS
  84. 84. STRUMENTI 2019©GiuliaLaco typetura.com VARIABLEFONTS typetura.js
  85. 85. 2019©GiuliaLaco RESPONSIVE FLUID FLUID(LIQUID)
  86. 86. 2019©GiuliaLaco RESPONSIVE WEBTYPOGRAPHY FLUID WEBTYPOGRAPHY
  87. 87. 2019©GiuliaLaco BREAKPOINTS KEYFRAMES
  88. 88. TYPETURA 2019©GiuliaLaco KEYFRAMES mappati su qualcosa di diverso dal TEMPO BROWSER WIDTH “All the JavaScript does is write the width as a CSS variable and package the static CSS assets. ” –– Scott Kellum design fluido basato sui fotogrammi chiave cursor position scroll depth device orientation animation: var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;
  89. 89. LEPOTENZIALITÀ 2019©GiuliaLaco VARIABLE FONTS
  90. 90. INTERFACCEMULTIMEDIALI 2019©GiuliaLaco
  91. 91. 2019©GiuliaLaco INPUT VARIABLEFONTS Movimento del telefono WEIGHT WIDTH ASSIDIVARIAZIONE:
  92. 92. 2019©GiuliaLaco INPUT VARIABLEFONTS Audio WEIGHT WIDTH ASSIDIVARIAZIONE: A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr
  93. 93. 2019©GiuliaLaco INPUT VARIABLEFONTS Pressione WEIGHT ASSIDIVARIAZIONE: ?
  94. 94. ADATTAMENTOALL’AMBIENTE 2019©GiuliaLaco
  95. 95. 2019©GiuliaLaco L’asseGRADE VARIABLEFONTS
  96. 96. L’asseGRADE Gliassidivariazione https://www.axis-praxis.org/
  97. 97. L’asseGRADE Gliassidivariazione https://www.axis-praxis.org/
  98. 98. 2019©GiuliaLaco INPUT VARIABLEFONTS Luce ambiente GRADE ASSEDIVARIAZIONE:
  99. 99. 2019©GiuliaLaco INPUT VARIABLEFONTS Distanza dallo schermo GRADE?, X-HEIGHT ASSIDIVARIAZIONE: ?
  100. 100. NUOVIAMBIENTI 2019©GiuliaLaco
  101. 101. 2019©GiuliaLaco INPUT VARIABLEFONTS Camera, dati, etc. Assi prospettici? ASSIDIVARIAZIONE: FONTPERLAREALTÀVIRTUALEOAUMENTATA Alessia Nicotra e Bruno Maag Kerning conference, Faenza 8 giugno 2018
  102. 102. INFOGRAFICHE 2019©GiuliaLaco
  103. 103. 2019©GiuliaLaco INPUT VARIABLEFONTS Big Data WEIGHT SLANT ASSIDIVARIAZIONE: A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr
  104. 104. ANIMAZIONI(semantiche?) 2019©GiuliaLaco
  105. 105. ACCESSIBILITà, BISOGNIPARTICOLARI 2019©GiuliaLaco
  106. 106. ESPRESSIVITà 2019©GiuliaLaco
  107. 107. 2019©GiuliaLaco ESPRESSIVITà VARIABLEFONTS Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter attivo statico calmoansioso suono suono suono suono suono
  108. 108. 2019©GiuliaLaco ESPRESSIVITà VARIABLEFONTS Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter Vai a dormire Pensa Calmati Ridi Svegliati Agisci ora +calma+energia
  109. 109. @webmatter_it giulialaco giulia.laco SEGUIMI e segnalami i tuoi esperimenti con i VF GRAZIEPERL’ATTENZIONE ISCRIVITI ALLA NEWSLETTER lascia la tua mail per aggiornamenti
  110. 110. FEEDBACK https://joind.in/talk/c7c27
  111. 111. Buon typesetting 2019©GiuliaLaco
  112. 112. BALBOA PLUS FILL BalboaCondesed BalboaExtraCondesed Balboa UltraLight Balboa Light Balboa Medium Balboa Bold Balboa ExtraBold Balboa Black Balboa ExtraBlack CarlMarxregular CarlMarxbold Bree serif regular Bree serif italic

×