Web design vždy požičiaval princípy a definície zo sveta grafického a tlačového dizajnu. Platí to najmä pokiaľ ide o webovú typografiu a spôsob, akým na našich webových stránkach získavame listové listy. Tieto paralely nie sú vždy 1 až 1 preklady, ale určite vidíte, kde jedna disciplína ovplyvnila druhú. Toto je obzvlášť zrejmé, keď zoberiete do úvahy vzťah medzi tradičným typografickým výrazom "vedúci" a vlastnosťou CSS známy ako "line-height".
Cieľ vedenia
Kedy ľudia používajú na ručné slúchadlo kovové či drevené listy s cieľom vytvoriť typografie pre vytlačenej stránky, tenké kúsky olova boli umiestnené medzi horizontálnymi riadky textu na vytvorenie medzery medzi týmito líniami. Ak by ste chceli väčší priestor, vložili by ste väčšie kúsky olova. Takto vznikol termín "vedúci". Ak ste v knihe o typografickom dizajne a princípech pozreli výraz "vedúci", čítal by niečo v dôsledku - "vzdialenosti medzi základnými líniami po sebe nasledujúcich línií typu".
Vedieme vo vývoji webových stránok
V digitálnom dizajne sa pojem vedúci stále používa na odvolávanie sa na medzery medzi riadkami textu. Mnoho programov použiť tento presný termín, hoci skutočné vedenie je zjavne nie je používaný v týchto programs.This je skvelým príkladom nových foriem prevedení výpožičných nápady od tých tradičných, hoci presná zavedenie tejto zásady zmenilo.
Pokiaľ ide o návrh webových stránok, neexistuje žiadny vlastnosť CSS pre "vedenie". Namiesto toho by vlastnosť CSS, ktorá by zvládla toto vizuálne zobrazenie textu, sa nazýva výška riadku. Ak chcete, aby váš text mal ďalší priestor medzi vodorovnými riadkami textu, použite túto vlastnosť. Povedzme napríklad, že chcete zvýšiť výšku riadku pre všetky odseky vo vnútri main p { line-výška: 1,5;}
Toto by bolo teraz 1,5 násobok bežnej výšky linky na základe predvolenej veľkosti písma stránky (ktorá je zvyčajne 16 pixlov). Ako je uvedené vyššie, je vhodné použiť výšku čiary na usporiadanie riadkov textu v odsekoch alebo iných blokoch textu. Ak je medzi riadkami príliš malý priestor, text sa môže na vašich stránkach prehliadať pre divákov. Podobne, ak sú riadky umiestnené na stránke príliš ďaleko od seba, normálny tok čítania bude prerušený a čitatelia budú mať z tohto dôvodu problémy s textom. To je dôvod, prečo chcete nájsť vhodné rozstupy výšky riadkov, ktoré chcete použiť. Môžete tiež otestovať svoj dizajn so skutočnými používateľmi, aby ste získali spätnú väzbu o čitateľnosti stránky. Nezamieňajte výšku čiary s polstrovaním alebo okrajmi, ktoré by ste použili na pridanie medzery do dizajnu vašej stránky vrátane pod hlavičkou alebo odsekom. Táto medzera nie je vedená, a preto sa s ňou nerieši výška výšky. Ak chcete pridať určitý priestor pod niektoré textové prvky, mali by ste použiť okraje alebo polstrovanie. Ak sa vrátime k predchádzajúcemu príkladu CSS, ktorý sme použili, mohli by sme pridať toto: main p { line-výška: 1,5; margin-bottom: 24px;}
Toto by stále malo 1,5 riadku výšky medzi riadkami textu pre odsek našej stránky (tie v rámci main p { line-výška: 1,5; padding-bottom: 24px;} Takmer vo všetkých prípadoch by sa to zobrazovalo rovnako ako predchádzajúci CSS. Povedzme, že chcete pridať medzery pod položkami zoznamu, ktoré boli v zozname s triedou "services-menu", použili by ste okraje alebo polstrovanie, aby ste tak urobili, NOT line height. Tak by to bolo vhodné. .services-menu li {< padding-bottom: 30px;} By ste používať iba line-height tu, ak ste chceli nastaviť rozostup textu vo vnútri zoznamu položkami samotných, za predpokladu, že mal dlhé behy textu, ktoré by mohli spustiť do niekoľkých riadkov pre každý zarážky. Kedy používať výšku čiary
Keď sa nepoužije výška výšky
