0 Kč bez DPH

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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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

Písmo - 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.

Vojtěch Štursa
vojtech.stursa(zav)zoner.cz

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