Come mostrare la tua scrittura in modo che brilli: 3 trucchi di stile CSS

La tua scrittura è il fulcro del tuo blog.

Il contenuto è re giusto?

È ciò che attira le persone e le fa leggere il tuo blog.

Ma ciò che è altrettanto importante è il modo in cui mostri effettivamente la tua scrittura. Visivamente, cioè.

I tuoi contenuti possono essere fantastici, ma se è difficile da leggere per qualcuno, potresti perdere più lettori di quanto pensi.

Senti, non sono uno scrittore esperto, ma sono un web designer e so cosa sembra buono. E ciò che di solito sembra buono non riguarda tanto la decorazione e il gusto, ma più ciò che funziona e ciò che rende le cose facili da leggere e da capire.

Ho studiato per anni i vari modi per visualizzare i contenuti in forma digitale, quindi vorrei mostrarti alcuni modi semplici e veloci per assicurarti che i tuoi contenuti vengano visualizzati bene nei post del tuo blog dal punto di vista di un web designer.

Ci sono alcuni modi in cui puoi apportare modifiche rapide allo stile del tuo blog usando un piccolo CSS (Cascading Style Sheets) in modo che tu, lo scrittore, possa mostrare i tuoi contenuti e rendere il più semplice possibile il divertimento dei tuoi lettori.

Ti darò alcuni codici di scorrimento CSS che puoi aggiungere al tuo foglio di stile personalizzato e modificare a tuo piacimento. Segui le istruzioni su come modificare il CSS nel tuo blog se non sei sicuro di come accedere al foglio di stile personalizzato del tuo blog..

Tre trucchi per dare uno stile ai tuoi contenuti per mostrare la tua scrittura

1. Abbastanza i tuoi paragrafi

Per assicurarti che i tuoi paragrafi siano facili da leggere, ecco alcuni suggerimenti da tenere a mente. Modelleremo insieme il tag p (paragrafo) qui.

• Seleziona un carattere che sia facile per gli occhi. Punta a un font serif o sans serif, non a uno scritto a mano.

Scegli un peso che non sia troppo sottile. Alcuni caratteri molto sottili non hanno un bell'aspetto in alcuni browser e sistemi operativi (es. Mac o PC), quindi chiedi alle persone di controllarli per te e di darti un pollice in su.

Allo stesso tempo, scegli un carattere che non sia troppo spesso. Vuoi che abbia abbastanza contrasto con qualsiasi testo in grassetto.

Quando scegli un font, assicurati di utilizzare un font di sistema, un font che hai caricato nei file del tuo blog o un font Google. Suggerisco di utilizzare un font Google perché sono gratuiti, hanno la maggior varietà e sono i più facili da usare. Per maggiori dettagli, scopri come utilizzare fantastici font sul tuo blog.

Dopo aver selezionato il font, andrai al tuo foglio di stile personalizzato e aggiungi questo codice:

<precedente>
P {
font-family: INSERT FONT NAME;
}
</pre>

• Usa una dimensione del carattere facile da leggere su schermi di qualsiasi dimensione. Controlla il tuo blog su un telefono e assicurati che il testo non sia troppo piccolo per occhi stanchi o anziani.

Una buona dimensione per i paragrafi è in genere da 14 a 16px. Non tutti i caratteri vengono visualizzati allo stesso modo con le stesse dimensioni, quindi giocaci per vedere cosa sembra migliore.

<precedente>
P {
font-family: INSERT FONT NAME;
dimensione del carattere: 16px;
}
</pre>

• Utilizzare l'altezza della linea corretta (iniziale). Le corrette altezze delle linee aiutano anche con la leggibilità perché danno respiro ai tuoi paragrafi. Una buona altezza della riga è 1,5, in altre parole 1,5 volte la dimensione del testo (un'altezza della riga di 2 sarebbe a spaziatura doppia).

<precedente>
P {
font-family: INSERT FONT NAME;
dimensione del carattere: 16px;
altezza della linea: 1,5;
}
</pre>

