16 hezkých písem pro Vaše stránky - jednoduše a snadno
Článek je určen pro zkušenější uživatele, kteří mají v povědomí práci s CSS styly. Pokud doposud nemáte s úpravou CSS zkušenost, úpravu také zvládnete - doporučujeme přečíst si článek
Práce s Vlastním CSS stylem, ve kterém se dozvíte, jak si v administraci inPage CSS styl upravit.
Formátování písma jsme se již věnovali v článku Jak změnit barvu nebo velikost písma pomocí CSS. Možná nevíte, že existují písma, která jsou "bezpečná" pro použití na webových stránkách, se kterými mohou být vaše stránky hezčí a můžete je posunou zase o úroveň dál.
Co jsou to bezpečná písma
Typů písem si můžete na internetu stáhnout nespočet, ne všechna jsou ale tzv bezpečná. Bezpečnými písmy nazýváme písma (fonty), která jsou univerzální pro všechny počítače. Pokud je použijeme (zkopírujeme CSS pravidlo s doporučeným zápisem - viz níže zápis v modrém rámečku u konkrétního písma), měly by se zobrazit na každém počítači stejně - případně vykreslit velmi podobně. Problém ale je, že takto stažené a nainstalované písmo funguje pouze na vašem počítači. Pokud takové písmo použijete, s největší pravděpodobností návštěvník písmo neuvidí tak, jak jste zamýšleli - nemusí mít písmo, které jste si vybrali, nainstalované na svém počítači.
Bezpečná písma by měla tuto situaci zcela minimalizovat.
Je vhodné s různými druhy písem experimentovat, abyste zjistili, kam se který font hodí nejvíce.
Je hezké, pokud hlavní nadpis na stránce (tag H1) je tvořen jiným druhem písma, než jsou třeba ostatní nadpisy i běžný text. Příliš se nedoporučuje používat speciální písma na běžný text (kvůli možné zhoršené čitelnosti), je ale hezké si takto vyzdobit nadpisy - ať už hlavní, nebo i ty na nižší úrovni (H2,H3,H4,H5,H6).
Univerzální příklad změny typu písma
V příkladech níže je znázorněn graficky příslušný font. U každého příkladu naleznete CSS pravidlo, které stačí pouze zkopírovat a vložit do Vlastního CSS stylu.
Před definici je třeba pouze dopsat prvky, na které si přejete změnu písma aplikovat - viz příklad.
Př. Chceme použít písmo Impact - pouze pro hlavní nadpis, barvu změníme na modrou:
h1 { font-family: Impact, Charcoal, sans-serif; color: blue; }
Př. Chceme použít písmo Trebuchet MS pro všechny nadpisy na webu (do uvozovek se dávají písma s dvouslovným názvem):
h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Helvetica, sans-serif; }
Př. Chceme použít písmo Gill Sans pro hlavní nadpis. Courier New pro nadpis dalších úrovní. Pro běžný text chceme Arial Narrow.
h1 { font-family: "Gill Sans", "Gill Sans MT", sans-serif; }
h2, h3, h4, h5, h6 { font-family: "Courier New", Courier, monospace; }
body { font-family: "Arial Narrow", sans-serif; }
Impact
{ font-family: Impact, Charcoal, sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Palatino Linotype
{ font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Tahoma
{ font-family: Tahoma, Geneva, sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Century Gothic
{ font-family: "Century Gothic", sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Lucida Sans Unicode
{ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Arial Black
{ font-family: "Arial Black", Gadget, sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Times New Roman
{ font-family: "Times New Roman", Times, serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Arial Narrow
{ font-family: "Arial Narrow", sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Verdana
{ font-family: Verdana, Geneva, sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Copperplate Gothic Light
{ font-family: Copperplate, "Copperplate Gothic Light", sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Lucida Console
{ font-family: "Lucida Console", Monaco, monospace; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Gill Sans
{ font-family: "Gill Sans", "Gill Sans MT", sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Trebuchet MS
{ font-family: "Trebuchet MS", Helvetica, sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Courier New
{ font-family: "Courier New", Courier, monospace; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Arial
{ font-family: Arial, Helvetica, sans-serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Georgia
{ font-family: Georgia, Serif; }
Výše uvedenou CSS úpravu pouze zkopírujte do Vlastního CSS stylu
a dopište před ni prvky, na které si přejete změnu písma aplikovat.
Přidat komentář
Přehled komentářů
Font Georgia
14. 2. 2022 15:21:13 | M.Soukup
Font Georgia píše číslice 3457 a 9 pod řádkou. Co tomu řekne typograf? Je to správně.
Děkuji S
Odpovědět
Řádkování
30. 1. 2017 20:35:34 | Zdenka Sekená
Dobrý den,
nepodařilo jse mi nikde ve Vašich návodech najít jak se nastavuje řádkování. Po přípravě dokumentu ve Wordu, ho přenesu na stránku a v podstatě se to rozhodí do jiných mezer a velikosti řádků než jsem původně nastavila i když vymažu formátování.
Za odpověď děkuji Sekená
Odpovědět | Zobrazit odpovědi
Re: Řádkování
29. 10. 2023 8:06:24 | Vojta
Dobrý den, řádkování se nastavuje v CSS přes definici line-height. Tedy příklad pro prvek s id #nazevprvku { line-height: 18px; } Pokud stylujete třídu, pak je to .nazevtridy { line-height: 18px; }
Odpovědět
Re: Řádkování
8. 4. 2021 17:31:29 | Gaddy
K řádkování se používá "line-height". Hodnota se dá zapsat v px, v %, pomocí keyword, etc.
CSS syntaxe:
{ line-height: normal|number|length|initial|inherit; }
Takže např:
p.obsah { line-height: 120%; }
ul.seznam {line-height: 24px; }
Odpovědět
Re: Řádkování
26. 4. 2017 6:16:58 | Petr Urban
Dobrý den,
řádkování se v CSS dělá pomocí line-height
Odpovědět
Re: Řádkování
1. 2. 2017 16:04:37 | Tým inPage
Dobrý den, potřebujeme vidět konkrétní příklad. Prosím o zaslání Vašeho požadavku i s uvedením webové stránky, které se to týká, na email admin@zoner.cz.
Odpovědět
Kontroverzní...
13. 4. 2016 13:39:37 | Karel
ale možná by nezaškodilo doporučení, který je vhodnější k jakému účelu ... Dík za pěknou, názornou, jasnou stránku
Odpovědět
Gravitační konstanta
12. 1. 2015 22:08:00 | Petr
Dík
Odpovědět
RE: Výplň naformátovaného rámečku
3. 2. 2014 12:28:01 | Vladimír Souš
Dobrý den pane Martínku,
pravděpodobně bude stačit nastavit odstavci <p> barevné pozadí, dle libosti. Více se dozvíte v našich uživatelských CSS základech: http://www.blog.inpage.cz/inpage/css-uzivatelske-zaklady/
Odpovědět
Výplň naformátovaného rámečku
30. 1. 2014 9:00:08 | Pavel Martínek
Dobrý den,dle Vašeho návodu jsem si nastavil úspěšně rámeček kolem písmen. Chtěl bych se zeptat,
zda by šla změnit barevně výplň rámečku pod text,v mém případě by se hodila žlutá.
Děkuji za odpověď a pozdravuji.
Odpovědět
Písmo Symbol
7. 3. 2013 23:42:34 | Karel Kubela
Dobrý den, chci pouze upozornit a varovat před použitím písma Symbol, které je ve standardní nabídce editoru. Písmo vypadá sice moc hezky, ale na prohlížeči Internet explorer se písmo často změní v jakési řecké znaky. Pouřijte raději Tahomu nebo Verdanu. Také hezké fonty a fungují spolehlivě na všech prohlížečích.
Odpovědět