Ako postavimo line-height = 0,4, dobićemo negativan vodeći eksponat:

Što općenito s razmakom između redova učiniti nešto? Zbog povrede? Ništa za raditi?

Pravilno odabrani prored može poboljšati čitljivost teksta, a to je vrlo važan aspekt u web dizajnu, u tipografiji i svemu što je vezano za tekst. Slažete se da kada smo povećali razmak između redova u drugom primjeru, tekst je postao ugodniji za čitanje, zar ne? Ali to uopće ne znači da što je veći uvod, to je veća čitljivost teksta. Nakon određenog trenutka, linije se počinju previše udaljavati, oku postaje teže prelaziti s jedne na drugu, a pri čitanju se javlja nelagoda. Zapamtite zlatnu sredinu.

Vodeći

Mnogi ljudi, uključujući dizajnere, to misle tipografija je samo izbor tipa slova, veličine fonta i da li treba da bude normalan ili podebljan. Za većinu ljudi, tu se završava. Ali potrebno je mnogo više da biste dobili dobru tipografiju, a to su obično detalji koje dizajneri često zanemaruju.
Ovi detalji daju dizajneru potpunu kontrolu, omogućavajući mu da kreira lijepa i dosljedna tipografska rješenja u dizajnu. Iako se sve ovo odnosi na različite vrste medija, u ovom članku ćemo se fokusirati na to kako ih primijeniti na web dizajn koristeći CSS. Evo 8 jednostavnih načina da poboljšate tipografiju pomoću CSS-a a time i ukupna upotrebljivost dizajna.

1. Dimenzije

Veličina slova. Oku čitaoca dugi ili kratki redovi su zamorni. Dugačke kvare ritam, jer je čitaocu teško pronaći sljedeći red teksta. Jedina situacija u kojoj su kratki redovi prihvatljivi je mala količina teksta. Za najbolju čitljivost, dužina reda treba biti između 40 i 80 znakova, uključujući razmake. Za dizajn sa jednom kolonom idealno je 65 znakova.

Jednostavan način za izračunavanje dužine reda je korištenje metode Roberta Bringhursta, koja množi veličinu fonta sa 30. Dakle, ako je veličina fonta 10px, množenjem sa 30 je 300px, ili otprilike 65 znakova po redu. Kod će izgledati otprilike ovako:
p(
veličina fonta: 10px;
maksimalna širina: 300px
}
Koristim px jer olakšava proračune, ali se može koristiti i em.

2. Vodeći

Vodeći je razmak između redova teksta u tijelu bilješke i igra veliku ulogu u čitljivosti. Pravilno odvajanje redova olakšava čitaocu da prati red i poboljšava izgled teksta. Leading također mijenja tipografsku boju teksta, što je gustina ili ton kompozicije.
Na vođenje utiče mnogo faktora: font, veličina fonta, njegova punoća, okolnosti (?) , dužina reda, razmak riječi, itd. Što je linija duža, to je veće vodstvo. Što je veličina slova veća, to je početna slova manja. Dobro pravilo je postavljanje vodeći 2-5pt više od veličine fonta, u zavisnosti od slušalica. Dakle, ako je font 12pt, onda bi za web vodeći trebao biti 15pt ili 16pt.

Određivanje ispravnog vođenja zahtijeva određenu spretnost, ali evo primjera kako bi vaš kod trebao izgledati:
tijelo (

veličina fonta: 12px;
visina linije: 16px;
}

3. Rukovanje citatima

Obradu citata treba izvršiti na marginama teksta. Ako se navodnici spoje s tekstom, onda prekidaju lijevu marginu i prekidaju rimu bloka teksta. Rukovanje navodnicima ne narušava lijevo poravnanje i ravnotežu i stoga poboljšava čitljivost.

Ovo se lako postiže pomoću CSS-a pomoću elementa blockquote:
blok citat (
uvlaka teksta: -0.8em
veličina fonta: 12px;
}

