Dacă setăm înălțimea liniei = 0,4, obținem o expoziție negativă:

Pentru ce, în general, cu distanța dintre linii, faceți ceva? Din cauza răului? Nimic de făcut?

Spațierea între rânduri aleasă corect poate îmbunătăți lizibilitatea textului, iar acesta este un aspect foarte important în web design, în tipografie și în tot ceea ce ține de text. De acord că atunci când am mărit distanța dintre rânduri în al doilea exemplu, textul a devenit mai plăcut de citit, nu? Dar asta nu înseamnă deloc că, cu cât este mai mare, cu atât textul este mai lizibil. După un anumit punct, liniile încep să stea prea departe, devine mai dificil pentru ochi să se deplaseze de la una la alta, iar la citire apare disconfort. Amintește-ți mijlocul de aur.

Conducere

Mulți oameni, inclusiv designeri, cred asta tipografie este doar o alegere de tip de tip, dimensiunea fontului și dacă ar trebui să fie normal sau aldine. Pentru majoritatea oamenilor, aici se termină. Dar este nevoie de mult mai mult pentru a obține o tipografie bună, iar acestea sunt de obicei detalii pe care designerii le trec adesea cu vederea.
Aceste detalii oferă designerului control complet, permițându-i să creeze soluții de design tipografic frumoase și consistente. În timp ce toate acestea se aplică diferitelor tipuri de media, în acest articol ne vom concentra asupra modului de aplicare a acestora în designul web folosind CSS. Aici 8 moduri simple de a îmbunătăți tipografia cu CSSși, prin urmare, utilizarea generală a designului.

1. Dimensiuni

Dimensiunea de tipar. Pentru ochiul cititorului, rândurile lungi sau scurte sunt obositoare. Cele lungi rup ritmul, deoarece cititorului îi este greu să găsească următorul rând de text. Singura situație în care liniile scurte sunt acceptabile este o cantitate mică de text. Pentru o mai bună lizibilitate, lungimea liniei trebuie să fie între 40 și 80 de caractere, inclusiv spațiile. Pentru un design cu o singură coloană, 65 de caractere este ideal.

O modalitate ușoară de a calcula lungimea unei linii este să utilizați metoda lui Robert Bringhurst, care înmulțește dimensiunea fontului cu 30. Deci, dacă dimensiunea fontului este de 10px, înmulțirea acesteia cu 30 este de 300px, sau aproximativ 65 de caractere pe linie. Codul va arăta cam așa:
p(
dimensiunea fontului: 10px;
lățime maximă: 300px
}
Folosesc px deoarece face calculele mult mai ușoare, dar se poate folosi și em.

2. Conducerea

Leading este spațiul dintre rândurile de text din corpul unei note și joacă un rol important în lizibilitate. Separarea corectă a liniilor face ca cititorul să urmărească mai ușor linia și îmbunătățește aspectul textului. Liderarea modifică și culoarea tipografică a textului, care este densitatea sau tonul compoziției.
Leading-ul este influențat de mulți factori: tipul de literă, dimensiunea fontului, caracterul complet, circumstanțe (?) , lungimea liniei, spațierea cuvintelor etc. Cu cât linia este mai lungă, cu atât este mai mare. Cu cât este mai mare dimensiunea fontului, cu atât este mai mică. O regulă de bază bună este să setați conduce cu 2-5 puncte mai mult decât dimensiunea fontului, în funcție de căști. Deci, dacă fontul este de 12 pt, atunci pentru web principalul ar trebui să fie de 15 sau 16 pt.

Determinarea orientării corecte necesită o anumită dexteritate, dar iată un exemplu despre cum ar trebui să arate codul dvs.:
corp (

dimensiunea fontului: 12px;
înălțimea liniei: 16px;
}

3. Gestionarea cotațiilor

Prelucrarea citatelor trebuie efectuată pe marginile textului. Dacă ghilimelele se îmbină cu textul, atunci ele rupe marginea din stânga și rup rima blocului de text. Manipularea ghilimelelor nu rupe alinierea la stânga și echilibrul și, prin urmare, îmbunătățește lizibilitatea.

Acest lucru este ușor de realizat cu CSS folosind elementul blockquote:
citat bloc (
text-indent: -0,8em
dimensiunea fontului: 12px;
}

