Učenje o vodenju v spletnem oblikovanju

Spletno oblikovanje je vedno izposodilo principe in definicije iz sveta grafičnega in tiskalnega oblikovanja. To še posebej velja, ko gre za spletno tipografijo in način, na katerega dobimo pisma na naših spletnih straneh. Te vzporednice niso vedno 1 do 1 prevod, vendar lahko zagotovo vidite, kje ena disciplina je vplivala na drugo. To je še posebej očitno, če upoštevate razmerje med tradicionalnim tipografskim izrazom "leading" in lastnostjo CSS, znano kot "line-height".

Namen vodenja

Ko so ljudje ročno uporabljali kovinske ali lesene črke, da bi ustvarili tipografijo za natisnjeno stran, so med vodoravnimi črtami besedila nameščeni tanki kosi svinca, da bi ustvarili razmik med temi črtami. Če bi želeli večji prostor, bi vstavili večje koščke svinca. Tako je bil narejen izraz "vodilni". Če ste pogledali izraz "vodilni" v knjigi o tipografskem oblikovanju in ravnateljih, bi to prebralo nekaj, kar bi vplivalo na - "razdalja med temeljnimi črtami zaporednih vrstic vrst".

Glavno v spletnem oblikovanju

V digitalnem dizajnu se izraz, ki vodi, še vedno uporablja za razmik med vrsticami besedila. Mnogi programi uporabljajo ta natančen izraz, čeprav dejansko svinčenje v teh programih očitno ni uporabljeno. To je odličen primer novih oblik oblikovanja sposodja idej tradicionalnih, čeprav se je natančno izvajanje tega načina spremenilo.

Ko gre za spletno oblikovanje, ni lastnosti CSS za »vodilno«. Namesto tega bo lastnost CSS, ki bi obravnavala ta vizualni prikaz besedila, imenovana višina linije. Če želite, da besedilo vsebuje več prostora med horizontalnimi črtami besedila, uporabite to lastnost. Recimo, da želite povečati višino vrstic za vse odstavke v elementu

vaše spletne strani , lahko to naredite tako:

glavna p {line-height: 1,5; }

To bi zdaj znašalo 1,5-kratno običajno višino vrstice, ki temelji na privzeti velikosti strani strani (običajno 16-krat).

Kdaj uporabiti višino linije

Kot je opisano zgoraj, je višina vrstice primerna za uporabo vrstic besedila v odstavkih ali drugih blokih besedila. Če je med vrsticami premalo prostora, se lahko besedilo zažene in ga je težko brati za gledalce na vašo spletno stran. Podobno, če so vrstice razmaknjene predaleč na strani, bo običajen tok branja prekinjen, bralci pa bodo zaradi tega imeli težave z besedilom. Zato želite iskati ustrezno količino razmika med vrsticami in višino. Prav tako lahko preizkusite svojo zasnovo z dejanskimi uporabniki, da dobite povratne informacije o berljivosti strani .

Če ne želite uporabljati višine linije

Ne zmešajte višine linije z oblazinjenjem ali robovi, ki bi jih uporabili za dodajanje presledkov v oblikovanje vaše strani, vključno pod naslovom ali odstavkom. Ta razmik ne vodi, zato se ne obravnava z višino linije.

Če želite dodati prostor pod določenimi besedilnimi elementi, uporabite robove ali oblazinjenje. Če se vrnemo na prejšnji primer CSS, ki smo ga uporabili, lahko dodamo naslednje:

glavna p {line-height: 1,5; margin-bottom: 24px; }

To bi še vedno imelo višino vrstice med vrsticami besedila za odstavek naše strani (tiste v elementu

). Ti isti odstavki bi imeli tudi 24 slikovnih pik svobode pod vsakim od njih, kar omogoča vizualne prelome, ki bralcem omogočajo, da zlahka prepoznajo en odstavek iz drugega in olajšajo branje spletnega mesta. Tu lahko uporabite tudi lastnost oblazinjenja namesto margin:

glavna p {line-height: 1,5; padding-bottom: 24px; }

V skoraj vseh primerih bi to prikazalo enako kot prejšnji CSS.

Recite, da želite dodati presledke pod elemente seznama, ki so bili znotraj seznama z razredom »storitve-meni«, uporabite robove ali oblazinjenje, da to storite, NE višina vrstice. Torej bi bilo to primerno.

.services-menu li { Tu bi uporabili samo višino vrstice, če bi želeli nastaviti razmik med besedilom znotraj elementov seznama, pod pogojem, da so imeli dolge programe besedila, ki bi lahko potekali na več vrstic za vsako točkovno točko.