Negativno uvlačenje ovisit će o fontu, veličini fonta i marginama.

4. Vertikalni ritam

Osnovna mreža je osnova dosljednog tipografskog ritma na stranici. Omogućava čitaocima da lako prate tekst, što zauzvrat povećava čitljivost. Konstantan ritam u vertikalnom prostoru održava tekst na konstantnoj mreži tako da proporcije i balans ostaju isti na cijeloj stranici, bez obzira na veličinu fonta, početak ili dužinu reda.

Da bi se održao vertikalni ritam sa CSS-om, razmak između elemenata i razmak između linija (vodeći) moraju biti jednaki veličini mreže osnovne linije. Recimo da koristite 15px osnovnu mrežu, pod pretpostavkom da postoji 15px između svake linije mreže. Vodeći dio će biti 15px, a razmak između pasusa će također biti 15px. Evo primjera:
tijelo (
porodica fontova: Helvetica, sans-serif;
veličina fonta: 12px;
visina linije: 15px;
}

P(
margin-bottom: 15px;
}

Ovo omogućava da se svaki paragraf uklopi u mrežu uz zadržavanje vertikalnog ritma teksta.

5. Gornje i donje viseće žice

Gornja viseća linija- red teksta ili riječ na kraju pasusa. Bottom Hanging Line- riječ ili kratki red teksta na početku ili kraju kolone koji je odvojen od ostalog teksta. Gornji i donji viseći red formiraju nezgodne komade, prekidaju pogled čitaoca i utiču na čitljivost. Ovo se može izbjeći povećanjem veličine fonta, početne linije, dužine reda, razmaka riječi i slova ili ručnim unosom prijeloma reda.

Nažalost, ne postoji jednostavan način da spriječite redove bez roditelja pomoću CSS-a. Jedan od načina da ih se riješite opisan je gore, drugi je jQWidon't, dodatak za jQuery koji postavlja razmake između posljednje dvije riječi elementa.

6. Odabir

Bitan istaknite riječi bez ometanja čitaoca. Kurziv se često smatra idealnim oblikom isticanja. Neki drugi uobičajeni oblici isticanja su: podebljano, velika slova, mala slova, veličina fonta, boja, podvučena ili druga vrsta slova. Nije važno koji koristite, pokušajte koristiti samo jedan. Kombinacije kao što su mala slova - podebljano - kurziv odvlače pažnju i nespretne.

Evo nekoliko načina za isticanje pomoću CSS-a:
raspon (
stil fonta: kurziv;
}

H1(
font-weight: bold;
}

H2(
transformacija teksta: velika slova;
}

B(
varijanta fonta: mala slova;
}
Imajte na umu da font-varijanta radi samo ako font podržava mala slova.

Svojstvo HTML margine koristi se za dodavanje dopuna ili razmaka između različitih elemenata. Svojstvo padding se koristi za dodavanje razmaka između sadržaja i ivice (okvira) navedenog HTML elementa.

Razlika između margine i paddinga može se vidjeti na sljedećoj slici:

Također pogledajte demo kako biste bolje razumjeli razliku između ova dva svojstva.

Pogledajte demo i kod

Imamo tri elementa div. Prva dva su sa svojstvom HTML margine, a treća sa svojstvom paddinga. Razmak između divova je margina, a razmak između teksta unutar trećeg diva i njegove granične linije je padding.

CSS dopuna i sintaksa margina

Sintaksa koja se koristi za jednu deklaraciju svojstva CSS margine je:

Ovaj kod postavlja padding u svim smjerovima: gore, dolje, lijevo i desno. Ako trebate postaviti uvlake za različite smjerove, to se može učiniti sa sljedećom skraćenom deklaracijom:

margina: 10px 20px 50px 100px;

• 10px - uvlačenje odozgo;
• 20px - uvlačenje desno;
• 30px - padding od dna;
• 40px - padding na lijevoj strani.

