RWType Venezia 1

RWT
RESPONSIVE WEB TYPOGRAPHY
Sistemi di elaborazione dell’informazione

a.a. 2012-2013
1
una pagina HTML d’esempio
o
index.html 2
fino a qualche tempo fa (CSS1),
le possibilità relative alla tipografia web
erano piuttosto limitate
3
font stack
body {
font-family: Verdana, Arial, sans-serif;
o
type01.css 4
risorse per i font stacks
‣ http://cssfontstack.com/
‣ http://unitinteractive.com/blog/2008/06/26/better-css-font-
stacks/
‣ http://coding.smashingmagazine.com/2009/09/22/
complete-guide-to-css-font-stacks/
‣ http://www.awayback.com/revised-font-stack/
5
font size
body {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
o
type01.css 6
parentesi scomoda
sulle unità di misura
7
parentesi “scomoda” sulle unità di misura
1. Si possono utilizzare i pixel, che sono una misura fissa.
2. Si possono utilizzare le percentuali, che sono una misura

relativa.
3. Si possono utilizzare gli ems, che sono una misura relativa.
8
Usare i pixel potrebbe dare problemi ai lettori che vogliano

ridimensionare il testo.
Perciò si preferisce non usare i pixel.
9
Percentuale e ems non presentano differenze, se non per il

fatto che gli ems sono nati appositamente per la tipografia.
Solitamente, quindi, si usano gli ems.
10
Gli ems sono relativi alla misura base del font di un browser,
che di solito è 16px.
1em = 100% = 16px
o
ems-explanation.html 11
<body>
<header> ... </header>
<nav> ... </nav>
<article> ... </article>
<footer> ... </footer>
</body>
body {font-size: 100%}

header {font-size: 1em}
nav {font-size: 1.2em}
article {font-size: 1em}
footer {font-size: 0.9em}
o
body {font-size: 100%}
Significa che la base di partenza è 16px. Per calcolare tutte le

altre misure, è sufficiente usare questa formula:
target ÷ context = result

14 ÷ 16 = 0.875em;
Oppure questo strumento: http://pxtoem.com/
13
body {font-size: 62.5%}
Significa che la base di partenza è 10px, che rende le cose

semplici per fare i conti:
10px = 1em;
14px = 1.4em;
etc...
14
Gli ems, però, sono anche relativi alla misura del font del loro
contenitore, quindi la faccenda si complica.
o
altri controlli
p {
color: brown;
line-height: 1.5em;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;
font-style: italic;
16
CSS1
dimensioni, colore, peso, stile, interlinea...
... e poco altro
17
css2!
18
con l’avvento di CSS2, viene introdotta
la proprietà @font-face,
che permette l’inclusione di altri font
nel design di un sito
19
se prima era necessario che il font fosse
installato sulla macchina del visitatore
per una corretta visualizzazione,
ora non è più così
20
BROWSER EOT TTF WOFF
embedded open type true type font web open font format
Firefox (<=3.5) %
Firefox (<=3.6) %
Opera %
Chrome %
Safari %
IE %
21
@font-face
@font-face {
font-family: 'font_name';
src: url(font_name.eot);
src: local('☺'), url('font_name.ttf') format('truetype');
o
type01.css 22
http://www.fontsquirrel.com/fontface
23
css3!
24
rems
(tanto per complicare un po’ di più le cose)
È una misura relativa come l’em, ma non è relativo al

contenitore dell’elemento, bensì all’elemento html - e quindi
alla radice del documento.
Non è più necessario, quindi, preoccuparsi dell’inclusione

degli elementi in altri elementi, come per gli ems.
o
main.css 25
l’avvento del design responsivo
richiede un approccio diverso
a molte questioni
26
iPad portrait - iPad landscape
http://blog.responsivenews.co.uk/post/13925578846/fluid-grids-orientation-resolution-independence
27
Galaxy Tab 10.1 portrait - Galaxy Tab 10.1 landscape
http://blog.responsivenews.co.uk/post/13925578846/fluid-grids-orientation-resolution-independence
28
la griglia e le immagini rispondono
al cambiamento del viewport,
ma il testo no
29
30
dimensioni
(in realtà questo vale anche per un design non responsivo)
Non è una scelta “personale” - ma dipende dalla distanza di

lettura.
31
http://informationarchitects.net/blog/responsive-typography-the-basics/
Più lontano è il testo, più grande deve essere il font.
32
http://informationarchitects.net/blog/responsive-typography-the-basics/
Solitamente, un iPad viene tenuto più lontano dell’iPhone:

il testo deve essere più grande.
33
http://informationarchitects.net/blog/100e2r/
Se compariamo un testo stampato con il testo di un sito,

noteremo che spesso la grandezza è la stessa.
Considerando che il monitor dovrebbe essere tenuto più distante,
la grandezza dei font dei siti è troppo piccola.
34
oltre alla distanza di lettura, c’è anche
il fattore relativo alla larghezza del
contenitore del testo
35
dimensioni - line length
“Anything from 45 to 75 characters is

widely regarded as a satisfactory length of
line for a single-column page set in a
serifed text face in a text size. The 66-
character line (counting both letters and
spaces) is widely regarded as ideal. For
multiple column work, a better average is
40 to 50 characters.”
-Robert Bringhurst
36
dimensioni - line length
http://www.pearsonified.com/typography/
Consente di calcolare dimensioni e interlinea ad hoc secondo

la larghezza e i CPL desiderati.
37
dimensioni - grades
Un altro metodo è utilizzare i gradi tipografici, che sono come

i pesi, ma con differenze infinitesimali.
Ad esempio: Regular (-) | Regular | Regular (+)
Questo permette un controllo maggiore sui diversi dispositivi:

diversi gradi per diverse dimensioni e diverse risoluzioni.
38
cronicle, Hoefler & Frere-Jones
39
mercury, Hoefler & Frere-Jones
40
con CSS3, oltre @font-face, si estendono
i servizi che consentono l’inclusione
di nuovi font nei siti
41
‣ Google Web Fonts (http://www.google.com/webfonts)
‣ Typekit (https://typekit.com/)
‣ Fontdeck (http://fontdeck.com/)
‣ Fontspring (http://www.fontspring.com/)
‣ Webtype (http://www.webtype.com/)
42
fioriscono anche librerie Javascript che
consentono un migliore e maggiore
controllo su aspetti di microtipografia
43
fittext.js
http://fittextjs.com/
https://github.com/davatron5000/FitText.js
Un esempio: http://trentwalton.com/2011/05/10/fit-to-scale/
44
lettering.js
http://letteringjs.com/
https://github.com/davatron5000/Lettering.js
Qualche esempio:
‣ http://trentwalton.com/2011/11/18/workspace/
‣ http://trentwalton.com/2011/09/20/unitasking/
‣ http://www.strangenative.com/foldup/
45
risorse
46
‣ The elements of typographic style applied to the web (http://
webtypography.net/toc/)
‣ Thinking with type (http://www.thinkingwithtype.com)
‣ Create a mobile-first responsive web design (http://

www.html5rocks.com/en/mobile/responsivedesign/)
47
strumenti
48
strumenti: estensioni per chrome
‣ WhatFont (http://tinyurl.com/9bhjone)
‣ Google Font Previewer (http://tinyurl.com/ajvpkoc)
49
strumenti: siti
‣ Typekit (https://typekit.com/)
‣ Typecast (http://typecast.com/)
‣ Golden Ratio Typography Calculator (http://www.pearsonified.com/

typography/)
‣ Google Web Fonts (http://www.google.com/webfonts#ChoosePlace:select)
‣ Font squirrel (http://www.fontsquirrel.com/)
‣ Px to em (http://pxtoem.com)
50
ispirazione
51
‣ Trent Walton (http://trentwalton.com)
‣ Mark Boulton (http://www.markboulton.co.uk)
‣ A working library (http://aworkinglibrary.com)
‣ Information Architects (http://informationarchitects.net/)
52

RWType Venezia 1

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

RWType Venezia 1

Caricato da

Copyright:

Formati disponibili

RWT

RESPONSIVE WEB TYPOGRAPHY

Sistemi di elaborazione dell’informazione

font-family: Verdana, Arial, sans-serif;

font-family: Verdana, Arial, sans-serif;

1. Si possono utilizzare i pixel, che sono una misura fissa.

2. Si possono utilizzare le percentuali, che sono una misura

3. Si possono utilizzare gli ems, che sono una misura relativa.

Usare i pixel potrebbe dare problemi ai lettori che vogliano

Perciò si preferisce non usare i pixel.

Percentuale e ems non presentano differenze, se non per il

Solitamente, quindi, si usano gli ems.

1em = 100% = 16px

body {font-size: 100%}

body {font-size: 100%}

Significa che la base di partenza è 16px. Per calcolare tutte le

target ÷ context = result

Oppure questo strumento: http://pxtoem.com/

body {font-size: 62.5%}

Significa che la base di partenza è 10px, che rende le cose

(tanto per complicare un po’ di più le cose)

È una misura relativa come l’em, ma non è relativo al

Non è più necessario, quindi, preoccuparsi dell’inclusione

(in realtà questo vale anche per un design non responsivo)

Non è una scelta “personale” - ma dipende dalla distanza di

Più lontano è il testo, più grande deve essere il font.

Solitamente, un iPad viene tenuto più lontano dell’iPhone:

Se compariamo un testo stampato con il testo di un sito,

“Anything from 45 to 75 characters is

Consente di calcolare dimensioni e interlinea ad hoc secondo

Un altro metodo è utilizzare i gradi tipografici, che sono come

Ad esempio: Regular (-) | Regular | Regular (+)

Questo permette un controllo maggiore sui diversi dispositivi:

‣ Thinking with type (http://www.thinkingwithtype.com)

‣ Create a mobile-first responsive web design (http://

‣ Google Font Previewer (http://tinyurl.com/ajvpkoc)

‣ Golden Ratio Typography Calculator (http://www.pearsonified.com/

‣ Google Web Fonts (http://www.google.com/webfonts#ChoosePlace:select)

‣ Font squirrel (http://www.fontsquirrel.com/)

‣ Mark Boulton (http://www.markboulton.co.uk)

‣ A working library (http://aworkinglibrary.com)

‣ Information Architects (http://informationarchitects.net/)

Potrebbero piacerti anche