4. modul - 2.lekce
Změna fontů, loga a faviconu
Správný výběr a nastavení písma je klíčovou součástí designu každého webu. Písmo není jen nosičem informací, ale významně ovlivňuje celkový dojem a čitelnost vašich stránek. Vybrané písmo využijete většinou i v logu nebo faviconu.
FONTY
Zdroje fontů:
Kontrola kompatibility s češtinou
Před finálním výběrem fontu je zásadní ověřit podporu české diakritiky. Doporučujeme otestovat slova obsahující specifické české znaky, jako jsou "šiška", "kůň", "dřevíčko" nebo "ďas". Některé fonty totiž českou diakritiku nepodporují, což se může projevit zobrazením čtverečků místo písmen nebo použitím odlišného stylu písma pro diakritické znaky.
Postup přidání fontů:
1. Otevřete DESIGN SETTINGS
2. Přepněte na záložku FONTS
3. Pro Google Fonts:
4. Pro vlastní fonty:
Nastavení textových stylů
Pod barevnou paletou můžete nastavit vzhled jednotlivých textových prvků. Pro každý typ textu (titulek, nadpis, podnadpis a běžný text) lze definovat nejen použitý font, ale také barvu, velikost a pozici. Toto nastavení vám pomůže udržet konzistentní vzhled napříč celým webem.
LOGO a FAVICON
Profesionální prezentace značky na webu vyžaduje správné nastavení loga a favicony. Tyto prvky jsou klíčové pro identitu vašeho webu a pomáhají budovat povědomí o vaší značce. Pojďme si projít, jak s nimi v Showit pracovat.
Práce s logem
Pro profesionální vzhled vašeho webu je důležité mít správně připravené logo. Pokud spolupracujete s grafikem, požádejte ho o dodání loga ve formátech .png nebo .svg s průhledným pozadím. Tyto formáty vám umožní flexibilní umístění loga kdekoli na webu bez nežádoucích bílých okrajů nebo pozadí. Alternativně, pokud preferujete jednodušší řešení, můžete v Showit vytvořit textové logo pomocí textového pole a vámi zvoleného fontu.
Nastavení favicony
Favicon je malá, ale důležitá součást webové prezentace. Jedná se o ikonku, která se zobrazuje v záložkách prohlížeče a před titulkem stránky. Často vychází z designu loga a slouží jako vizuální identifikátor vašeho webu mezi ostatními otevřenými stránkami. Pro optimální zobrazení favicony je potřeba připravit obrázek ve formátu .png s průhledným pozadím v přesné velikosti 32 x 32 pixelů.
Převést obrázek na favicon můžete ZDE.
Před pokračováním do další části kurzu si prověřte své nově získané znalosti v krátkém kvízu. Úspěšné zvládnutí kvízu vám potvrdí, že jste čtvrtý modul správně pochopili a můžete se pustit do dalších lekcí.
FONTY
Zdroje fontů:
- Existující šablony
- Inspirace z Pinterestu/Instagramu
- Creative Market
- Google Fonts
- Jen Wagner - 15% sleva na fonty od Jen Wagner
Kontrola kompatibility s češtinou
Před finálním výběrem fontu je zásadní ověřit podporu české diakritiky. Doporučujeme otestovat slova obsahující specifické české znaky, jako jsou "šiška", "kůň", "dřevíčko" nebo "ďas". Některé fonty totiž českou diakritiku nepodporují, což se může projevit zobrazením čtverečků místo písmen nebo použitím odlišného stylu písma pro diakritické znaky.
Postup přidání fontů:
1. Otevřete DESIGN SETTINGS
2. Přepněte na záložku FONTS
3. Pro Google Fonts:
- Vyberte přímo z nabídky
- Připravte soubor ve formátu .woff (použijte online konvertory, např. TENTO)
- Vytvořte složku "fonty" v MEDIA LIBRARY
- Nahrajte .woff soubor
- V CUSTOM FONTS vyberte nahraný font
- Pojmenujte font
- Potvrďte vlastnictví licence
- Uložte
Nastavení textových stylů
Pod barevnou paletou můžete nastavit vzhled jednotlivých textových prvků. Pro každý typ textu (titulek, nadpis, podnadpis a běžný text) lze definovat nejen použitý font, ale také barvu, velikost a pozici. Toto nastavení vám pomůže udržet konzistentní vzhled napříč celým webem.
LOGO a FAVICON
Profesionální prezentace značky na webu vyžaduje správné nastavení loga a favicony. Tyto prvky jsou klíčové pro identitu vašeho webu a pomáhají budovat povědomí o vaší značce. Pojďme si projít, jak s nimi v Showit pracovat.
Práce s logem
Pro profesionální vzhled vašeho webu je důležité mít správně připravené logo. Pokud spolupracujete s grafikem, požádejte ho o dodání loga ve formátech .png nebo .svg s průhledným pozadím. Tyto formáty vám umožní flexibilní umístění loga kdekoli na webu bez nežádoucích bílých okrajů nebo pozadí. Alternativně, pokud preferujete jednodušší řešení, můžete v Showit vytvořit textové logo pomocí textového pole a vámi zvoleného fontu.
Nastavení favicony
Favicon je malá, ale důležitá součást webové prezentace. Jedná se o ikonku, která se zobrazuje v záložkách prohlížeče a před titulkem stránky. Často vychází z designu loga a slouží jako vizuální identifikátor vašeho webu mezi ostatními otevřenými stránkami. Pro optimální zobrazení favicony je potřeba připravit obrázek ve formátu .png s průhledným pozadím v přesné velikosti 32 x 32 pixelů.
Převést obrázek na favicon můžete ZDE.
Před pokračováním do další části kurzu si prověřte své nově získané znalosti v krátkém kvízu. Úspěšné zvládnutí kvízu vám potvrdí, že jste čtvrtý modul správně pochopili a můžete se pustit do dalších lekcí.