Također možete zasebno postaviti marginu lijevog HTML-a i druge upute:

Napomena: Može se koristiti za definiranje dopuna px, pts, cm itd.

Sintaksa svojstva CSS paddinga

Svojstvo dopune može se postaviti korištenjem jedne/skraćene deklaracije ili korištenjem posebne deklaracije, ali za svaki smjer.

Jedna deklaracija sa jednom vrijednošću:

Za svaki pravac po jednoj najavi:

padding: 10px 20px 50px 100px;

Ako su navedene četiri vrijednosti, redoslijed je isti kao i za HTML CSS svojstvo margine.

Za svaki smjer posebno:

padding-top: 10px; padding-desno: 20px; padding-bottom: 30px padding-left: 40px

Primjer za postavljanje margina i dopuna u HTML listi

U uvodu sam pokazao svojstva margine i dopuna koja se koriste na elementu div. U ovoj demonstraciji napravio sam listu koristeći stavke menija koje su veze. Lista se nalazi unutar elementa div. Sadrži stavke menija u obliku hiperveza.

Lista je također definirana drugim CSS svojstvima, ali bez korištenja HTML margine i svojstva paddinga, izgledat će ovako:

Pogledajte demo i kod

Dodavanjem margina od 10px za veze unutar

:

dobijamo sledeci pogled:





Pogledajte online demo i kod

Sve klase za veze unutar elementa

bit će kako slijedi:

padding: 10px margina: 2px dekoracija teksta: nema; boja: #fff; boja pozadine: #DA8119; display:block;

Demonstracija polja na primjeru HTML tabele

Sljedeći je primjer korištenja svojstva padding u HTML tabeli. Napravio sam tabelu sa više redova.

Tablica je stilizirana korištenjem različitih CSS svojstava. Prvo pogledajte kako tabela izgleda bez primijenjenog svojstva paddinga:




Pogledajte demo i kod

Dodavanjem polja dobićemo tabelu koja će izgledati ovako:




Pogledajte demo i kod

Ispod je kod za stilove koji se koriste za . Cijeli kod možete vidjeti klikom na link iznad:

padding: 20px granica: isprekidana 1px #DF7000; pozadina: #D0E8AC; boja: #000;

Primjer korištenja margina i dopuna s elementom forme

Svojstva HTML margine se takođe mogu primeniti na elemente obrasca: tekstualna polja, dugmad i tako dalje.

Svojstvo paddinga primijenjeno na tekstualno polje specificira razmak između kursora unutar tekstualnog polja i njegove ivice. margin dodaje dopunu između različitih tekstualnih polja ili drugih elemenata obrasca.

Da bi bilo jasnije, napraviću obrazac i pokazati razliku između polja sa i bez margine i dopuna. Početni izgled obrasca bez primjene svojstava margine i dopuna:



Dodavanjem polja u klasu tekstualnog polja i klasu dugmeta btn, dobijamo obrazac koji izgleda ovako:

Margine za tekstualna polja:

Polja za dugme:

padding: 9px 15px;



Pogledajte demo i kod

Da biste povećali ili smanjili margine između tekstualnih polja, koristite svojstvo HTML CSS margine. U ovoj demonstraciji koristio sam negativnu vrijednost da smanjim razmak između polja.

Polja obrasca će izgledati ovako:



Pogledajte demo i kod

Nakon upotrebe negativne vrijednosti na HTML margini, razmak između tekstualnih polja se smanjio za 3 piksela.

Koristeći svojstvo paddinga, povećali smo razmak između kursora unutar tekstualnog polja i granične linije, koju postavljaju druga svojstva. Sada teren izgleda mnogo bolje.

Za dugme " Sačuvaj” također smo primijenili svojstvo paddinga:

padding: 9px 15px;

koji se koristi za poravnavanje teksta u svim smjerovima.

Prijevod članka " CSS padding i margina – objašnjeno sa 4 HTML elementa» pripremio prijateljski projektni tim