Fonty a typografie · Brand manuál Optimal Marketing

Fonty Optimal Marketing

Toto jsou naše standardní fonty. Pro jakoukoliv standardní komunikaci, kterou nepokrývají substituční fonty (e-mailing, web, dopisy), je důrazně zakázáno používat jiné fonty. Jiné kreativní fonty jsou povolené jen tam, kde to povaha díla umožňuje – například v kreativní grafice.

Logo a krasopis

Sign Painter House Script jen logo / bitmapa

Ručně vytvořený typ písma Sign Painter House Script (dílna House Industries, rodina House Sign Painter) používáme v logu a krasopisu. Nesází se verzálkami (nevynikly by spojovací ligatury – hlavní přednost fontu) ani se nepoužívá pro dlouhé texty. Kvůli omezené licenci ho nepoužíváme pro stylování textu na webu – povolené je logo a případně drobné bitmapové aplikace.

Licence Licenční smlouva House Industries
Oficiální housefonts.com/hi/sign-painter-house-script
Ke stažení Písmo je licencované, proto ho nenabízíme ke stažení. Pro logo použijte soubory loga; samotné písmo si případně kupte u House Industries.

Nadpisy, titulky, slogany

Montserrat Bold 700

Ag

Regular SemiBold Bold 700 Black 900

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ĚŠČŘŽ

Pro nadpisy na webu, slogany, titulky a nadpisy firemních dokumentů používáme Montserrat v řezu Bold 700 (případně až Black 900), v kombinaci s primárním fontem Roboto Slab.

Autoři Julieta Ulanovsky (hlavní design), Sol Matas, Juan Pablo del Peral, Jacques Le Bailly
Licence SIL Open Font License
Projekt The Montserrat Font Project (GitHub)
Ke stažení Google Fonts – Montserrat

Primární font

Roboto Slab Regular 400

Spojujeme ty, kteří něco potřebují, s těmi, kteří umí tuto potřebu naplnit.

Light Regular Medium Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ĚŠČŘŽ

Hlavní font pro sazbu (delšího) textu je Roboto Slab. V kombinaci s Montserratem (Bold 700), případně s fontem Roboto, podtrhuje typografický styl značky a používáme ho napříč všemi médii. Zejména u delších textů důsledně dodržujte Roboto Slab kvůli lepší čitelnosti. Není-li k dispozici, použijte substituční fonty.

Autor Christian Robertson
Licence Apache License 2.0
Projekt Roboto Slab (GitHub)
Ke stažení Google Fonts – Roboto Slab

Substituční fonty. Univerzální fonty pro případ, že hlavní font není dostupný: Roboto a Arial pro nadpisy, Georgia pro tělo textu.

Jak to používáme na webu

Na webu (Bootstrap 5) je typografie zafixovaná do pevné škály. V kódu se velikosti nikdy nezadávají ručně – jen třídami display-1…6 (nadpisy, Montserrat) a fs-1…6 (text, Roboto Slab).

Nadpisová škála · Montserrat 700

display-15,5 rem · 88 px
Optimal
display-25 rem · 80 px
Optimal
display-34,5 rem · 72 px
Optimal
display-43,75 rem · 60 px
Optimal Marketing
display-53 rem · 48 px
Optimal Marketing
display-62,5 rem · 40 px
Optimal Marketing

Textová škála · Roboto Slab 400

fs-11,5 rem · 24 px
Architekti komunikačních mostů
fs-21,375 rem · 22 px
Architekti komunikačních mostů
fs-31,25 rem · 20 px
Architekti komunikačních mostů
fs-41,125 rem · 18 px
Architekti komunikačních mostů
fs-50,875 rem · 14 px
Architekti komunikačních mostů
fs-60,75 rem · 12 px
Architekti komunikačních mostů

Základ těla textu je 1 rem / 16 px, řádkování 1,5 (v obsahu článku 1,6 pro delší čtení). Nadpisy: Montserrat 700, řádkování 1,25; display-* mají řádkování 1,1. Nadpisy i běžný text mají barvu #333 (dark-1), #546E7A (dark-2) je jen pro sekundární text a meta údaje – viz Barvy.

Principy typografie

Typografie hraje důležitou roli ve vizuální komunikaci značky. Tyto principy drží styl konzistentní a usnadňují nejčastější úkoly sazby.

Layout (rozvržení)

Typografické uspořádání stránky – všechny aspekty grafického rozvržení tištěné i elektronické stránky – vychází primárně z metodiky Material Design. Nadřazené jsou jí jen prvky přesně definované v identitě Optimal Marketing (fonty, barvy apod.). Pevné poměry mezi grafickými a vizuálními prvky drží stylově stálou tvář ve všech tiskových i digitálních médiích.

Material Design – Understanding layout

Struktura nadpisů

Hierarchie titulků a podtitulků vzhledem k dalšímu obsahu. Úrovně nadpisů jsou definované velikostí textu, způsobem sazby a řezem fontu. Při návrhu jakékoliv sazby je nutné alespoň základní pochopení typografie.

Material Design – Understanding typography

Sazba a mikrotypografie

Pevné mezery za jednopísmennými předložkami a spojkami (k, s, v, z, o, u, a, i), mezi číslem a jednotkou (50 %, 5 kg) a před pomlčkou. Na webu je doplňuje skript automaticky.
Zvýraznění slova v nadpisu na webu: <strong> uvnitř nadpisu nepřidává tučnost, ale obarví slovo akcentovou růžovou #E91E63. Jen na jedno klíčové slovo, ne na celý nadpis.