Kalkulačka line-height
Nástroj prepočíta výšku riadku v pixeloch na bezjednotkový CSS line-height podľa veľkosti písma. Zobrazí CSS zápis, alternatívu v px, vzorec, hodnotenie aj ukážku textu.
Odporúčaný line-height
1.5
Zadajte veľkosť písma a výšku riadku. Kalkulačka vypočíta unitless line-height vhodný do CSS.
Ukážka textu s vypočítaným line-height
Toto je ukážkový text s vypočítanou výškou riadku. Pri dlhších odsekoch pomáha správny line-height zlepšiť čitateľnosť, rytmus textu a celkový pocit zo stránky.
Pre bežné odseky sa často používa line-height približne 1.4 až 1.7. Unitless hodnota je v CSS praktická, pretože sa lepšie dedí medzi prvkami.
Kalkulačka line-height pomáha prepočítať výšku riadku v pixeloch na bezjednotkový CSS zápis. Hodí sa pri typografii, odsekoch, nadpisoch a úprave čitateľnosti webového textu.
Výpočet line-height pre CSS text
Kalkulačka line-height je užitočná pri nastavovaní čitateľnosti textu na webe. Pomáha vtedy, keď poznáte veľkosť písma v pixeloch a výšku riadku v pixeloch, ale do CSS chcete použiť praktickejší bezjednotkový zápis. Hodí sa pri odsekoch, nadpisoch, textových blokoch, článkoch, kartách, popisoch aj pri úprave typografie v responzívnom dizajne.
Výpočet pracuje s dvomi vstupmi. Zadáva sa veľkosť písma v px a výška riadku v px. Kalkulačka tieto hodnoty porovná a vypočíta unitless line-height, teda hodnotu bez jednotky. Použitý princíp je jednoduchý: výška riadku v pixeloch sa vydelí veľkosťou písma v pixeloch. Ak má text veľkosť 16 px a výška riadku je 24 px, výsledkom je line-height 1.5.
Hlavný výsledok zobrazuje bezjednotkovú hodnotu line-height. Okrem nej kalkulačka ukáže aj zadanú veľkosť písma, výšku riadku v px, vzorec výpočtu, CSS zápis a alternatívu v pixeloch. Súčasťou výsledku je aj hodnotenie čitateľnosti, napríklad tesnejší text, dobrá čitateľnosť, voľnejšie riadky alebo veľmi veľký rozostup.
Na výsledok má najväčší vplyv pomer medzi veľkosťou písma a výškou riadku. Pri nízkej hodnote môžu byť riadky príliš blízko pri sebe a dlhší text sa môže horšie čítať. Pri vysokej hodnote môže text pôsobiť príliš vzdušne a zaberať zbytočne veľa miesta. Pre bežné odseky sa v kalkulačke ako dobrý rozsah zobrazuje najmä približne 1.4 až 1.7.
Praktický príklad je nastavenie odsekov na webe. Ak používate písmo veľké 16 px a chcete výšku riadku 24 px, kalkulačka vypočíta hodnotu 1.5 a pripraví CSS zápis line-height: 1.5;. Zároveň zobrazí aj alternatívu line-height: 24px;, takže si môžete porovnať relatívny aj pevný zápis.
Bezjednotkový line-height je v CSS často praktický, pretože sa lepšie dedí medzi prvkami a prispôsobuje sa veľkosti písma. Výsledok však stále závisí od konkrétneho fontu, dĺžky riadkov a typu textu. Pri nadpisoch môže fungovať tesnejší rozostup, zatiaľ čo pri dlhších odsekoch býva pohodlnejšie použiť voľnejšiu výšku riadku.
TIP pre vás
Domácnosť ide ľahšie s dobrými pomôckami
Prepočty jednotiek sa hodia pri varení, upratovaní, meraní aj plánovaní domácnosti. Pozrite si praktické doplnky a vybavenie, ktoré doma využijete častejšie, než si myslíte.
Pozrieť pomôckyČasté otázky
Čo počíta kalkulačka line-height?
Prepočíta výšku riadku v pixeloch na bezjednotkovú hodnotu line-height podľa zadanej veľkosti písma.
Aké údaje treba zadať?
Zadáva sa veľkosť písma v px a výška riadku v px. Z týchto hodnôt sa vypočíta výsledný line-height.
Aký CSS zápis kalkulačka zobrazí?
Zobrazí bezjednotkový zápis, napríklad line-height: 1.5;, aj alternatívu v pixeloch.
Prečo je bezjednotkový line-height praktický?
V CSS sa lepšie dedí medzi prvkami a prispôsobuje sa veľkosti písma, preto je vhodný najmä pri webovej typografii.
Aký line-height je vhodný pre bežný text?
Pri bežných odsekoch sa často používa približne 1.4 až 1.7, no vhodná hodnota závisí od fontu, veľkosti písma a dĺžky riadkov.