Leer oor die voorste in webontwerp

Webontwerp het altyd prinsipale en definisies geleen van die wêreld van grafiese en drukontwerp. Dit geld veral vir webtipe en die manier waarop ons lettervorms op ons webblaaie kry. Hierdie parallelle is nie altyd 1 tot 1 vertalings nie, maar jy kan beslis sien waar een dissipline die ander beïnvloed het. Dit is veral duidelik wanneer u die verband tussen die tradisionele tipografie term "leidende" en die CSS- eienskap bekend as "lynhoogte" oorweeg.

Die doel van Leiding

Wanneer mense met die hand metaal- of houtbriewe gebruik het om die tipografie vir 'n gedrukte bladsy te skep, is dun stukke lood geplaas tussen horisontale lyne teks om spasies tussen die lyne te skep. As jy 'n groter ruimte wil hê, sal jy groter stukke lood inbring. Dit is hoe die term "leier" geskep is. As u die term 'leidende' in 'n boek oor tipografiese ontwerp en prinsipale gekyk het, sou dit iets lees as gevolg van - "die afstand tussen die basislyne van opeenvolgende lyne van die tipe."

Leier in Webontwerp

In digitale ontwerp word die term leier steeds gebruik om te verwys na die spasiëring tussen lyne van teks. Baie programme gebruik hierdie presiese term, alhoewel die werklike voorsprong natuurlik nie in daardie programme gebruik word nie. Dit is 'n goeie voorbeeld van nuwe vorms van ontwerp wat idees van tradisionele kinders leen, hoewel die presiese implementering van die beginsel verander het.

As dit by webontwerp kom, is daar geen CSS-eiendom vir "leading." In plaas daarvan word die CSS-eienskap wat hierdie visuele vertoning van teks hanteer, lynhoogte genoem. As jy wil hê dat jou teks ekstra spasie moet hê tussen horisontale lyne van teks, sal jy hierdie eiendom gebruik. Byvoorbeeld, sê jy wil die lynhoogte vir al die paragrawe in die -element van jou werf verhoog , kan jy dit so doen:

hoof p (lyn-hoogte: 1.5; }

Dit sou nou 1,5 keer die normale lynhoogte wees, gebaseer op die standaard fontgrootte van die bladsy (wat normaalweg 16px is).

Wanneer om lynhoogte te gebruik

Soos hierbo uiteengesit, is lynhoogte geskik om te gebruik om die lyne van teks in paragrawe of ander blokke teks te spasieer. As daar te min spasie tussen lyne is, kan die teks jumbled en moeilik wees om vir kykers na jou werf te lees. Net so, as die lyne te ver uitmekaar op die bladsy geplaas word, sal die normale leesstroom onderbreek word en lesers sal probleme met jou teks hê. Daarom wil jy die toepaslike hoeveelheid lynhoogte spasiëring vind om te gebruik. U kan ook u ontwerp met werklike gebruikers toets om hul terugvoer oor die leesbaarheid van die bladsy te kry .

Wanneer nie lynhoogte gebruik word nie

Moet nie lynhoogte verwar met die pols of marge wat jy sal gebruik om witspasie by jou bladsy se ontwerp in te voeg nie, insluitend onder opskrif of paragrawe. Daardie spasiëring lei nie en word dus nie deur lynhoogte hanteer nie.

As jy ruimte onder sekere tekselemente wil voeg, sal jy marges of vulling gebruik. Gaan terug na die vorige CSS-voorbeeld wat ons gebruik het, kan ons dit byvoeg:

hoof p (lyn-hoogte: 1.5; marge-bodem: 24px; }

Dit het nog steeds die 1,5-lyn hoogte tussen die lyne van teks vir ons bladsy se paragrawe (dié binne die -element). Dieselfde paragrawe sal ook 24 pixels witruimte onder elkeen hê, wat toelaat dat die lesers maklik die een paragraaf van 'n ander identifiseer en die lees van die webwerf makliker maak. Jy kan ook die opvulgoed in plaas van marges hier gebruik:

hoof p (lyn-hoogte: 1.5; opvulling-bodem: 24px; }

In byna alle gevalle sal dit dieselfde vertoon as die vorige CSS.

Sê dat jy 'n spasiëring wou voeg onder lysitems wat in 'n lys was met 'n klas van "dienste-menu". Jy sal marges of vulling gebruik om dit te doen, NIE lynhoogte. Dit sal dus gepas wees.

. Services-menu li { U sal slegs lynhoogte hier gebruik as u die spasiëring van die teks binne die lysitems self wou stel, aangesien hulle lang lopies van teks gehad het wat na verskeie lyne vir elke koeëlpunt kan hardloop.