Indentarea negativă va depinde de font, dimensiunea fontului și marginile.

4. Ritm vertical

Grila de bază este fundamentul unui ritm tipografic consistent pe pagină. Permite cititorilor să urmărească cu ușurință textul, ceea ce, la rândul său, crește lizibilitatea. Ritm constant în spațiul vertical menține textul pe o grilă constantă, astfel încât proporțiile și echilibrul să rămână aceleași pe toată pagina, indiferent de dimensiunea fontului, interlinea sau lungimea liniei.

Pentru a menține ritmul vertical cu CSS, distanța dintre elemente și spațierea dintre linii (înainte) trebuie să fie egală cu dimensiunea grilei liniei de bază. Să presupunem că folosești 15px grilă de bază, presupunând că există 15px între fiecare linie de grilă. Interfața va fi de 15 pixeli, iar distanța dintre paragrafe va fi, de asemenea, de 15 pixeli. Iată un exemplu:
corp (
familie de fonturi: Helvetica, sans-serif;
dimensiunea fontului: 12px;
înălțimea liniei: 15px;
}

P(
margine-jos: 15px;
}

Acest lucru permite fiecărui paragraf să se potrivească pe grilă, menținând în același timp ritmul vertical al textului.

5. Snururi de sus și de jos

Linie de agățare superioară- un rând de text sau un cuvânt la sfârșitul unui paragraf. Linia de agățare de jos- un cuvânt sau o linie scurtă de text la începutul sau la sfârșitul unei coloane care este separată de orice alt text. Liniile de sus și de jos agățate formează bucăți incomode, întrerup privirea cititorului și afectează lizibilitatea. Acest lucru poate fi evitat prin creșterea mărimii fontului, a deschiderii, a lungimii liniilor, a spațierii dintre cuvinte și a literelor sau prin introducerea manuală a întreruperilor de rând.

Din păcate, nu există o modalitate ușoară de a preveni liniile orfane cu CSS. O modalitate de a scăpa de ele a fost descrisă mai sus, o alta este jQWidon't , un plugin pentru jQuery care plasează spații nedespărțitoare între ultimele două cuvinte ale unui element.

6. Selectie

Important evidențiați cuvintele fără a distrage atenția cititorului. Cursiva este adesea văzută ca forma ideală de accentuare. Alte alte forme comune de accentuare sunt aldine, majuscule, majuscule, dimensiunea fontului, culoarea, sublinierea sau alte tipuri de caractere. Nu contează pe care îl folosești, încearcă să folosești doar unul. Combinațiile precum majusculele mici - aldine - cursive distrag atenția și incomode.

Iată câteva modalități de a evidenția cu CSS:
span (
font-style: italic;
}

H1(
greutatea fontului: bold;
}

H2(
text-transform: majuscule;
}

B(
font-variant: small-caps;
}
Rețineți că font-variant funcționează numai dacă fontul acceptă majuscule mici.

Proprietatea marjă HTML este utilizată pentru a adăuga umplutură sau un decalaj între diferite elemente. Proprietatea padding este folosită pentru a adăuga spațiu între conținut și chenarul (cadru) elementului HTML specificat.

Diferența dintre margine și umplutură poate fi văzută în următoarea figură:

Consultați și demonstrația pentru a înțelege mai bine diferența dintre aceste două proprietăți.

Vedeți demonstrația și codul

Avem trei elemente div. Primele două sunt cu proprietatea marjă HTML, iar al treilea este cu proprietatea padding. Spațierea dintre div-uri este marginea, iar spațiul dintre textul din interiorul celui de-al treilea div și linia de margine a acestuia este umplutura.

Umplutură CSS și sintaxa marginilor

Sintaxa care este utilizată pentru o singură declarație de proprietate a marjei CSS este:

Acest cod setează umplutura în toate direcțiile: sus, jos, stânga și dreapta. Dacă trebuie să setați indentări pentru diferite direcții, acest lucru se poate face cu următoarea declarație scurtă:

marjă: 10px 20px 50px 100px;

• 10px - indentare de sus;
• 20px - indentare în dreapta;
• 30px - umplutură de jos;
• 40px - umplutură în stânga.

