Web dizainas visada pasiskolino principus ir apibrėžimus iš grafikos ir spausdinimo dizaino pasaulio. Tai ypač aktualu, kai kalbama apie žiniatinklio tipografiją ir į tai, kaip mes siunčiame formas mūsų tinklalapiuose. Šios paralelės ne visada yra nuo 1 iki 1 vertimų, tačiau jūs tikrai galite pamatyti, kur viena disciplina paveikė kitą. Tai ypač akivaizdu, kai atsižvelgiate į santykį tarp tradicinio tipografijos termino "vadovaujantis" ir CSS nuosavybės, vadinamo "linijos aukščio".
Vedimo tikslas
Kai žmonės rankiniu būdu naudojo metalines arba medines raides, kad būtų sukurta spausdinimo versija spausdintam lapui, tarp horizontalių teksto eilučių buvo dedami ploni švino gabalai, siekiant sukurti tarpą tarp šių eilučių. Jei norėtumėte didesnio ploto, įdėkite daugiau švino. Štai kaip buvo suplanuotas terminas "pirmaujanti". Jei knygoje apie tipografinį dizainą ir principus ieškojote sąvokos "pirmaujantis", tai skaitė kažką dėl "atstumo tarp nuoseklių eilučių bazinių linijų".
Vedantis į Web dizainą
Skaitmeniniame projekte terminas "lead" vis dar naudojamas norint atkreipti dėmesį į tarpus tarp teksto eilučių. Daugelis programų naudoja tą patį terminą, nors akivaizdu, kad faktinis švinas nėra naudojamas šiose programose. Tai puikus naujų tradicinių skolinimosi idėjų pavyzdžių pavyzdys, nors šis principas buvo tiksliai įgyvendintas.
Kalbant apie žiniatinklio dizainą, CSS nuosavybė nėra "pirmaujanti". Vietoj to, CSS savybė, kuri tvarkytų šį vaizdinį teksto rodymą, vadinama linijos aukščiu. Jei norite, kad jūsų tekste būtų daugiau vietos tarp horizontalių teksto eilučių, naudokite šią nuosavybę. Pvz., Tarkim, norėtumėte padidinti linijos aukštį visoms pastraipoms jūsų svetainės
Tai dabar bus 1,5 karto didesnė už įprastą linijos aukštį, atsižvelgiant į numatytąjį puslapio šrifto dydį (paprastai 16 pikselių).
Kada naudoti linijos aukštį
Kaip nurodyta pirmiau, linijos aukštis tinkamas naudoti teksto eilučių išdėstymui pastraipose ar kituose teksto blokuose. Jei tarp eilučių yra per mažai vietos, tekstas gali tapti iškraipytas ir sunkiai perskaitytas jūsų svetainės žiūrovams. Panašiai, jei eilutės yra išdėstytos per toli vienas nuo kito puslapyje, normalus skaitymo srautas bus nutrauktas, todėl skaitytojai turės problemų dėl jūsų teksto dėl šios priežasties. Štai kodėl norite rasti tinkamą kiekį tarpo tarp eilučių ir naudojimo. Taip pat galite išbandyti savo dizainą su faktiniais vartotojais, kad gautumėte atsiliepimų apie puslapio įskaitomumą .
Kai nenaudojate linijos aukščio
Negalima supainioti linijos aukščio su užpildu ar paraštėmis, kurias naudosite pridėti tarpą prie puslapio dizaino, įskaitant antraštę ar pastraipas. Šis tarpas nėra pirmaujanti, todėl jo nereikia tvarkyti pagal linijos aukštį.
Jei norite pridėti vietos tam tikrais teksto elementais, naudokite maržas arba užpildą. Grįžtant prie ankstesnio CSS pavyzdžio, kurį mes naudojome, galėtume pridėti šį:
pagrindinis p (line-height: 1.5; maržos apačia: 24 px; } Tai vis tiek turės 1.5 eilutės aukštį tarp teksto eilučių mūsų puslapio pastraipoje (tos, kurios yra elemento
Beveik visais atvejais tai bus tokia pati kaip ankstesnė CSS.
Pasakykite, kad norite įtraukti tarpus po sąrašo elementais, esančiais sąraše su "meniu paslaugų" klase, todėl naudokite maržas arba užpildą, o ne linijos aukštį. Taigi tai būtų tinkama.
.services-menu ({padding-bottom: 30px; }Čia naudosite tik linijos aukštį, jei norėtumėte nustatyti teksto tarpą pačiame sąrašo elementuose, darant prielaidą, kad jie turi ilgai trunkančius tekstus, kurie gali eiti į kelias eilutes kiekvienam taškui.