Web design vždy vypůjčil principy a definice ze světa grafického a tiskového designu. To platí zvláště pokud jde o webovou typografii a způsob, jakým získáváme dopisy na našich webových stránkách. Tyto paralely nejsou vždy 1 až 1 překlady, ale určitě vidíte, kde jedna disciplína ovlivnila druhou. To je obzvláště patrné, když zvážíte vztah mezi tradičním typografickým výrazem "přední" a vlastností CSS známým jako "line-height".
Účel vedoucího
Když lidé používali manuálně kovové nebo dřevěné písmena, aby vytvořili typografii pro tištěnou stránku, byly mezi vodorovnými řádky textu umístěny tenké olověné čáry, aby se vytvořila mezera mezi těmito čarami. Pokud byste chtěli větší prostor, vložili byste větší kusy olova. Takto vznikl termín "vedoucí". Pokud byste se v knize o typografickém designu a principiích podívali na výraz "vedoucí", četli by to něco jako "vzdálenost mezi základními liniemi po sobě jdoucích linií typu".
Vedoucí ve vývoji webových stránek
V digitálním návrhu se termín vedoucí stále používá k odvolání na mezery mezi řádky textu. Mnoho programů používá tento přesný termín, ačkoli skutečné vedení není zřejmě používáno v těchto programech. Je to skvělý příklad nových forem designu, které si půjčují myšlenky od tradičních, i když se přesná implementace tohoto principu změnila.
Pokud jde o návrh webových stránek, neexistuje vlastnost CSS pro "vedoucí". Místo toho vlastnost CSS, která zvládne toto vizuální zobrazení textu, se nazývá výška řádku. Pokud chcete, aby váš text měl další prostor mezi vodorovnými řádky textu, použijte tuto vlastnost. Řekněme například, že chcete zvýšit výšku řádku pro všechny odstavce uvnitř prvku
Toto by nyní činilo 1,5 násobek běžné výšky řádku, založené na výchozí velikosti písma stránky (což je obvykle 16 pixelů).
Kdy použít výšku řádku
Jak je uvedeno výše, výška řádku je vhodná pro zvětšení řádků textu v odstavcích nebo jiných blocích textu. Je-li mezi řádky příliš málo místa, může se stát, že text může být pro vaše diváky přeplněný a obtížně čitelný. Podobně, pokud jsou řádky na stránce příliš od sebe vzdáleny, bude normální tok čtení přerušen a čtenáři budou mít z tohoto důvodu problémy s textem. Proto si přejete najít odpovídající rozteč výšky čáry pro použití. Můžete také otestovat svůj design s aktuálními uživateli, abyste získali zpětnou vazbu ohledně čitelnosti stránky .
Když se nepoužívá výška řádku
Nezaměňujte výšku čáry s polstrováním nebo okraji, které byste použili k přidání mezery do návrhu stránky, včetně pod záhlavím nebo odstavci. To, že vzdálenost není vedena, a proto není řešena výškou čáry.
Chcete-li přidávat místo pod určitými prvky textu, použijte okraje nebo polstrování. Pokud se vrátíme k předchozímu příkladu CSS, který jsme použili, mohli bychom přidat toto:
hlavní p {line-height: 1.5; margin-bottom: 24px; }} Toto by mělo stále výšku 1,5 řádků textu pro odstavce naší stránky (ty uvnitř
Ve většině případů by se to zobrazovalo stejně jako předchozí CSS.
Řekněme, že jste chtěli přidat pod položkami seznamu, které byly uvnitř seznamu s třídou "služby-menu", použijete okraje nebo polstrování tak, aby se to nezměnilo. Takže by to bylo vhodné.
.services-menu li {