Lære om ledende i webdesign

Webdesign har alltid lånt oppdragsgivere og definisjoner fra grafikk- og trykkdesign. Dette gjelder spesielt når det gjelder webtypografi og måten vi får brevformularer på våre nettsider på. Disse parallellene er ikke alltid 1 til 1 oversettelser, men du kan sikkert se hvor en disiplin har påvirket den andre. Dette er spesielt tydelig når du vurderer forholdet mellom den tradisjonelle typografien termen "ledende" og CSS-egenskapen kjent som "linjehøyde".

Formålet med ledende

Når folk pleide å manuelt håndtere metall- eller trebokstaver for å lage typografi for en trykt side, ble tynne blybiter plassert mellom horisontale tekstlinjer for å skape mellomrom mellom disse linjene. Hvis du ville ha et større rom, ville du sette inn større stykker bly. Dette er hvordan begrepet "ledende" ble myntet. Hvis du så opp begrepet "ledende" i en bok om typografisk design og hovedpersoner, ville det lese noe som følge av - "avstanden mellom basislinjene av suksessive linjestykker."

Ledende i Webdesign

I digital design er begrepet ledende fortsatt brukt til å referere til avstanden mellom tekstlinjer. Mange programmer bruker dette nøyaktige uttrykket, selv om det egentlig ikke er ledig bruk i disse programmene. Dette er et godt eksempel på nye former for design låneideer fra tradisjonelle, selv om den nøyaktige implementeringen av det prinsippet har endret seg.

Når det gjelder webdesign, er det ingen CSS-egenskap for "ledende". I stedet vil CSS-egenskapen som håndterer denne visuelle visningen av tekst kalles linjehøyde. Hvis du vil at teksten skal ha ekstra mellomrom mellom horisontale tekstlinjer, vil du bruke denne egenskapen. For eksempel, si at du ønsket å øke linjehøyden for alle avsnittene i

element på nettstedet ditt, kan du gjøre det slik:

main p { linjehøyde: 1,5;}

Dette vil nå være 1,5 ganger den normale linjens høyde, basert på standard skriftstørrelse på siden (som vanligvis er 16px).

Når skal du bruke linjehøyde

Som beskrevet ovenfor er linjehøyde egnet for å plassere tekstlinjene i avsnitt eller andre tekstblokker. Hvis det er for lite mellomrom mellom linjer, kan teksten bli jumbled og vanskelig å lese for seere på nettstedet ditt. På samme måte, hvis linjene er plassert for langt fra hverandre på siden, vil den normale lesestrømmen bli avbrutt, og leserne vil ha problemer med teksten av den grunn. Det er derfor du vil finne riktig mengde linjehøydeavstand å bruke. Du kan også teste design med faktiske brukere for å få tilbakemelding om lesbarheten av siden.

Når du ikke skal bruke linjehøyde

Ikke bland linjens høyde med polstring eller marginer som du vil bruke for å legge til hvitt plass til sidens design, inkludert under overskrift eller avsnitt. Denne avstanden er ikke ledende, og derfor håndteres den ikke av linjehøyde.

Hvis du vil legge til plass under bestemte tekstelementer, vil du bruke marginer eller polstring. Å gå tilbake til det forrige CSS-eksemplet vi brukte, kan vi legge til dette:

main p { linjehøyde: 1,5; margin-bunn: 24px;}
Dette vil fortsatt ha 1,5 linjehøyde mellom tekstlinjene for sidens avsnitt (de som er innenfor
element). De samme avsnittene vil også ha 24 piksler av hvite plass under hver av dem, noe som gjør det mulig for leserne å enkelt identifisere et avsnitt fra en annen og gjøre nettsidenes lese lettere å gjøre. Du kan også bruke polstringsegenskapen i stedet for marginer her:
main p { linjehøyde: 1,5; polstring-bunn: 24px;}
I nesten alle tilfeller vil dette vise det samme som forrige CSS.

Si at du ønsket å legge til mellomrom under listen elementer som var inne i en liste med en klasse av "services-menu", du ville bruke marginer eller polstring for å gjøre det, IKKE linjehøyde. Så dette ville være hensiktsmessig.

.services-menu li {< polstring-bunn: 30px;}
Du vil bare bruke linjehøyde her hvis du vil sette avstanden til teksten inne i listene selv, forutsatt at de hadde lange tekstrapporter som kan kjøre til flere linjer for hvert punktpunkt.