Verkkosuunnittelu on aina lainannut periaatteita ja määritelmiä grafiikka- ja painosuunnittelusta. Tämä pätee erityisesti web typografiaan ja tapaan, jolla saamme kirjeenmuodot verkkosivuillamme. Nämä rinnakkeet eivät ole aina 1-1 käännöksiä, mutta voitte varmasti nähdä, missä yksi kurinalaisuus on vaikuttanut toisiinsa. Tämä on erityisen ilmeistä, kun tarkastellaan perinteisen typografisen sanan "johtavan" ja CSS- ominaisuuden välistä suhdetta, joka tunnetaan nimellä "line-height".
Johdon tarkoitus
Kun ihmiset käsittelivät metalli- tai puukirjaimia manuaalisesti painetun sivun typografian luomiseksi, lyijyjohdot sijoitettiin vaakasuoran tekstirivin väliin, jotta ne voisivat luoda välimatkan näiden viivojen väliin. Jos haluat suuremman tilan, lisäät suurempia lyijypalasia. Näin syntyi termi "johtava". Jos etsitte käsikirjoituksen ja päämiesten kirjaa "johtavasta", se lukisi jotain - "peräkkäisten lineaaristen linjojen perusviivojen välinen etäisyys".
Johtava Web-suunnittelu
Digitaalisessa suunnittelussa viitekehystä viitataan edelleen tekstin riviin. Monet ohjelmat käyttävät tätä täsmällistä termiä, vaikka varsinaista lyijyä ei ilmeisesti käytetä näissä ohjelmissa. Tämä on hyvä esimerkki uusista muotoilutoimista lainaamalla ideoita perinteisiltä, vaikka tämän periaatteen tarkka toteutus on muuttunut.
Web-suunnittelussa ei ole CSS-ominaisuutta "johtavaksi". Sen sijaan CSS-ominaisuutta, joka käsittelisi tätä visuaalista tekstin näyttöä, kutsutaan rivin korkeudeksi. Jos haluat, että tekstissä on enemmän tilaa horisontaalisten tekstirivien välillä, käytät tätä ominaisuutta. Oletetaan esimerkiksi, että halusit lisätä rivikohdan kaikkia kohtia sivustosi
Tämä olisi nyt 1,5 kertaa normaalia linjan korkeutta, joka perustuu sivun oletusfonttikokoon (joka on normaalisti 16px).
Milloin Line-Height -arvoa käytetään
Kuten yllä on yksityiskohtaisesti kuvattu, viivan korkeus on sopiva tekstin viivojen välittämiseen kappaleissa tai muissa tekstilohkoissa. Jos linjojen välillä on liian vähän tilaa, tekstistä voi tulla sekaisin ja sitä on vaikea lukea katsojille sivustollesi. Vastaavasti, jos rivit ovat liian kaukana toisistaan sivulla, normaali lukemisen virta katkeaa ja lukijoilla on vaikeuksia tekstin takia. Siksi haluat löytää sopivan määrän rivi-korkeusetäisyyttä käytettäväksi. Voit myös testata suunnittelusi todellisten käyttäjien kanssa saadakseen palautetta sivun luettavuudesta .
Kun et käytä linjan korkeutta
Älä sekoita viivojen korkeutta pehmusteella tai marginaaleilla, joiden avulla voit lisätä välilyöntejä sivusi suunnitteluun, mukaan lukien otsikon tai kappaleiden alapuolella. Tämä etäisyys ei johda, joten sitä ei käsitellä linjan korkeudella.
Jos haluat lisätä tilan tietyissä tekstin elementeissä, käytä marginaaleja tai täyttöjä. Palaa edelliseen CSS-esimerkkiin, jota käytimme, voimme lisätä tämän:
pääp {linjan korkeus: 1.5; marginaalipohja: 24px; } Tällöin sivun rivikohdan (joka on
Lähes kaikissa tapauksissa tämä näyttäisi samalta kuin edellinen CSS.
Sano että halusit lisätä välilyöntialuetteloita luettelon sisältäessä listan, jossa on "palvelut-valikko" -luokka, käytät marginaaleja tai pehmusteita, EI rivin korkeutta. Joten tämä olisi tarkoituksenmukaista.
.palvelut-valikko li {