• Evita il testo nero puro su bianco. È difficile per gli occhi. Opta invece per un grigio scuro (mi piace #333333) per la tua copia per diminuire un po' il contrasto.

<precedente>
P {
font-family: INSERT FONT NAME;
dimensione del carattere: 16px;
altezza della linea: 1,5;
colore: #333333;
}
</pre>

• Evita i paragrafi di allineamento centrale. Centrare la tua copia del corpo sembra amatoriale e rende più difficile la lettura. Come mai? Ogni volta che l'occhio si sposta su una nuova riga, deve lottare per trovare l'inizio di quella successiva perché non è mai nello stesso punto. Riserva l'allineamento centrale per poesie, didascalie o brevi brani di testo che attirano l'attenzione e opta per sinistra allineare o giustificare i tuoi paragrafi regolari. Il testo giustificato è distanziato in modo che entrambi i lati sinistro e destro del paragrafo abbiano un bordo dritto.

<precedente>
P {
font-family: INSERT FONT NAME;
dimensione del carattere: 16px;
altezza della linea: 1,5;
colore: #333333;
text-align: giustifica;
}
</pre>

<pre>allineamento testo: sinistra; </pre> è il comportamento predefinito e non deve essere specificato a meno che non sia necessario sovrascrivere uno stile precedente.

• Infine, aggiungi uno spazio bianco. Avrai bisogno di uno spazio bianco sufficiente tra i tuoi paragrafi per una leggibilità ottimale. Una buona regola pratica è aggiungere un margine sotto ogni paragrafo pari a circa il doppio della dimensione del carattere.

<precedente>
P {
font-family: INSERT FONT NAME;
dimensione del carattere: 16px;
altezza della linea: 1,5;
colore: #333333;
text-align: giustifica;
margine inferiore: 32px;
}
</pre>

2. Usa la gerarchia

Utilizzi la gerarchia quando definisci i tuoi post utilizzando intestazioni e sottotitoli.

Per creare una gerarchia visiva nei tuoi post, dai uno stile ai titoli e ai sottotitoli in modo che sia facile distinguerli. Ecco alcuni suggerimenti:

• Usa lo stesso carattere per tutte le intestazioni di diverse dimensioni.
• Usa un font di facile lettura, come un font serif o sans serif. Puoi scegliere di utilizzare lo stesso carattere tipografico della tua copia del corpo in un peso più spesso oppure puoi scegliere un carattere tipografico diverso che contrasti piacevolmente con la tua copia del corpo.
• Imposta i titoli e i sottotitoli in grassetto o più pesante.
• Usa Typecast per giocare con diversi tipi di carattere, dimensioni e pesi per i tuoi titoli e confrontarli con il testo del paragrafo.

Ecco un esempio di ciò che potresti inventare per il ridimensionamento se i tuoi paragrafi sono impostati su 16px nella dimensione del carattere. Quindi risaliresti da lì:

• intestazioni h6 = 16px (di solito le stesse dimensioni del testo del paragrafo, ma in grassetto e su una riga separata)
• intestazioni h5 = 18px
• intestazioni h4 = 22px
• intestazioni h3 = 26px
• intestazioni h2 = 30px
• intestazioni h1 (titoli dei post del tuo blog) = 36px

Ancora una volta, gioca con Typecast per vedere cosa sembra migliore ai tuoi occhi. Una volta che hai deciso i caratteri e le dimensioni che desideri utilizzare per i tuoi titoli, ti consigliamo di andare al tuo foglio di stile personalizzato e aggiungere questo CSS per tutti i tuoi titoli:

<precedente>
h1, h2, h3, h4, h5, h6 {
font-family: INSERT FONT NAME;
dimensione del carattere: 36px;
font-weight: grassetto;
}
</pre>

Successivamente aggiungerai alcune sostituzioni CSS solo per modificare le dimensioni per ogni livello di intestazione:

<precedente>
h2 {
dimensione del carattere: 30px;
}

h3 {
dimensione del carattere: 26px;
}

h4 {
dimensione del carattere: 22px;
}

h5 {
dimensione del carattere: 18px;
}

h6 {
dimensione del carattere: 16px;
}
</pre>

3. Usa collegamenti

Non far riflettere i tuoi lettori! I tuoi collegamenti dovrebbero apparire come collegamenti, il che significa che dovrebbero essere completamente ovvi che sono qualcosa su cui fare clic. Ecco alcuni modi per farlo:

• Scegli un colore per i tuoi link che contrasti con il tuo testo normale.
• Riserva un colore solo per i tuoi link. Non utilizzare lo stesso colore per intestazioni, sottotitoli, titoli dei widget della barra laterale o qualsiasi altro testo.
• Puoi, tuttavia, utilizzare questo colore per i pulsanti, se lo desideri, perché sono anche elementi selezionabili.
• Non sottolineare il testo che non è un collegamento, è fonte di confusione perché le persone di solito presumono che il testo sottolineato sia un collegamento.

<precedente>
un {
colore: rosa;
decorazione del testo: sottolineatura;
}
</pre>

Disegna i vari stati dei link per aiutare ulteriormente i tuoi lettori a distinguerli come link. Il fatto che cambino aspetto quando un utente ci passa sopra fornisce un'ulteriore indicazione che si tratta di un collegamento attivo.

<precedente>
a: passa il mouse {
colore blu;
decorazione del testo: nessuna;
}
</pre>

Puoi anche scegliere di dare uno stile diverso ai tuoi link visitati per indicare agli utenti che hanno già visitato un determinato link.

<precedente>
a:visitato {
colore blu;
}
</pre>

Per mettere in mostra la tua scrittura in modo che brilli, bastano poche semplici modifiche

Questi sono solo alcuni trucchi per mostrare i tuoi scritti per renderli facili da leggere e quindi aiutare i tuoi contenuti a distinguersi!

In quali altri modi imposti i post del tuo blog per renderli facilmente leggibili per i tuoi utenti?

Ti piacerebbe saperne di più su come sfruttare i CSS per rendere il tuo blog più attraente per i tuoi lettori e mostrare davvero i tuoi scritti? Stupendo! Allora mi piacerebbe che ti unissi a me per un video di formazione gratuito sui CSS. Presto inizierà quindi iscriviti ora.

Immagine per gentile concessione di Pixabay