Cum să-ți arăți scrisul astfel încât să strălucească: 3 trucuri de stil CSS

Publicat: 2022-03-22

Scrisul tău este punctul central al blogului tău.

Conținutul este regele, nu?

Este ceea ce atrage oamenii și îi face să citească blogul tău.

Dar ceea ce este la fel de important este modul în care vă prezentați de fapt scrisul. Vizual, adică.

Conținutul tău poate fi grozav, dar dacă cineva îi este greu să citească, s-ar putea să pierzi mai mulți cititori decât crezi.

Uite, nu sunt un scriitor calificat, dar sunt web designer și știu ce arată bine. Și ceea ce arată de obicei bine nu este atât de mult despre decor și gust, ci mai mult despre ceea ce funcționează și ce face lucrurile ușor de citit și de înțeles.

Am studiat de ani de zile diferitele modalități de a afișa conținut în formă digitală, așa că aș dori să vă arăt câteva modalități rapide și ușoare prin care vă puteți asigura că conținutul dvs. se afișează frumos în postările de pe blog din punctul de vedere al unui designer web.

Există câteva moduri prin care puteți face modificări rapide de stil blogului dvs. folosind un mic CSS (Foi de stil în cascadă), astfel încât dvs., scriitorul, să vă puteți prezenta conținutul și să le faceți cât mai ușor posibil pentru cititorii dvs. să se bucure de el.

Vă voi oferi câteva coduri de glisare CSS pe care le puteți adăuga la foaia de stil personalizată și le puteți edita după bunul plac. Urmați instrucțiunile despre cum să editați CSS-ul în blogul dvs. dacă nu sunteți sigur cum să accesați foaia de stil personalizată a blogului dvs..

Trei trucuri pentru stilul conținutului dvs. pentru a vă prezenta scrisul

  1. Îmbunătățiți-vă paragrafele

Pentru a vă asigura că paragrafele dvs. sunt ușor de citit, iată câteva sfaturi de care trebuie să țineți cont. Vom stila eticheta p (paragraf) aici împreună.

  • Selectați un font care este ușor pentru ochi. Vizualizați un font serif sau sans serif, nu unul scris de mână.

Alegeți o greutate care nu este prea subțire. Unele fonturi foarte subțiri nu arată foarte bine în anumite browsere și sisteme de operare (de exemplu, Mac sau PC), așa că cereți-le oamenilor să le verifice pentru dvs. și să vă dea bine.

În același timp, alegeți un font care nu este prea gros. Vrei să aibă suficient contrast cu orice text îngroșat.

Când alegeți un font, asigurați-vă că utilizați fie un font de sistem, un font pe care l-ați încărcat în fișierele dvs. de blog sau un font Google. Vă sugerez să folosiți un font Google deoarece sunt gratuit, au cea mai mare varietate și sunt cel mai ușor de utilizat. Pentru mai multe detalii, vezi cum să folosești fonturi interesante pe blogul tău.

După ce ați selectat fontul, veți accesa foaia de stil personalizată și veți adăuga acest cod:

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

  • Utilizați o dimensiune de font ușor de citit pe ecranul de orice dimensiune. Verifica-ți blogul pe telefon și asigură-te că textul nu este prea mic pentru ochii obosiți sau bătrâni.

O dimensiune bună pentru paragrafe este de obicei de 14 până la 16 px. Nu toate fonturile afișează la fel la aceleași dimensiuni, așa că joacă-te cu ele pentru a vedea ce arată cel mai bine.

<pre>
p {
font-family: INSERT FONT NAME;
dimensiunea fontului: 16px;
}
</pre>

  • Folosiți înălțimi adecvate ale liniilor (înainte). Înălțimile adecvate ale liniilor ajută, de asemenea, la lizibilitate, deoarece oferă spațiu de respirație paragrafelor tale. O înălțime bună de linie este de 1,5, cu alte cuvinte de 1,5 ori dimensiunea textului (o înălțime de linie de 2 ar fi spație dublu).

