All’inizio della sezione “Component: Base” del file uikit.css, troviamo la regola con cui si setta, tra le altre cose, la dimensione di base del testo

html {

font: normal 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

background: #ffffff;

color: #444444;

}

Analizzando tale regola possiamo osservare che:

• La dimensione di base del font è di 14px. Questo è anche il valore che verrà utilizzato come riferimento per determinare le effettive dimensioni di tutti quegli elementi che utilizzano come unità di misura em, rem, o % (per maggiori informazioni in merito a queste unità di misura si veda anche la sezione “Responsive Design: Concetti di Base – Tipografia” di questa guida).

Di base, dunque, 1em equivale esattamente a 14px

• L’altezza riga (line-height) utilizzata a default è di 20px
• Alla pagina viene applicato uno sfondo di colore bianco (#ffffff)
• Il colore primario utilizzato per il testo è nero con codice esadecimale #444444
• Di default uikit utilizza una font-family sans-serif definita a livello del selettore html.

Tutti gli elementi testuali ereditano questa impostazione ad eccezione dei blocchi di codice racchiusi dal tag < code > per i quali viene utilizzato invece una “font-family: Consolas,monospace,serif” come successivamente specificato nella rispettiva regola presente sempre all’interno della sezione “Component: Base”

Analizzando le altre regole presenti all’interno di questa sezione possiamo osservare inoltre che.

• I paragrafi (< p >) e gli altri elementi di blocco ereditano i valori dal selettore html. Anche per essi è quindi utilizzato un font di base a 14px, un’altezza di riga di 20 px ecc…
• Volendo enfatizzare del testo lo si può racchiudere all’interno di specifici tag come < em >, per il quale viene applicato a default un colore con codice #dd0055, < strong > o < b > per i quali viene applicato a default il grassetto, < mark > che consente di evidenziare il testo in giallo (#ffffaa) …
• Volendo togliere enfasi al testo è possibile racchiuderlo all’interno del tag < small > per il quale viene applicato un font-size pari al 80% (corrispondente quindi a 14 x 0.8 = 11.2 px)
• Per quando riguarda i link il colore primario è azzurro (#0077dd ). Sul hover, i link assumono invece una variante di blu leggermente più scura (#005599) senza sottolineatura
• Per gli elenchi puntati viene utilizzato un padding sinistro di 30 px

Le proprietà relative ai titoli (tag da < h1 > a < h6 >) sono racchiuse, infine, all’interno della sotto-sezione Headings.

Per ognuno di essi viene definita una dimensione del font diversa (dai 36 px del tag h1 ai12 px del tag h6) e una diversa altezza di riga. Ad ogni titolo è inoltre applicato a default un margine superiore di 25 px.