Esercizio 5: Tipografia

Keywords: fonts, testo, spazio, margine, padding

Esercizio precedente Esercizio successivo

Ripassiamo insieme:

La tipografia gioca un ruolo fondamentale nello sviluppo di siti web poiché determina lo stile visivo e la leggibilità del testo su una pagina web. Scegliere il carattere giusto, la giusta dimensione, il peso del font e altri elementi tipografici può influire notevolmente sull'esperienza dell'utente e sul design complessivo di un sito web. Una tipografia ben calcolata può rendere un sito web più coinvolgente e più facile da leggere.

Font

Nel dare le dimensioni che preferiamo ai font, è meglio usare em e rem.

font-family: specifica la famiglia di font che verranno applicati: di solito si indica un font primario, e poi dopo una virgola la famiglia di fallback
font-size: specifica la dimensione del font ^{vedi sotto}
font-weight: specifica il peso del font; ad es. normale, grassetto, leggero... ^{vedi sotto}
font-style: normal, italic, oblique, etc...
line-height: specifica la distanza tra ogni riga di testo;
font-stretch: condensa o espande un font (dipende dal font)
font-variant: specifica le varienti di font

Dimensioni

Unità assolute:

Pixels (px): valore statico, quanti pixel si specificano tanti si ottengono. Tuttavia, varia molto da browser a browser, e non è una metrica accessibile dato che non può essere modificata dal browser.

Unità relative:

Relative, ovvero dipendenti da una grandezza specificata altrove.

%: unità relativa; dipende dalla grandezza del font dell'elemento padre.
em: valore dinamico; è un moltiplicatore del valore specificato dall'elemento parent; altrimenti è 16 px di default. E.g. il body ha come font-size 20px, un p con 2em avrà una grandezza pari a 40px
rem: em relativi al root html.

Ci sono dei casi particolari, che vedremo insieme, per i quali è meglio usare la dimensione rem.

Viewport Units:

Le unità v- dipendono dalla grandezza della viewport (width o height); diversamente dalla dimensione espressa con %, non dipendono dall'elemento padre, ma dalle dimensioni della viewport.
vw: valori non negativi tra 0-100; ad esempio, 50vw significa metà della larghezza della viewport, e così via
vh: ad esempio, 20vh significa 1/5 dell'altezza della viewport, e così via

Fondere le unità

Per poter fondere insieme diverse unità possiamo utilizzare calc().

Ad esempio: height: calc(10vh + 100px);, width: calc(10vh + 2%), etc.

Esercizi di oggi:

Requisiti:

Avere un account Github
Avere un account Codepen (si può accedere anche tramite Github)

Scopriamo insieme il funzionamento delle dimensioni dei font, e cerchiamo di capire come ognuna può impattare il nostro documento.

Riscaldamento

Exercise 1

Andiamo su Codepen
Creiamo un nuovo Pen insieme
Copiate e incollate il seguente div nella sezione HTML, il secondo sulla sezione CSS.
Usando solo rem, date ad ogni p la dimensione che dicono di avere.

            <div>
                <p id="yellow">Dimensione static</p>
                <p id="blue">Tre volte la statica</p>
                <p id="magenta">Quattro volte il font del div giallo!</p>
                <p id="red">Quattro volte la dimensione statica - 12px</p>
                <p id="green">2 rem</p>
                <p id="orange">1px</p>
            </div>

            html {
                font-size: 16px;
              }

Exercise 2

Creiamo un nuovo Pen insieme
Copiate e incollate il seguente div nella sezione HTML, il secondo sulla sezione CSS. (su Codepen si ha una un boilerplate preimpostato, è disponibile solo il body)
Usando solo vh e vw, date ad ogni p la dimensione che dicono di avere.

            <div>
              <div id="yellow"><p>Un quarto della viewport.</p></div>
              <div id="blue"><p>Metà viewport</p></div>
              <div id="magenta"><p>Due volte il primo + 100px</p></div>
              <div id="red"><p>1/2 della viewport - 15px</p></div>
              <div id="green"><p>Alto metà viewport, largo metà dell'altezza della viewport</p></div>
              <div id="orange"><p>75/100 della viewport diviso 2</p></div>
            </div>

            html {
                font-size: 16px;
                margin: 0px;
                padding: 0px;
                width: 100vw; 
                height: 100vh;
              }