Tipografia CSS estrema

  • CSS
  • Gabriele Romanato

Per tipografia estrema con i CSS si intende un tipo di tipografia in cui la dimensione e l'impatto dei font sulla pagina hanno il massimo risalto. Questo tipo di tipografia si applica a campagne di marketing e pubblicità, perchè permette di mantenere il focus dell'utente sul messaggio senza appesantire la pagina con ulteriori immagini. Se poi la si combina con i web font e altre caratteristiche CSS3, allora il risultato sarà di sicuro effetto.

Abbiamo una semplice intestazione con una descrizione:


<div id="branding">
    <h1>CSS</h1>
    
    <p id="strapline">A world of style</p>
</div>

Esprimeremo comunque le dimensioni dei font in em per garantire la massima scalabilità. Possiamo osare dimensioni dei font notevoli, come nel codice che segue:


body {
    margin: 0;
    padding: 0;
    font: 100%/1 Arial, sans-serif;
    background: #fff;
    color: #333;
}

#branding {
    width: 100%;
    background: #224185 url(img/brand.jpg) no-repeat top right;
    overflow: hidden;
}

#branding h1 {
    font: 17em Impact, sans-serif;
    color: #fff;
    margin: 0;
    padding: 20px 40px 20px 20px;
    float: left;
}


#strapline {
    margin: 0;
    padding: 20px;
    color: #224185;
    font: 6em Georgia, serif;
    background: #fff;
    float: left;
    position: relative;
    top: 1.2em;
}

Il risultato è di sicuro effetto. Ovviamente questa scelta tipografica può essere notevolmente migliorata con le più recenti caratteristiche dei CSS3. Consiglio in tal senso l'uso dei web font e di alcune nuove proprietà, come text-shadow e box-shadow.

Potete visionare l'esempio finale in questa pagina.

Torna su