Come rendere il tuo tipo più attraente sul Web
Non è raro che un progettista nel mondo di oggi presti poca attenzione a come è disposto il testo, specialmente con le sempre predefinite impostazioni predefinite di tag di intestazione e caratteri sicuri per il Web che si trovano universalmente sul web.
Se come progettisti interattivi siamo in grado di dedicare un po 'più di tempo alla tipografia, i risultati mostrerebbero un design unico e ben pensato in opposizione a una creazione "run of the mill".
Ci sono buone probabilità che la maggior parte dei designer e dei progetti che ammiri mostri buoni esempi di tipografia.
Ti mostrerò alcuni passaggi che eseguo nel tweaking set type per essere più allettanti di quegli scenari predefiniti dei tag 24px H1 insieme a 13px impostati in Times New Roman.
Non accontentarti delle impostazioni predefinite, lo stanno facendo tutti.
Qui abbiamo l'aspetto sempre più comune di un titolo insieme a un pezzo di copia del corpo da seguire. Questo non ti attira esattamente o si distingue da tutti gli altri campioni proprio come, giusto? Quindi, per rendere il testo più attraente visivamente, in primo luogo, faremo alcune modifiche con la nostra selezione di font.
Scegli un carattere che avrà più peso visivo con il tuo titolo
Sebbene la selezione dei caratteri non sia esattamente "tipografia", è in effetti un componente essenziale per aiutare il tipo su una pagina a distinguersi dagli altri elementi. Con l'inizio di @ font-face, enormi quantità di scelte sono disponibili per i progettisti ovunque.
Qui ho usato un font stile gotico extra condensato che può essere facilmente trovato su un sito di font gratuito come FontSquirrel.com. Se ci fermiamo e ci pensiamo, il nome "Condensed" dovrebbe significare qualcosa, perché è in realtà più denso di quanto lo sia il normale membro della famiglia in stile libro, che è esattamente ciò che vogliamo da un titolo: qualcosa che attira l'utente in e si distingue veramente dalla copia del corpo. Certamente riesce ad attirare la tua attenzione meglio dell'originale, ma ci sono alcune cose che potremmo fare per migliorare ulteriormente il testo.
Rendilo più attraente con due linee di CSS
Il cambiamento immediato è nelle lettere; sono tutti capitalizzati ora, ma ora hanno anche una crenatura negativa tra ciascuna delle lettere (una tecnica riportata dal design di un giornale).
Entrambe queste caratteristiche possono essere facilmente ottenute tramite CSS, { text-transform: uppercase; e spaziatura delle lettere: -Xpx; }. Rendendo queste due righe degne di modifica della codifica, si ottiene un notevole miglioramento del peso visivo, specialmente rispetto all'originale.
Elabora le ultime piccole modifiche
Nella fase successiva, il carattere utilizzato nel paragrafo del corpo è stato in effetti modificato in un sans-serif più pulito, che si adatta meglio al testo del titolo. Ci stiamo avvicinando a un design molto più accattivante, ma ci sono alcuni cambiamenti che possiamo apportare per pulirlo ancora di più.
Come mostrano gli indicatori verdi, ci sono margini ineguali e ciò che i tipografi chiamano un "orfano". Che è una singola parola che cade sull'ultima riga del paragrafo. Crea un peso molto diverso visivamente rispetto al resto del testo e questo problema può essere risolto facilmente riformulando leggermente il testo.
Quando si tratta di margini, non esiste una regola che tutti debbano essere uguali. Tuttavia, se stai iniziando una giovane carriera nel web design, è buona norma avere margini uguali finché non sperimenti e apprendi tecniche che ti consentano di andare oltre le linee guida della composizione e di realizzare ancora visivamente il tuo obiettivo.
Dopo aver creato un canvas visivo più bilanciato rimuovendo l'orfano e regolando i margini, è possibile vedere il risultato finale, un esempio di tipo ben impostato che è comodo dove giace.
Quali sono i tuoi migliori consigli per la tipografia web? Fateci sapere nei commenti!