Afstand tussen html-regels. Door de afstand tussen regels CSS-code te wijzigen, kunt u uw tekst mooi en leesbaar opmaken

Naar wijzig de regelafstand in HTML U hoeft het fineer niet te hameren. U hoeft deze afstand alleen aan te passen aan het object waarin u deze afstand wilt aanpassen, bijvoorbeeld aan een alinea tekst (tag) of aan blok-element (

), CSS-eigenschap toepassen lijn-hoogte. De eigenschap kan op alle tags worden toegepast HTML.

De waarde van de lijnhoogte kan worden ingesteld als een percentage, een vermenigvuldiger, meeteenheden (pixels (px), punten (pt), solderen (pc), enz.), en het kan ook de waarde normaal aannemen en overnemen.

Bij normaal wordt de afstand tussen lijnen automatisch door de browser berekend op basis van zijn eigen overwegingen, met overnemen - de waarde wordt overgenomen ouderelement, d.w.z. de tag waarin de tag is genest.

Laten we een paar regels HTML schrijven.

Zo ziet de afstand tussen regels in een alinea eruit in de browser met een waarde van 1 (d.w.z. enkele regelafstand) en 70% bij de kop (merk op dat bij het berekenen in % de letterhoogte als 100 wordt genomen):

Als we de regelhoogte voor de tag instellen

, die zowel de kop als de paragraaf omhult, en daaruit verwijderen we dienovereenkomstig deze eigenschap, we krijgen:

Als we de lijnhoogte = 0,4 instellen, krijgen we een negatieve leidende tentoonstelling:

Waarom doen ze iets met de afstand tussen lijnen? Omdat het schadelijk is? Heb je niets te doen?

Een correct geselecteerde regelafstand kan de leesbaarheid van tekst verbeteren belangrijk aspect in webdesign, typografie en alles wat met tekst te maken heeft. Ben je het ermee eens dat toen we in het tweede voorbeeld de afstand tussen de regels vergrootten, de tekst prettiger werd om te lezen, nietwaar? Maar dit betekent helemaal niet dat hoe groter de leiding, hoe hoger de leesbaarheid van de tekst. Na wat bepaald punt De lijnen beginnen te ver uit elkaar te staan, het wordt moeilijker voor het oog om van de ene naar de andere te bewegen en er ontstaat ongemak bij het lezen. Denk aan de gulden middenweg.

Leidend

Veel mensen, inclusief ontwerpers, denken dat typografie- het is gewoon een keuze uit het lettertype, de lettergrootte en of het normaal of vetgedrukt moet zijn. Voor de meeste mensen houdt het daar op. Maar goede typografie vereist veel meer, en dit zijn meestal details die ontwerpers vaak negeren.
Deze details geven de ontwerper volledige controle, stelt hem in staat mooie en typografisch consistente ontwerpoplossingen te creëren. Hoewel dit allemaal van toepassing is verschillende soorten media, in dit artikel zullen we ons concentreren op hoe u deze kunt toepassen op webontwerp met behulp van CSS. Hier 8 eenvoudige manieren Met met behulp van CSS typografie verbeteren en daarmee de algehele bruikbaarheid van het ontwerp.

1. Afmetingen

Zetgrootte. Voor de lezer zijn lange of korte regels vermoeiend. Lang - vernietigt het ritme, omdat het voor de lezer moeilijk te vinden is volgende regel tekst. De enige situatie waarin korte regels acceptabel zijn, is een kleine hoeveelheid tekst. Voor de beste leesbaarheid moet de regellengte tussen de 40 en 80 tekens liggen, inclusief spaties. Voor een ontwerp met één tekstkolom zijn 65 tekens ideaal.

Een eenvoudige manier om de regellengte te berekenen is door de methode van Robert Bringhurst te gebruiken, waarbij de lettergrootte met 30 wordt vermenigvuldigd. Dat wil zeggen: als de lettergrootte 10 px is, geeft vermenigvuldiging met 30 300 px of ongeveer 65 tekens per regel. De code zal er ongeveer zo uitzien:
P(
lettergrootte: 10px;
maximale breedte: 300px;
}
Ik gebruik px omdat het de berekeningen veel eenvoudiger maakt, maar em kan ook worden gebruikt.