De asemenea, puteți seta separat HTML marginea stângă și alte direcții:

Notă: poate fi folosit pentru a defini padding px , pts , cm , etc.

Sintaxa proprietății de umplutură CSS

Proprietatea padding poate fi setată folosind o declarație unică/abreviată sau folosind o declarație separată, dar pentru fiecare direcție.

Declarație unică cu o singură valoare:

Pentru fiecare direcție printr-un singur anunț:

umplutură: 10px 20px 50px 100px;

Dacă sunt specificate patru valori, atunci ordinea este aceeași ca pentru proprietatea HTML CSS margin.

Pentru fiecare direcție separat:

padding-top: 10px; padding-dreapta: 20px; umplutură-partea inferioară: 30px umplutură-stânga: 40px

Exemplu de setare a marginilor și a umpluturii într-o listă HTML

În introducere, am arătat proprietățile de marjă și de umplutură utilizate pe elementul div. În această demonstrație, am creat o listă folosind elemente de meniu care sunt link-uri. Lista este plasată în interiorul unui element div. Conține elemente de meniu sub formă de hyperlinkuri.

Lista este definită și de alte proprietăți CSS, dar fără a utiliza marja HTML și proprietățile de umplutură, va arăta astfel:

Vedeți demonstrația și codul

Adăugând margini de 10 px pentru link-urile din interior

:

obținem următoarea vedere:





Vezi demonstrația și codul online

Toată clasa pentru legături dintr-un element

va fi după cum urmează:

umplutură: 10px marja: 2px text-decor: niciuna; culoare: #fff; culoare de fundal: #DA8119; display:bloc;

Demonstrarea câmpurilor pe exemplul unui tabel HTML

Următorul este un exemplu de utilizare a proprietății padding într-un tabel HTML. Am creat un tabel cu mai multe rânduri.

Tabelul este stilat folosind diferite proprietăți CSS. Mai întâi, vedeți cum arată tabelul fără proprietatea padding aplicată:




Vedeți demonstrația și codul

Adăugând câmpuri, vom obține un tabel care va arăta astfel:




Vedeți demonstrația și codul

Mai jos este codul pentru stilurile care sunt folosite pentru . Întregul cod poate fi văzut făcând clic pe linkul de mai sus:

umplutură: 20px chenar: punctat 1px #DF7000; fundal: #D0E8AC; culoare: #000;

Un exemplu de utilizare a marginilor și a umpluturii cu elementul de formular

Proprietățile de completare a marjelor HTML pot fi aplicate și elementelor de formular: câmpuri de text, butoane și așa mai departe.

Proprietatea de umplutură aplicată unui câmp de text specifică spațiul dintre cursorul din interiorul câmpului de text și chenarul acestuia. marginea adaugă umplutură între diferite câmpuri de text sau alte elemente de formular.

Pentru a fi mai clar, voi crea un formular și voi arăta diferența dintre câmpurile cu și fără marjă și umplutură. Aspectul inițial al formularului fără a aplica proprietățile de margine și de umplutură:



Adăugând câmpuri la clasa câmpului text și la clasa butonului btn, obținem un formular care arată astfel:

Margini pentru câmpurile de text:

Câmpuri de butoane:

umplutură: 9px 15px;



Vedeți demonstrația și codul

Pentru a crește sau a micșora marginile dintre câmpurile de text, utilizați proprietatea HTML CSS margin. În această demonstrație, am folosit o valoare negativă pentru a reduce distanța dintre câmpuri.

Câmpurile formularului vor arăta astfel:



Vedeți demonstrația și codul

După utilizarea unei valori negative în marginea HTML, distanța dintre câmpurile de text a scăzut cu 3 pixeli.

Folosind proprietatea padding, am mărit distanța dintre cursorul din interiorul câmpului de text și linia de chenar, care este setată de alte proprietăți. Acum câmpul arată mult mai bine.

Pentru butonul " salva” am aplicat și proprietatea padding:

umplutură: 9px 15px;

care este folosit pentru a alinia textul în toate direcțiile.

Traducerea articolului " Umplutură și marjă CSS - Explicate cu 4 elemente HTML» a fost pregătit de o echipă prietenoasă de proiect