Webbdesign har alltid lånat huvudmän och definitioner från grafisk och tryckdesign. Detta gäller speciellt när det gäller webtypografi och hur vi får brevformar på våra webbsidor. Dessa paralleller är inte alltid 1 till 1 översättningar, men du kan säkert se var en disciplin har påverkat den andra. Detta är särskilt tydligt när man betraktar förhållandet mellan den traditionella typografiska termen "ledande" och CSS-egenskapen som kallas "linjehöjd".
Syftet med ledande
När folk brukade manuellt rätta metall- eller träbokstäver för att skapa typografi för en tryckt sida, placerades tunna blybitar mellan horisontella textlinjer för att skapa avstånd mellan dessa linjer. Om du ville ha ett större utrymme, skulle du sätta in större blybitar. Så här var termen "ledande" mynt. Om du tittar på begreppet "ledande" i en bok om typografisk design och huvudmän, skulle det läsa något som till följd av - "avståndet mellan grundlinjen för successiva linjer av typen".
Ledande inom webbdesign
I digital design används termen ledande fortfarande för att hänvisa till avståndet mellan textrader. Många program använder den här exakta termen, även om verklig ledning naturligtvis inte används i dessa program. Detta är ett utmärkt exempel på nya former av designupplåningsidéer från traditionella, även om den exakta implementeringen av den principen har förändrats.
När det gäller webbdesign, finns det ingen CSS-egenskap för "ledande". I stället kallas CSS-egenskapen som hanterar denna visuella textvisning, linjens höjd. Om du vill att din text ska ha ytterligare utrymme mellan horisontella textlinjer, skulle du använda den här egenskapen. Till exempel, säg att du ville öka linjens höjd för alla stycken inuti main p { linjehöjd: 1,5;}
Detta skulle nu vara 1,5 gånger den normala linjens höjd, baserat på sidans standardstorlekstorlek (som normalt är 16px). Som detaljerad ovan är linjens höjd lämplig att använda för att rymma textlinjerna i stycken eller andra textblock. Om det finns för lite utrymme mellan linjer kan texten bli jumbled och svår att läsa för tittare på din webbplats. På samma sätt, om linjerna är placerade för långt ifrån varandra på sidan, kommer det normala flödet av avläsning att avbrytas och läsarna kommer att ha problem med din text av den anledningen. Det är därför du vill hitta den lämpliga mängden linjehöjdavstånd som ska användas. Du kan också testa din design med faktiska användare för att få deras synpunkter på läsbarheten av sidan. Förväxla inte linjens höjd med vadderingen eller marginalerna som du skulle använda för att lägga till blankutrymme till din sidans design, inklusive underrubrik eller stycken. Det avståndet är inte ledande, och därför hanteras det inte av linjens höjd. Om du vill lägga till plats under vissa textelement, skulle du använda marginaler eller vadderingar. Kommer tillbaka till föregående CSS-exempel som vi använde kan vi lägga till följande: main p { linjehöjd: 1,5; marginal-botten: 24px;}
Detta skulle fortfarande ha 1,5 linjens höjd mellan rader av text för vår sids stycke (de som ligger inuti main p { linjehöjd: 1,5; padding-bottom: 24px;} I nästan alla fall skulle detta visa samma som tidigare CSS. Säg att du ville lägga till mellanslag under listobjekt som var inuti en lista med en klass av "services-menu", du skulle använda marginaler eller vadderingar för att göra det, INTE linjens höjd. Så det skulle vara lämpligt. .services-menu li {< vadderande-botten: 30px;} Du skulle bara använda linjens höjd här om du ville ställa in avståndet mellan texten i listorna själva, förutsatt att de hade långa textrader som kunde springa till flera rader för varje punktpunkt. När ska man använda linjehöjd
När man inte ska använda linjehöjd