2. Leidinggeven

Leading is de ruimte tussen tekstregels in de hoofdtekst van een notitie en speelt een grote rol bij de leesbaarheid. Een goede lijnscheiding maakt het voor de lezer gemakkelijker om de lijn te volgen en verbetert verschijning tekst. Leading verandert ook de typografische kleur van de tekst, wat de dichtheid of toon van de compositie is.
Leidinggeven wordt door veel factoren beïnvloed: lettertype, lettergrootte, volledigheid, omstandigheden (?) , regellengte, woordafstand, enz. Hoe langere lijn, hoe groter de voorsprong. Hoe groter formaat lettertype, hoe kleiner de regelafstand. Goede regel– installeren de regelafstand is 2-5pt groter dan de lettergrootte, afhankelijk van de hoofdtelefoon. Dus als het lettertype 12pt is, dan moet voor het web de regelafstand 15pt of 16pt zijn.

Het bepalen van de juiste regelafstand vergt enige finesse, maar hieronder vindt u een voorbeeld van hoe uw code eruit zou moeten zien:
lichaam(

lettergrootte: 12px;
lijnhoogte: 16px;
}

3. Offertes afhandelen

Het verwerken van offertes dient in de tekstmarges te gebeuren. Als aanhalingstekens samensmelten met tekst, doorbreken ze de linkermarge en verstoren ze het rijm van het tekstblok. Het hanteren van aanhalingstekens verstoort de linkeruitlijning en balans niet en verbetert daardoor de leesbaarheid.

Dit kan eenvoudig worden bereikt met CSS met behulp van het blockquote-element:
blokcitaat (
tekstinspringing: -0,8em;
lettergrootte: 12px;
}

Negatieve inspringing is afhankelijk van het lettertype, de lettergrootte en de marges.

4. Verticaal ritme

Het basislijnraster vormt de basis voor een consistent typografisch ritme op de pagina. Het zorgt ervoor dat lezers de tekst gemakkelijk kunnen volgen, wat de leesbaarheid vergroot. Constant ritme erin verticale ruimte houdt tekst vast in een constant raster, zodat de verhoudingen en balans over de hele pagina hetzelfde blijven, ongeacht de lettergrootte, regelafstand of regellengte.

Om het verticale ritme te behouden met behulp van CSS, heb je de afstand tussen elementen en regelafstand(leidend) was gelijk aan de grootte van het basislijnraster. Stel dat u 15px gebruikt basislijnraster, wat impliceert dat er 15px tussen elke rasterlijn zit. De regelafstand is 15px en de afstand tussen de alinea's is ook 15px. Hier is een voorbeeld:
lichaam(
lettertypefamilie: Helvetica, schreefloos;
lettergrootte: 12px;
lijnhoogte: 15px;
}

P(
marge-onder: 15px;
}

Hierdoor past elke paragraaf in een raster terwijl het verticale ritme van de tekst behouden blijft.

5. Ophanglijnen boven en onder

Bovenophangend touwtje- een regel tekst of een woord aan het einde van een alinea. Onderste hangende lijn- een woord of korte tekstregel aan het begin of einde van een kolom die gescheiden is van de rest van de tekst. De bovenste en onderste hangende lijnen vormen ongemakkelijke stukjes, onderbreken het oog van de lezer en beïnvloeden de leesbaarheid. Dit kan worden vermeden door de lettergrootte, de regelafstand, de regelafstand en de regelafstand te vergroten letterafstand of door regeleinden handmatig in te voeren.

Helaas nee eenvoudige manier voorkom bungelende lijnen met behulp van CSS. Eén manier om er vanaf te komen werd hierboven beschreven, een andere is jQWidon’t, een plug-in voor jQuery die niet-brekende ruimtes tussen de laatste twee woorden van het element.

6. Selectie

Belangrijk markeer woorden zonder de lezer af te leiden. Cursieve stijl wordt vaak gezien als perfecte vorm afvoer. Enkele andere veel voorkomende vormen van nadruk zijn: vetgedrukt, hoofdletters, kleinkapitalen, lettergrootte, kleur, onderstreping of ander lettertype. Welke je ook gebruikt, probeer er maar één te gebruiken. Combinaties zoals kleinkapitalen – vet – cursief leiden af en zien er ongemakkelijk uit.