<pre>
p {
font-family: INSERT FONT NAME;
dimensiunea fontului: 16px;
înălțimea liniei: 1,5;
}
</pre>

  • Evitați textul negru pur pe alb. E greu pentru ochi. Optează în schimb pentru un gri închis (îmi place #333333) pentru ca copia ta să scadă puțin contrastul.

<pre>
p {
font-family: INSERT FONT NAME;
dimensiunea fontului: 16px;
înălțimea liniei: 1,5;
culoare: #333333;
}
</pre>

  • Evitați alinierea la centru a paragrafelor. Centrarea copiei corporale pare amator și face mai dificil de citit. De ce? De fiecare dată când ochiul tău trece la o nouă linie, trebuie să se chinuie să găsească începutul următorului, deoarece nu se află niciodată în același loc. Rezervă alinierea centrului pentru poezii, subtitrări sau fragmente scurte de text care atrage atenția și optează pentru stânga alinierea sau justificarea paragrafelor tale obișnuite. Textul justificat este distanțat astfel încât ambele părți din stânga și din dreapta ale paragrafului să aibă o margine dreaptă.

<pre>
p {
font-family: INSERT FONT NAME;
dimensiunea fontului: 16px;
înălțimea liniei: 1,5;
culoare: #333333;
text-align: justificare;
}
</pre>

<pre>text-align: stânga; </pre> este comportamentul implicit și nu trebuie specificat decât dacă trebuie să înlocuiți un stil anterior.

  • În cele din urmă, adăugați spațiu alb. Veți dori suficient spațiu alb între paragrafe pentru o lizibilitate optimă. O regulă generală bună este să adăugați o marjă sub fiecare paragraf egală cu aproximativ dublul mărimii fontului.

<pre>
p {
font-family: INSERT FONT NAME;
dimensiunea fontului: 16px;
înălțimea liniei: 1,5;
culoare: #333333;
text-align: justificare;
margine-jos: 32px;
}
</pre>

  1. Utilizați Ierarhia

Folosiți ierarhia atunci când vă schițați postările folosind titluri și subtitluri.

Pentru a crea o ierarhie vizuală în postările tale, stilează-ți titlurile și subtitlurile astfel încât să fie ușor să le diferențiezi. Iată câteva sfaturi:

  • Utilizați același font pentru toate titlurile dvs. de dimensiuni diferite.
  • Utilizați un font ușor de citit, cum ar fi un font serif sau sans serif. Puteți alege să utilizați același tip de liter ca și corpul dvs. de text într-o greutate mai groasă sau puteți alege un alt tip de caractere care contrastează frumos cu corpul dvs. de text.
  • Setați titlurile și subtitlurile la aldine sau mai mari.
  • Utilizați Typecast pentru a juca cu diferite fonturi, dimensiuni și greutăți pentru titluri și comparați-le cu textul paragrafului.

Iată un exemplu de ceea ce puteți găsi pentru dimensionare dacă paragrafele dvs. sunt setate la dimensiunea fontului de 16 px. Urcai apoi de acolo:

  • Titluri h6 = 16 px (de obicei, aceeași dimensiune ca textul paragrafului, dar aldine și pe propriul rând)
  • h5 titluri = 18px
  • h4 titluri = 22px
  • h3 titluri = 26px
  • h2 titluri = 30px
  • Titlurile h1 (titlurile postărilor dvs. de blog) = 36px

Din nou, joacă-te cu Typecast pentru a vedea ce arată cel mai bine ochilor tăi. Odată ce v-ați hotărât asupra fonturilor și dimensiunilor pe care doriți să le utilizați pentru titlurile dvs., veți dori să mergeți la foaia de stil personalizată și să adăugați acest CSS pentru toate titlurile dvs.:

<pre>
h1, h2, h3, h4, h5, h6 {
font-family: INSERT FONT NAME;
dimensiunea fontului: 36px;
greutatea fontului: bold;
}
</pre>

În continuare, veți adăuga câteva înlocuiri CSS doar pentru a modifica dimensiunile pentru fiecare nivel de titlu:

<pre>
h2 {
dimensiunea fontului: 30px;
}

h3 {
dimensiunea fontului: 26px;
}

h4 {
dimensiunea fontului: 22px;
}

h5 {
dimensiunea fontului: 18px;
}

h6 {
dimensiunea fontului: 16px;
}
</pre>

  1. Utilizați linkuri

Nu-ți pune pe cititori să gândească! Link-urile dvs. ar trebui să arate ca link-uri, ceea ce înseamnă că ar trebui să fie complet evident că sunt ceva pe care trebuie să faceți clic. Iată câteva moduri de a face acest lucru:

  • Alegeți o culoare pentru linkurile dvs. care să contrasteze cu textul obișnuit.
  • Rezervați o culoare doar pentru link-urile dvs. Nu utilizați aceeași culoare pentru titluri, subtitluri, titluri widget din bara laterală sau orice alt text.
  • Puteți, totuși, să utilizați această culoare pentru butoane, dacă doriți, deoarece acestea sunt, de asemenea, elemente pe care se poate face clic.
  • Nu subliniați textul care nu este un link, este confuz, deoarece oamenii presupun de obicei că textul subliniat este un link.

<pre>
A {
culoare: roz;
text-decor: subliniere;
}
</pre>

Stilați diferitele stări ale linkurilor pentru a ajuta cititorii să le distingă ca linkuri. Faptul ca acestea să-și schimbe aspectul atunci când un utilizator trece cu mouse-ul peste ele oferă o indicație suplimentară că este o legătură activă.

<pre>
a:hover {
Culoarea albastra;
text-decor: niciuna;
}
</pre>

De asemenea, puteți alege să stilați linkurile vizitate în mod diferit pentru a indica utilizatorilor că au accesat deja un anumit link.

<pre>
a:a vizitat {
Culoarea albastra;
}
</pre>

Pentru a vă prezenta scrisul astfel încât să strălucească, sunt necesare doar câteva modificări simple

Acestea sunt doar câteva trucuri pentru a vă prezenta scrisul, pentru a le face ușor de citit și, prin urmare, pentru a vă ajuta conținutul să iasă în evidență!

Ce alte moduri aranjați postările de blog pentru a le face ușor de citit pentru utilizatorii dvs.?

Doriți să aflați mai multe despre cum puteți utiliza CSS pentru a face blogul dvs. mai atrăgător pentru cititorii dvs. și pentru a vă prezenta cu adevărat scrisul? Minunat! Atunci mi-ar plăcea să fii alături de mine pentru o instruire video gratuită despre CSS. Începe în curând, așa că înscrie-te acum.

Imagine prin amabilitatea Pixabay