Jak udělat tučné písmo v CSS?

Tučné písmo v CSS: Víc než jen bold

Nastavení tučného písma je základním prvkem typografie webu. I když se může zdát, že stačí použít jednoduchý atribut, realita je o něco komplexnější a nabízí větší kontrolu nad vizuálním dojmem vašeho textu. Pojďme se podívat na to, jak v CSS ovládat tučnost písma a co všechno vlastnost font-weight umožňuje.

Jak už víme, klíčem k tučnému písmu v CSS je vlastnost font-weight. Ta akceptuje klíčová slova i číselné hodnoty, ale důležité je pochopit, co se za těmito hodnotami skrývá.

Klíčová slova: Jednoduchost a relativita

Klíčová slova jako normal, bold, lighter a bolder poskytují snadný a rychlý způsob, jak upravit tučnost písma.

• normal: Nastaví výchozí tučnost písma, obvykle odpovídá hodnotě 400.
• bold: Nastaví tučné písmo. Ekvivalentní k hodnotě 700.
• lighter: Relativně sníží tučnost písma oproti dědičné hodnotě. Pokud má nadřazený prvek tučnost 700, lighter by mohl nastavit tučnost na 400.
• bolder: Relativně zvýší tučnost písma oproti dědičné hodnotě. Funguje opačně než lighter.

Číselné hodnoty: Precizní kontrola (teoreticky)

Číselné hodnoty v rozmezí 100 až 900 nabízejí potenciálně jemnější kontrolu nad tučností. Teoreticky by hodnota 100 měla být nejtenčí a 900 nejtučnější. Nicméně, skutečná podpora těchto hodnot závisí na konkrétním použitém fontu.

Důležité upozornění: Ne každý font podporuje všechny hodnoty tučnosti. Mnoho fontů podporuje pouze normal (400) a bold (700). Pokud zadáte hodnotu, kterou font nepodporuje, prohlížeč se pokusí aproximovat nejbližší dostupnou hodnotu. To může vést k vizuálně nekonzistentnímu chování napříč různými fonty.

Praktické tipy a triky:

• Volba fontu: Při výběru fontu se ujistěte, že podporuje požadovanou škálu tučnosti. Fonty typu “Open Sans” nebo “Roboto” obvykle nabízejí více variant tučnosti.
• Zjištění dostupných tučností: Můžete použít nástroje pro kontrolu webového fontu, abyste zjistili, které tučnosti jsou pro daný font k dispozici.
• Záložní fonty: Využívejte font-family s více záložními fonty. Pokud první font nepodporuje požadovanou tučnost, prohlížeč se pokusí použít další v pořadí.
• Ladění vizuálu: Vždy sledujte, jak se vaše tučné písmo zobrazuje v různých prohlížečích a zařízeních. Může být nutné provést drobné úpravy pro dosažení optimálního vzhledu.
• Semantický význam: Mějte na paměti, že tučné písmo by se nemělo používat pouze pro vizuální zvýraznění, ale i pro zdůraznění semantického významu textu. Pro čtení obrazovky je důležité využívat HTML elementy pro zdůraznění, a pomocí CSS definovat jejich vzhled, tedy i tučnost.

Závěr:

Ovládání tučného písma v CSS je důležitou součástí návrhu webového rozhraní. Správným výběrem fontu a používáním vlastnosti font-weight můžete dosáhnout vizuálně atraktivního a dobře čitelného textu, který efektivně komunikuje vaše sdělení. Neomezujte se pouze na klíčové slovo bold, ale experimentujte s různými hodnotami a fonty, abyste objevili, co funguje nejlépe pro váš projekt. A nezapomeňte: vizuální konzistence a přístupnost by měly být vždy na prvním místě.