Learje oer liedend yn webûntwerp

Web design hat altyd prinsipes en definysjes út 'e wrâld fan grafyske en print ûntwerpen. Dit is benammen wier as it giet om web typografy en de manier wêrop't wy letterformuliers op ús websiden krije. Dizze parallels binne net altyd 1 oant 1 oersettingen, mar jo kinne wis wêze wêr't in discipline de oare beynfloede hat. Dit is foaral evident as jo de relaasje beskôgje tusken de tradysjonele typografyske term "liedend" en de CSS- eigenskip dy't bekind is as "line-height".

De Doel fan Leading

As minsken mei hânmetaal of houtbrêken manulearre wurde om de typografy foar in gedachte side te meitsjen, waarden dûnsige stikken liedten tusken horizontale rigels fan tekst pleatst om de ôfstân tusken dizze rigels te meitsjen. As jo ​​in gruttere romte woe, soene jo gruttere stikken liede ynfoegje. Dit is hoe't de term "liedend" opsteld waard. As jo ​​de term "liedend" yn in boek útsprekke oer typografyske ûntwerp en prinsipes, soe it wat lêze foar it effekt fan - "de ôfstân tusken de baselinen fan opfolgjende rigels fan type".

Leading in web design

Yn digitale ûntwerp wurdt de liedende term noch brûkt om te ferwizen nei de ôfstân tusken tekstlinen. In soad programma's brûke dizze krekte term, ek al is de eigentlike lead in fanselssprekkend net brûkt yn dy programma's. Dit is in grut foarbyld fan nije foarmen fan ûntwerp fan ideeën út tradysjonele, ek al is de krekte útfiering fan dat prinsipe feroare.

As it giet om web-ûntwerp, is der gjin CSS-eigenskip foar "liedend." Ynstee dêrfan neamde de CSS-eigenskip dy't dizze fisuele werjaan fan tekst behannelje soe wurdt linen-hichte neamd. As jo ​​wolle dat jo tekst ekstra romte hat tusken horizontale rigels fan tekst, jo brûke jo dizze eigenskip. As jo ​​bygelyks sizze, woe jo de linehichte foar alle paragrafen yn it haad fergrutsje, dan kinne jo dit dwaan:

haad p {line-height: 1.5; }

Dit soe no 1.5 kear de gewoane linehichte wurde, basearre op de standert lettertypegrutte fan 'e side (wat normaal 16px) is.

Wannear't Line-Height brûke

As boppesteande hjirboppe is line-hichte goed te brûken om de tekstlinen yn paragrafen of oare tekstblokken te romte. As der te min romte tusken rigels is, kin de tekst wekker wurde en swier om te lêzen foar viewers nei jo side. Lykas as de linen te farren apart binne op 'e side, sil de gewoane flak fan it lêzen ûnderbrekke wurde en lêzers sille dêrom problemen hawwe mei jo tekst. Dêrom wolle jo de passende oantal fan line-hichte-ôfstannen fine om te brûken. Jo kinne jo ûntwerp ek testje mei echte brûkers om harren feedback oer te lêzen oer de lêsberens fan 'e side .

Wannear't gjin Line-Hight te brûken is

Ferwiderje de linehichte mei de padding of margens dy't jo brûke wolle om websiden te meitsjen oan jo ûntwerp, lykas ûnder de kop en de paragrafen. Dizze ôfstân is net liedend, en dus wurdt it net troch line-hichte behannele.

As jo ​​romte taheakje wolle ûnder beskate teksteleminten, brûke jo margen of padding. Gean werom nei it foarige CSS-foarbyld we brûke, kinne wy ​​dit taheakje:

haad p {line-height: 1.5; margin-bottom: 24px; }

Dit soe de 1.5 linehichte hawwe tusken tekstlinen foar de side fan 'e side (de som's yn it elemint). Dizze deselde paragrafen soene ek 24 piksels fan whitespace hawwe ûnder elk fan har, wêrtroch't de fisuele breaks makket dat lêzers maklik lêze kinne ien paragraf fan in oar en makket webstee makliker te meitsjen. Jo kinne ek de polding-eigendom brûke op plakken fan marren hjir:

haad p {line-height: 1.5; padding-bottom: 24px; }

Yn hast alle gefallen soe dit itselde as it foarige CSS sjen litte.

Sizje dat jo wierskynlik ûndertekenen ûnder lispunten tafoege hawwe dy't yn binnen in list binne mei in klasse fan "tsjinst menu", jo brûke marten of padding om dit te meitsjen, NOT line hight. Sa soe dit passend wêze.

.services-menu li { Jo soenen hjir de line-hichte brûke as jo de ôfstân fan 'e tekst yn' e list-items sels sette, nammentlik dat se langgeande rûnten fan tekst wiene dy't op elk linen foar elke kûle punt kinne.