IL FUTURO DELLA TIPOGRAFIA È GIÀ COMINCIATO

Transcript

1 GIULIA LACO VARIABLE FONTS IL FUTURO DELLA TIPOGRAFIA È GIÀ COMINCIATO 15 marzo 2019 FAENZA (RA)

2 #CSSday #CSSday19

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 Giulia

4 VARIABLE FONTS DEFINIZIONE

5 Jason Pamental

6 PREMESSA

7 Definizioni TYPEFACE Carattere tipografico FONT Singolo file TYPEFACE FAMILY Famiglia di caratteri tipografici

8 EVOLUZIONE TYPE FAMILIES Famiglie di caratteri tipografici inizio tondo vs. corsivo (italic) tipi differenti prime famiglie di caratteri (abbinamento del corsivo al tondo) abbiamo famiglie allargate (condesed, extended)

9 TERMINOLOGIA ITALIANO STRETTISSIMO STRETTO NORMALE LARGO LARGHISSIMO CHIARISSIMO CHIARO NORMALE NERETTO NERO NERISSIMO larghezza carattere peso carattere ENGLISH COMPRESSED CONDENSED REGULAR OR MEDIUM WIDE EXTENDED EXTRA LIGHT LIGHT OR THIN REGULAR OR MEDIUM SEMIBOLD BOLD EXTRA BOLD OR BLACK

10 CHI HA VOLUTO i VARIABLE FONTS?

11 OpenType Font Variations VARIABLE FONTS ATypI, settembre 2016

12 SUPPORTO DEI BROWSER

13 SUPPORTO DEI BROWSER (FONTE CAN I USE) Variable Fonts Marzo ,54%

14 SUPPORTO DEI BROWSER (FONTE CAN I USE) Variable Fonts Ottobre ,94%

15 SUPPORTO DEI BROWSER (FONTE CAN I USE) Variable Fonts Marzo ,26%

16 COS è UN VARIABLE FONT?

17 DISTINZIONE FONT STATICO OpenType FONT VARIABILE OTF TTF WOFF WOFF2-30% OpenType 1.8 (con tabelle aggiuntive delle variazioni)

18 DEFINIZIONE 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 DIFFERENZE FILE FONT STATICI FONT VARIABILE HT to Oliver Schöndorfer ( )

20 DIFFERENZE FILE FONT STATICI Typeface Roman Typeface Bold Typeface Italic Typeface Bold Italic FONT VARIABILE Typeface VF (Typeface Italic VF)

21 GLI ASSI DI VARIAZIONE

22 VARIABLE FONTS ASSI DI VARIAZOINE

23 VARIABLE FONTS ASSIDI VARIAZOINE ASSI REGISTRATI REGISTERED AXES wght wdth opsz ital slnt ASSI PERSONALIZZATI CUSTOM AXES GRAD XHGH MAHH BOHH COSA

24 ASSI REGISTRATI

25 PESO VARIABLE FONTS wght asse peso Nunito

26 1 ASSE CSS VARIABLE FONTS wght Nunito

27 CSS VARIABLE FONTS font-variation-settings Usare la proprietà di basso livello in attesa di CSS4 Font Module

28 VARIABLE FONTS PESO & LARGHEZZA wdth asse larghezza wght asse peso Amstelvar Alpha

29 CSS VARIABLE FONTS wght wdth 2 ASSI Amstelvar Alpha

30 VARIABLE FONTS PESO & LARGHEZZA wdth asse larghezza* wght asse peso Cabin VF Beta * l asse wdth qui sarebbe meglio descritto come asse di compressione

31 CSS VARIABLE FONTS wght wdth 2 ASSI Cabin VF Beta

32 VARIABLE FONTS OPTICAl-SIZE opsz asse optical-size Amstelvar Alpha

33 OPTICAL SIZE METAL TYPE

34 OPTICAL SIZE FONT E DIMENSIONI

35 asse optical-size + CSS font-size

36 VARIABLE FONTS OPTICAl-SIZE opsz asse optical-size Amstelvar Alpha

37 3 ASSI CSS VARIABLE FONTS wght wdth opsz Amstelvar Alpha

38 ITALIC VARIABLE FONTS ital 0 1 asse del corsivo Bree serif AaGg AGga Times New Roman AaGg AaGg

39 INTERPOLAZIONE e la compatibilità di punti. Image

40 INTERPOLAZIONE Per una corretta interpolazione fra diversi tracciati occorre avere una compatibilità di punti. Non necessariamente ciò si verifica fra due stili di font tradizionalmente inseriti nella stessa famiglia tipografica.

41 VARIABLE FONTS ITALIC & SLANT ital asse corsivo + slnt asse inclinazione RoslindaleVariable Italic

42 ASSI PERSONALIZZATI

43 GLI ASSI DI VARIAZIONE POSSIBILI >

44 Ricardo Magalhães

45 David Jonathan Ross:

46 David Jonathan Ross:

47

48

49 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 Continua per altre quattro stanze

51 Hai preso nota? Verde, blu, giallo, rosso e bianco

52

53 LE ISTANZE

54 VARIABLE FONTS LE ISTANZE Le scelte di chi se ne intende (i type designer)

55

56

57 VARIABLE FONTS I VANTAGGI

58 PERFORMANCE

