Webdesign heeft altijd principals en definities geleend uit de wereld van grafische vormgeving en printontwerp. Dit geldt met name als het gaat om webtypografie en de manier waarop we letterformulieren op onze webpagina's krijgen. Deze parallellen zijn niet altijd 1 op 1 vertalingen, maar je kunt zeker zien waar de ene discipline de andere heeft beïnvloed. Dit is vooral duidelijk wanneer u de relatie tussen de traditionele typografische term 'leading' en de CSS-eigenschap die bekend staat als 'line-height' beschouwt.
Het doel van leiden
Wanneer mensen handmatig metalen of houten letters namen om de typografie voor een afgedrukte pagina te maken, werden dunne stukjes lood tussen horizontale tekstregels geplaatst om ruimte tussen die lijnen te creëren. Als u een grotere ruimte wilde, zou u grotere stukken lood invoegen. Dit is hoe de term 'leiden' werd bedacht. Als je de term 'leading' in een boek opzoekt over typografisch ontwerp en principals, zou het iets lezen met de betekenis van - 'de afstand tussen de basislijnen van opeenvolgende regels van het type'.
Toonaangevend in webdesign
Bij digitaal ontwerp wordt de term 'leiden' nog steeds gebruikt om te verwijzen naar de afstand tussen tekstregels. Veel programma's gebruiken deze exacte term, hoewel de daadwerkelijke lead duidelijk niet in die programma's wordt gebruikt. Dit is een geweldig voorbeeld van nieuwe vormen van ontwerp waarbij ideeën worden geleend van traditionele, hoewel de exacte implementatie van dat principe is veranderd.
Als het gaat om webdesign, is er geen CSS-eigenschap voor 'leading'. In plaats daarvan wordt de CSS-eigenschap die deze visuele weergave van tekst zou behandelen, regelhoogte genoemd. Als u wilt dat uw tekst extra ruimte tussen horizontale tekstregels heeft, gebruikt u deze eigenschap. Stel bijvoorbeeld dat u de regelhoogte wilt vergroten voor alle alinea's binnen de hoofd p { regelhoogte: 1,5;}
Dit zou nu 1,5 keer de normale regelhoogte zijn, gebaseerd op de standaardlettergrootte van de pagina (normaal 16 px). Zoals hierboven uiteengezet, is de regelhoogte geschikt om te gebruiken om de tekstregels in alinea's of andere tekstblokken te verdelen. Als er te weinig ruimte tussen regels is, kan de tekst door elkaar worden gehaald en moeilijk leesbaar zijn voor kijkers op uw site. Evenzo, als de regels te ver uit elkaar staan op de pagina, zal de normale stroom van lezen worden onderbroken en zullen lezers om die reden moeite hebben met uw tekst. Dit is waarom u de juiste hoeveelheid afstand tussen de lijnen wilt gebruiken. U kunt uw ontwerp ook testen met echte gebruikers om feedback te krijgen op de leesbaarheid van de pagina. Verwar line-hoogte niet met de vulling of marges die u zou gebruiken om witruimte toe te voegen aan het ontwerp van uw pagina, inclusief onder kop of alinea's. Die afstand is niet leidend en daarom wordt deze niet behandeld door lijnhoogte. Als u ruimte wilt toevoegen onder bepaalde tekstelementen, gebruikt u marges of opvulling. Terugkomend op het vorige CSS-voorbeeld dat we hebben gebruikt, kunnen we dit toevoegen: hoofd p { regelhoogte: 1,5; margin-bottom: 24px;}
Dit zou nog steeds de 1,5 lijnhoogte tussen tekstregels hebben voor de alinea's van onze pagina's (die binnen de hoofd p { regelhoogte: 1,5; padding-bottom: 24px;} In bijna alle gevallen zou dit hetzelfde zijn als de vorige CSS. Stel dat u afstanden wilt toevoegen onder lijstitems die zich binnen een lijst bevonden met een klasse "services-menu", dan zou u marges of opvulling gebruiken om dit te doen, NIET regelhoogte. Dus dit zou geschikt zijn. .services-menu li {< padding-bottom: 30px;} U zou hier alleen de regelhoogte gebruiken als u de spatiëring van de tekst binnen de lijstitems zelf wilde instellen, ervan uitgaande dat ze lange tekstreeksen hadden die naar meerdere regels konden lopen voor elk opsommingsteken. Wanneer lijnhoogte te gebruiken
Wanneer de lijnhoogte niet moet worden gebruikt