Hier zijn enkele manieren om te markeren met behulp van CSS:
overspanning (
lettertype: cursief;
}

H1 (
lettertypegewicht:vet;
}

H2 (
teksttransformatie: hoofdletter;
}

B (
lettertypevariant: small-caps;
}
Houd er rekening mee dat font-variant alleen werkt als het lettertype kleinkapitalen ondersteunt.

Wanneer u met een tekststijl werkt, kunt u de benodigde afstand tussen tekens, woorden en regels instellen. Dergelijke afstanden worden in elke eenheid gespecificeerd CSS-afmetingen, of het nu px , pt , em of anderen zijn. Een uitzondering vormen percentages: deze kunnen worden gebruikt om de afstand tussen regels in te stellen (voorloop), maar ze werken niet bij het instellen van de afstand tussen tekens of woorden.

CSS-tekenafstand: letterafstand

U kunt de tekenafstand instellen met CSS-eigenschappen letter-afstand. Naast de gebruikelijke waarden (positief en negatief) kunt u ook de waarden overerven (om de waarde van de ouder over te nemen) en normaal (als u de normale afstand tussen tekens wilt retourneren).

Een voorbeeld van het schrijven van een interkarakterinterval:

P (letterafstand: 2em; )

Afstand tussen woorden: woordafstand

De CSS-eigenschap word-spacing verschilt van de vorige doordat deze de afstand tussen woorden instelt, niet tussen tekens. Voor van dit pand normale en erfelijke waarden worden ook verstrekt. U kunt negatieve waarden opgeven. Hieronder ziet u een voorbeeld van een stijlinvoer:

P (woordafstand: 6px; )

Lijnafstand: lijnhoogte

Met behulp van de CSS-eigenschap regelhoogte kunt u de afstand tussen tekstregels instellen. Zoals aan het begin van het onderwerp werd gezegd, kunt u, naast andere meeteenheden, percentages gebruiken om de voorsprong in te stellen. Het is ook mogelijk om de waarde als vermenigvuldiger te schrijven (getallen groter dan 0): om de afstand te berekenen, vermenigvuldigt de browser de lettergrootte met gegeven nummer. Negatieve waarden werken niet. De beschikbare waarden zijn normaal en erven.

Hieronder ziet u een voorbeeld van hoe u interline kunt maken CSS-afstand:

P (lijnhoogte: 180%; )

In de schermafbeelding kun je zien hoe de tekst eruit ziet met alle drie de eigenschappen:

Screenshot: Spatiëring in CSS

Resultaten

Wanneer u de afstand tussen woorden, tekens of regels instelt, zorg er dan allereerst voor dat de resulterende tekst gemakkelijk leesbaar is. Met dergelijke eigenschappen moet zorgvuldig worden omgegaan en altijd met mate worden gebruikt, zonder fanatisme, anders dreigt alle tekstinhoud te veranderen in een onleesbare reeks letters.

IN CSS-afstand Het is heel gemakkelijk om tussen de lijnen in te stellen. Hiervoor bestaat een speciale eigenschap. Maar er zijn natuurlijk nog veel meer parameters die universeel zijn en op tekst kunnen worden toegepast.

Als er geen instellingen worden gedaan, worden de standaardwaarden ingesteld. Indien gewenst kunt u deze afstand wijzigen. De waarde kan een percentage of pixels zijn.

Rij hoogte

In CSS kan de afstand tussen lijnen worden gedemonstreerd door de volgende afbeelding.

De afbeelding hierboven toont de parameters met de bijbehorende afstanden. De tekst bevindt zich in de lettergrootteruimte. Houd er rekening mee dat de tekstregel niet onderaan begint, maar iets daarboven. De ruimte hieronder is bedoeld voor letters met onderliggende elementen (g, y, enzovoort).

Merk op dat de ruimte tussen de blokken met lettergrootte leidend wordt genoemd. In HTML en CSS verschijnt deze eigenschap op geen enkele manier, maar wel in andere grafische en teksteditors. Bijvoorbeeld in Adobe Photoshop.

