Formatarea textului

Pe lângă calitatea textului, două lucruri fac un site (în general) sau blog (în special) să fie de calitate: culorile și formatarea. Hai să le luăm pe rând.

Culorile

Trebuie să asiguri un contrast decent. Fundal închis presupune text deschis și viceversa. Cu toate astea, e de preferat să eviți fundalul închis. Da, știu, ție ți se pare cool. Nu este. De cele mai multe ori, textul alb pe un fundal negru te scoate din minți după mai mult de cinci-zece rânduri citite.

Formatarea textului

Folosește fonturi standard, ce sunt instalate pe toate pc-urile: arial, verdana, tahoma. Oferă alternative la fonturile astea, astfel încât textul să arate decent. Încearcă să eviți fonturile custom (sifr, cufon, etc) pentru texte dinamice și sub nicio formă nu folosi astfel de scripturi pentru paragrafe întregi de text! Da, înțeleg că vrei să ai tot site-ul scris cu Myriad Pro, dar ai milă de CPU-ul meu! Oricum, pentru web, cele mai lizibile fonturi sunt verdana, arial și helvetica. Știu că Trebuchet arată al naibii de bine, dar doar pentru titluri! Pentru texte mai lungi, nu e cel mai potrivit ;)

De cele mai multe ori textul sub 12px este greu de citit. Fii atent la dimensiunea fontului!

line-height

De cele mai multe ori ignorat, line-height-ul face diferența dintre un text lizibil și unul greu de urmărit. Line-height este spațiul dintre două linii de text. În majoritatea cazurilor, un 1.5-1.8 din dimensiunea fontului ar trebui să fie suficient.

Un exemplu:

line-height:normal:

line-height:180%:

Un alt exemplu:

line-height:normal:

line-height:180%:

Parcă e un pic mai bine, nu?

Link-uri utile

7 Comentarii to “Formatarea textului”

  1. nu 1.5em era recomandarea? :)

  2. Staicu Ionuț-Bogdan

    păi și 1.5em nu înseamnă 150% din dimensiunea fontului? :D

  3. intre 1.5 si 1.8 e o mica (mare) diferenta, zic :D

  4. Ca tot e unu din subiectele mele favorite, ma bag in seama.

    Legat de text alb pe fundal negru. It sucks grav, de acord cu tine, urasc cand mi se imprima textul si unde ma uit vad textul respectiv.

    Line-Height nu este spatiul dintre doua randuri. Line – Height este inaltimea spatiului ocupat de o singura linie! Vezi denumirea! Pentru cea mai buna citire line-height-ul optim este de 1.7 / 1.8 em.

    Trebuchet MS este un font super bun, si pentru paragrafe. Nu este comprimat precum arial, nu este labartat ca verdana si are si curlies precum georgia. Ceea ce face din Trebuchet MS un foarte placut la citit.

    Cool article mate.

  5. O adaugare, fiindca mi-a expirat timul de editare a commentului. Marginea de sub paragraf este bine sa fie aproximativ egala cu line-height-ul.

  6. @Stefan Alexandru: Corect, line-height = înălțimea rândului/liniei.

    @Ionuț: (sau Bogdan?) M-aș fi bucurat să citesc mai multe sfaturi legate de formatarea textului. Eu sunt mai degrabă back-end developer așa că îmi prind bine informațiile astea având în vedere că din când în când sunt pus în situația de a face singur totul. Mulțumesc pentru cele de față. ;)

Show trackbacks
  1. […] line-height am scris acum mai bine de cinci ani. Lucrurile rămân valabile, cu o completare: am tot observat că se […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter