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
Keď ľudia manuálne používali kovové alebo drevené písmená na vytvorenie typografie pre vytlačenú stránku, tenké kúsky olova sa umiestnili medzi vodorovné čiary textu, aby sa vytvorila medzera medzi týmito čiarami. 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žíva tento presný termín, aj keď skutočné vedenie sa v týchto programoch samozrejme nepoužíva. Je to skvelý príklad nových foriem dizajnu, ktoré si zapožičiavajú myšlienky z tradičných, aj keď sa presná implementácia tejto zásady zmenila.
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ť. Napríklad, povedzme, že chcete zvýšiť výšku riadkov pre všetky odseky vnútri elementu
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).
Kedy používať výšku čiary
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 .
Keď sa nepoužije výška výšky
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:
hlavná p {line-height: 1.5; margin-bottom: 24px; } Toto by malo ešte výšku 1,5 riadku medzi riadkami textu pre odstavce našej stránky (tie v rámci
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 {