Dicono che il web design sia al 95% tipografia, e questo è senz’altro ancor più vero oggi rispetto a quanto non fosse dieci anni fa. In questo talk vorrei fare un po’ di luce sull’argomento, illustrando le regole base per una tipografia efficace, e quali sono gli strumenti per poterle mettere in pratica al meglio sviluppando un tema WordPress.
La tipografia e i web font nei siti web [#wcvrn18]Giulia Laco
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.
FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sitoMirko Ciesco
In queste slide presentate al Meetup "Turin Web Performance Group" verranno affrontate le principali problematiche riscontrate con l’utilizzo di font esterni (come ad esempio Google Fonts) e verranno esposte le possibili soluzioni per migliorare le prestazioni di caricamento.
Per maggiori info: www.mirkociesco.it
[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.
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013Mattia Compagnucci
I caratteri tipografici sono ovunque, ci accompagnano silenziosi in ogni momento della giornata, sono protagonisti dei nostri progetti Wordpress insieme alle immagini, e ne possono decretare il successo o l'insuccesso.
Come scegliere il giusto carattere, come utilizzarlo in maniera efficace e quali strumenti abbiamo a nostra disposizione. Un viaggio nella tipografia e il suo sviluppo all'interno dei nostri progetti che ci farà capire come un buon uso dei caratteri tipografici può fare veramente la differenza.
Perché è ancora importante parlaredi tipografia e caratteri?
La tipografia, ieri. Dal movable typesetting al digital typesetting.
La tipografia, domani Open Type 1.8 e le Font Variations.
Seminario di ACSG tenuto da Stefano Torregrossa
MAR 13 MARZO 2018, 19:00 – 20:30 CET
Presso: Auditorium Pavoni presso Istituto Pavoniano Artigianelli
La tipografia e i web font nei siti web [#wcvrn18]Giulia Laco
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.
FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sitoMirko Ciesco
In queste slide presentate al Meetup "Turin Web Performance Group" verranno affrontate le principali problematiche riscontrate con l’utilizzo di font esterni (come ad esempio Google Fonts) e verranno esposte le possibili soluzioni per migliorare le prestazioni di caricamento.
Per maggiori info: www.mirkociesco.it
[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.
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013Mattia Compagnucci
I caratteri tipografici sono ovunque, ci accompagnano silenziosi in ogni momento della giornata, sono protagonisti dei nostri progetti Wordpress insieme alle immagini, e ne possono decretare il successo o l'insuccesso.
Come scegliere il giusto carattere, come utilizzarlo in maniera efficace e quali strumenti abbiamo a nostra disposizione. Un viaggio nella tipografia e il suo sviluppo all'interno dei nostri progetti che ci farà capire come un buon uso dei caratteri tipografici può fare veramente la differenza.
Perché è ancora importante parlaredi tipografia e caratteri?
La tipografia, ieri. Dal movable typesetting al digital typesetting.
La tipografia, domani Open Type 1.8 e le Font Variations.
Seminario di ACSG tenuto da Stefano Torregrossa
MAR 13 MARZO 2018, 19:00 – 20:30 CET
Presso: Auditorium Pavoni presso Istituto Pavoniano Artigianelli
Corso rivolto alla comprensione delle caratteristiche di HTML, XHTML, CSS nel pieno rispetto degli standard e con consapevolezza della compatibilità cross-browser.
Presentazione resa al convegno “Tradurre: professione e formazione” svoltosi a Padova, il 6 aprile 2006, presso l'Università degli Studi di Padova, Aula Magna, Palazzo del Bo.
Introduction to SEO, based on the official document provided by Google: https://static.googleusercontent.com/media/www.google.com/it//intl/it/webmasters/docs/search-engine-optimization-starter-guide-it.pdf
Corso rivolto alla comprensione delle caratteristiche di HTML, XHTML, CSS nel pieno rispetto degli standard e con consapevolezza della compatibilità cross-browser.
Presentazione resa al convegno “Tradurre: professione e formazione” svoltosi a Padova, il 6 aprile 2006, presso l'Università degli Studi di Padova, Aula Magna, Palazzo del Bo.
Introduction to SEO, based on the official document provided by Google: https://static.googleusercontent.com/media/www.google.com/it//intl/it/webmasters/docs/search-engine-optimization-starter-guide-it.pdf
7. <font>
Supportato da tutti i browser, ma
deprecato in HTML5.
● Consente solo di specificare:
○ famiglia di caratteri
○ grandezza
○ colore
● Non consente di specificare varianti
di peso e stile
● Legge esclusivamente font di sistema
8. <font>
Supportato da tutti i browser, ma
deprecato in HTML5.
● Consente solo di specificare:
○ famiglia di caratteri
○ grandezza
○ colore
● Non consente di specificare varianti
di peso e stile
● Legge esclusivamente font di sistema
10. Cufón & sIFR
Tentativi di svincolarsi dall’uso
esclusivo dei font di sistema.
● Basati su Flash e JavaScript
● Poco o per niente accessibili
● Pesanti
11. Cufón & sIFR
Tentativi di svincolarsi dall’uso
esclusivo dei font di sistema.
● Basati su Flash e JavaScript
● Poco o per niente accessibili
● Pesanti
12. Un po’ di storia
<font>
1999
Cufon, sIFR
2008
@font-face
2009
13. @font-face
Supportata per prima da Firefox
3.5.
● CSS standard
● Legge diversi formati:
○ TrueType
○ OpenType
○ Web Open File Format
○ Web Open File Format 2
● È il modo migliore per utilizzare font
non di sistema sul Web.
● Ha portato alla creazione di tutto un
ecosistema di servizi che erogano
Webfont da utilizzare.
14. Un po’ di storia
<font>
1999
Cufon, sIFR
2008
@font-face
2009
?
2018
16. Licenze
Assicurarsi di poter utilizzare un
font è il primo passo per una buona
impostazione tipografica.
SIL Open Font License
https://it.wikipedia.org/wiki/SIL_Open_Font_License
Google Fonts
“...are published under licenses that allow you to use
them on any website, whether it’s commercial or
personal.”
Adobe Fonts
Possono ora essere utilizzati sia su Web, sia offline.
17. Utilizzare i
Webfont
Temi free e commerciali.
La maggior parte dei temi mette a disposizione
dell’utente strumenti per l’inclusione automatica di
font personalizzati.
18. Self-hosted
Il sorgente del font è ospitato nel
nostro stesso spazio Web.
Servizi esterni
Il sorgente del font è fornito da un
sito esterno.
20. Utilizzare i
Webfont
Come includere un font in una
pagina.
@import 'custom-font.css';
● Bene per progetti di cui si ha il pieno controllo (si
può ottimizzare il CSS),
● Non è possibile rimuovere il font se non
modificando il foglio di stile.
wp_enqueue_style( 'custom-font', $stylesheet_url );
● È possibile rimuovere la richiesta, qualora non si
volesse averla (dequeue).
● È possibile combinare la richiesta con un plugin di
caching.
21. Google Fonts
Servizio gratuito che permette l’inclusione
di un foglio di stile esterno:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,700i" rel="stylesheet">
22. Adobe Fonts
(Typekit)
Servizio a pagamento che permette l’inclusione
di un “font kit” legato ad un “progetto”,
completamente gestito tramite il sito di Adobe.
<link rel="stylesheet" href="https://use.typekit.net/<font-kit-ID>.css">
24. FOUT
Flash Of Unstyled Text
Richiesta del WebFont
Il WebFont è caricato
Il browser renderizza il testo
utilizzando il Webfont
}Il browser renderizza il testo utilizzando il
fallback specificato nella font stack.
https://meowni.ca/font-style-matcher/
25. FOIT
Flash Of Invisible Text
Richiesta del WebFont
Il WebFont è caricato
Il browser renderizza il testo
utilizzando il Webfont
}Il browser non renderizza il testo lasciando
uno spazio vuoto.
26. FOFT
Flash Of Faux Text
Richiesta della variante Roman del
WebFont
Il WebFont è caricato
Tutte le varianti sono caricate e il
browser renderizza il testo
}Il browser non renderizza il testo facendosi
carico di creare eventuali faux-bold, faux-
italic.
27. Soluzioni
Una soluzione è possibile
esclusivamente se si ha controllo
sul processo di caricamento.
WebFont Loader
https://github.com/typekit/webfontloader
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
},
fontactive: function(familyName, fvd) {
// Do stuff here...
},
fontinactive: function(familyName, fvd) {
// Do stuff here…
}
});
● Interfaccia unificata per caricare qualsiasi
WebFont
● Eventi per conoscere lo stato di caricamento di
tutti i font/un font specifico.
● Gestisce il concetto di “timeout”.
FontFace Observer
https://fontfaceobserver.com/
39. Scegliere
famiglie per il
contesto d’uso
Non esistono regole scritte. Anche
Comic Sans è un’ottima typeface,
se utilizzata nel contesto giusto.
● Titoli vs corpo del testo
○ Varianti di peso
○ Altezza (x-height) dei caratteri
● “Mood” della famiglia
● Set di caratteri
● Abbinamento con altre famiglie
https://www.reliablepsd.com/ultimat
e-google-font-pairings/
4
43. “Dumb quotes”
Le virgolette “da codice” non sono
quelle da usare scrivendo testo.
"Lorem ipsum"
“Lorem ipsum”
È possibile effettuare sostituzioni nel
testo automaticamente con la
funzione:
https://codex.wordpress.org/Functio
n_Reference/wptexturize
wptexturize( $text );
2
51. Variable fonts
Ogni font è esso stesso un vettore
di cui è possibile alterare le
proprietà.
Demo
https://developer.microsoft.com/en-us/microsoft-
edge/testdrive/demos/variable-fonts/
Playground
https://v-fonts.com/
53. Letture
consigliate
Per approfondire.
The Elements of Typographic Style
di Robert Bringhurst
http://webtypography.net/ – adattamento per il Web
curato da Richard Rutter
Thinking with type
di Ellen Lupton
http://thinkingwithtype.com
Butterick’s Practical Typography
https://practicaltypography.com/
A Book Apart Typography Essentials
https://abookapart.com/collections/typography-
essentials
Nella stampa a caratteri mobili, i caratteri erano blocchetti metallici disposti sul cosiddetto torchio tipografico. Una volta allineati la pagina era composta, veniva intinta in inchiostro e pressata su carta. Gutenberg, circa 1450.
modificare con “universale” evidenziando che oggi vanno tutti su woff2
Quando un font non è ancora caricato, si fa fallback sul successivo nella font stack.
Potenzialmente, può portare a problemi di layout.
Si nasconde interamente il testo, fintanto che il font non è stato caricato.
Nella condizione peggiore, può portare ad avere il contenuto permanentemente invisibile.
Si scarica solo la versione “Roman” del font, e lascio che sia il browser a fornire, temporaneamente, un “faux-bold” e “faux-italic”.