In de bovenstaande afbeelding ziet u waar u regelafstanden in Photoshop kunt opgeven. En ernaast staat de parameter lettergrootte.

Voorbeelden van het gebruik van lijnhoogte

In CSS kan de afstand tussen regels worden ingesteld als een percentage. Hieronder wordt een illustratief voorbeeld gegeven.

In het geval dat kleine waarde Het zal voor de gebruiker van uw site lastig zijn om dit te lezen.

De afstand kan ook worden gewijzigd door de lettergrootte. Als het verschil tussen de hoofdparameters in aantallen heel verschillend is, wordt dit verschil gecompenseerd door de voorloop te vergroten.

Subtiliteiten van ontwerp

In CSS kan de afstand tussen de regels verder worden aangepast met verschillende opvullingen. Laten we naar het voorbeeld in de afbeelding kijken.

In ons geval zal het veld “Element” tekst bevatten. Opvulling is de opvulling binnen een object, en marge is de opvulling achter het object. Rand is een kader. Het kunnen 0 pixels zijn, maar ook 100.

De volgende afbeelding toont alle opvulling, rand en lijnhoogte van de tekst in één keer.

Als uw tekst klein is, slechts één regel, of elke regel erin aparte paragraaf, dan kan de afstand worden aangepast door inspringen tussen deze paragrafen. Dat wil zeggen dat maring en opvulling tussen lijnen in één element geen effect hebben. Ze creëren alleen inkepingen langs de randen van het object. Het object is de hele alinea, niet de regels erin. Het is belangrijk om hier niet in de war te raken.

In gevallen waarin er veel regels zijn en dit allemaal in één object staat, wordt aanbevolen om het lettertype met de hoofdparameters te wijzigen.

Hoe u de afstand tussen CSS-regels kunt vergroten

De afstand tussen HTML-regels kan voor elke klasse of voor alle alinea's in de tekst worden opgegeven. Als je het als volgt opgeeft: p ( line-height:20px; ), dan hebben absoluut alle alinea's op de pagina regels van 20 pixels. Indien nodig binnen verschillende plaatsen verschillende maten, dan wordt aanbevolen om als volgt te werk te gaan.

Wij schrijven stijlen.

Klasse1 ( lijnhoogte:20px; )

Klasse2 (lijnhoogte:16px;)

Klasse3 ( lijnhoogte:12px; )

Laten we voor de duidelijkheid een kader toevoegen, zodat u kunt zien dat het werkt. In de toekomst moet het worden verwijderd.

Let op: in het derde geval liep de streep over de tekst. Dit komt omdat deze groter is dan de lijnhoogte. Daarom is het belangrijk ervoor te zorgen dat dergelijke tegenstrijdigheden niet bestaan. Als u een kleine lijnhoogte maakt, verklein dan het lettertype dienovereenkomstig.

Het wordt afgeraden om de tekst te klein te maken en de ruimte tussen de regels te klein. Omdat geen enkele gebruiker dit allemaal rustig kan lezen. Zijn ogen zullen snel moe worden. Zoekmachines Ook vinden ze dat de tekst gebruiksvriendelijk moet zijn.

Bovendien, binnen de laatste tijd Er wordt veel nadruk gelegd op gemak mobiele gebruikers. Daar zeggen de aanbevelingen altijd dat de lettergrootte normaal moet zijn, niet klein. Dit heeft vooral invloed op links. Vanwege hun kleine formaat zal het voor de gebruiker moeilijk zijn om door de site te navigeren.

De Google-zoekmachine heeft speciaal gereedschap, wat helpt bij deze analyse. Het is erg handig voor webmasters.

Hier is een voorbeeld van de resultaten die kunnen optreden.

Eigendom lijn-hoogte stelt de afstand tussen tekstregels in (regelafstand). De eigenschap stelt de ruimte tussen tekstregels niet in zoals het lijkt, maar stelt in hoogte van de tekstregel lijn-hoogte - . Dit betekent dat de werkelijke ruimte tussen de regels als volgt wordt berekend: lettergrootte lijn-hoogte = . Dit betekent dat de werkelijke ruimte tussen de regels als volgt wordt berekend:= afstand tussen tekstregels.

Eigendom lijn-hoogte Of andersom