59 Le «font variations» del formato OpenType 1.8 migliorano la performance di caricamento dei web font? DIPENDE!

60 VARIABLE FONTS PERFORMANCE PESO FONT STATICI KB KB KB KB KB KB KB KB KB FONT VARIABILE KB

61 VARIABLE FONTS PERFORMANCE Ricordati di - utilizzare il formato fi compressione woff2 - valutare se fare il subsetting (licenza permettendo) - utilizzare buone pratiche di web font loading

62 OPTICAL SIZE

63

64 FINE TUNING

65 ADATTAMENTO ALLE LINGUE

66 RESPONSIVE / FLUID WEB

67 VARIABLE FONTS GLI SVANTAGGI

68 LA SCELTA

69 IL COSTO

70 IL POTENZIALE CRIMINALE J Crimini tipografici

71 VARIABLE FONTS L IMPLEMENTAZIONE

72 FALLBACK: FONT STACK

73 VARIABLE FONTS FONT STACK font-family: Typeface VF, Typeface, Helvetica, sans-serif; Variable webfont Static webfont websafe system font default system font (generic name) NO

74 VARIABLE FONTS FONT STACK Feature query body { font-family: Typeface, sans-serif; (font-variation-settings: normal) { body { font-family: Typeface VF, sans-serif; } }

75 @FONT-FACE

76 { 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-family: Typeface ; src: url( Typeface_Regular.woff2') format('woff2'); { font-family: Typeface '; src: url( Typeface_Bold.woff2') format('woff2'); font-weight: 700; }

77 DOVE LI TROVO?

78 VARIABLE FONTS DOVE LI TROVO? CREATIVE CLOUD DI ADOBE GOOGLE FONTS EARLY ACCESS DISTRIBUTORI DI FONT FONDERIE INDIPENDENTI Chiedi alla tua fonderia di fiducia

79 VARIABLE FONTS DOVE LI TROVO? GOOGLE FONTS EARLY url(

80 STRUMENTI

81 VARIABLE FONTS STRUMENTI axis-praxis.org

82 VARIABLE FONTS STRUMENTI v-fonts.com

83 VARIABLE FONTS STRUMENTI play.typedetail.com

84 VARIABLE FONTS STRUMENTI wakamaifondue.com

85 VARIABLE FONTS STRUMENTI typetura.com typetura.js

86 FLUID(LIQUID) RESPONSIVE FLUID

87 RESPONSIVE WEB TYPOGRAPHY FLUID WEB TYPOGRAPHY

88 BREAKPOINTS KEYFRAMES

89 TYPETURA design fluido basato sui fotogrammi chiave KEYFRAMES mappati su qualcosa di diverso dal TEMPO BROWSER WIDTH scroll depth cursor position device orientation animation: var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused; All the JavaScript does is write the width as a CSS variable and package the static CSS assets. Scott Kellum

90 VARIABLE FONTS LE POTENZIALITÀ

91 INTERFACCE MULTIMEDIALI

92 VARIABLE FONTS INPUT Movimento del telefono ASSI DI VARIAZIONE: WEIGHT WIDTH

93 VARIABLE FONTS INPUT Audio ASSI DI VARIAZIONE: WEIGHT WIDTH A pen by Peter Barr

94 VARIABLE FONTS INPUT Pressione? ASSI DI VARIAZIONE: WEIGHT

95 ADATTAMENTO ALL AMBIENTE

96 VARIABLE FONTS L asse GRADE

97 Gli assi di variazione L asse GRADE

98 Gli assi di variazione L asse GRADE

99 VARIABLE FONTS INPUT Luce ambiente ASSE DI VARIAZIONE: GRADE

100 VARIABLE FONTS INPUT Distanza dallo schermo ASSI DI VARIAZIONE:? GRADE?, X-HEIGHT

101 NUOVI AMBIENTI

102 VARIABLE FONTS INPUT Camera, dati, etc. FONT PER LA REALTÀ VIRTUALE O AUMENTATA ASSI DI VARIAZIONE: Assi prospettici? Alessia Nicotra e Bruno Maag Kerning conference, Faenza 8 giugno 2018

103 INFOGRAFICHE

104 VARIABLE FONTS INPUT Big Data ASSI DI VARIAZIONE: WEIGHT SLANT A pen by François Poizet

105 ANIMAZIONI (semantiche?)

106 ACCESSIBILITà, BISOGNI PARTICOLARI

107 ESPRESSIVITà

108 VARIABLE FONTS ESPRESSIVITà Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter suono suono suono suono suono calmo ansioso attivo statico

109 VARIABLE FONTS ESPRESSIVITà Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter Agisci ora Svegliati Ridi Pensa Calmati Vai a dormire + calma + energia

110 GRAZIE PER L ATTENZIONE SEGUIMI e segnalami i tuoi esperimenti con i giulialaco giulia.laco ISCRIVITI ALLA NEWSLETTER lascia la tua mail per aggiornamenti

111 FEEDBACK

112 Buon typesetting

113 BALBOA PLUS FILL Balboa Condesed Balboa ExtraCondesed Balboa UltraLight Balboa Light Balboa Medium Balboa Bold Balboa ExtraBold Balboa Black Balboa ExtraBlack Carl Marx regular Carl Marx bold Bree serif regular Bree serif italic