Standardní webová písma. Bezpečná písma

Písma jsou nedílnou a velmi důležitou součástí designu webových stránek a zdůrazňují jejich individualitu. Článek bude hovořit o připojení standardních písem k webové stránce, říká se jim také systémová písma a v příštím článku se podrobně podíváme na výběr a připojení písem z Google Fonts na web WordPress.

Systémová, standardní, bezpečná písma

Jakýkoli prohlížeč zobrazuje pouze písma, která jsou přítomna v operačním systému počítače. Proto se jim říká systémové a instalují se standardně spolu s operačním systémem.

A nazývají se bezpečná písma, protože se pravděpodobně zobrazí v prohlížeči většiny návštěvníků webu.

Problém je ale v tom, že různé operační systémy instalují různé sady písem. Sady dodávaných písem spolu s operačním systémem si můžete prohlédnout na oficiálních stránkách Windows a Mac OS. A v Unixu/Linuxu neexistuje žádná standardní sada.

Aby se internetová stránka zobrazovala v souladu s představou designéra, byla do CSS nainstalována vlastnost fontu s názvem font-family.

vlastnost font-family

Vlastnost font-family jsou rodiny písem seskupené podle určitých charakteristik.

Generické rodiny:

  • serif - písma s patkami na koncích;
  • sans-serif - bezpatková písma;
  • kurzíva - kurzíva;
  • fantasy - dekorativní písma;
  • monospace - jednoprostorové písmo (s písmeny stejné šířky).

Tímto způsobem se jednoduše vyberou podobná písma z různých operačních systémů a připojí se k internetové stránce oddělené čárkami.

Zde je příklad, jen pro vizuální vnímání. K tomuto příkladu se vrátíme později, až budeme uvažovat o přímém připojení písem.

Stačí následovat logiku a vše bude křišťálově jasné.

Tělo (rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; )

Podívejme se, co bylo napsáno:

  • OS Windows - Arial;
  • OC Mac OS - Helvetica CY;
  • OC Unix/Linux - Nimbus Sans L;
  • Generická rodina - bezpatková.

Takzvaná bezpečná písma

Na základě OS Windows byl sestaven seznam několika bezpečných písem.

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Kurýr Nový
  5. Gruzie
  6. Dopad
  7. Times New Roman
  8. Trebuchet čs
  9. Verdana

Všechny tyto fonty jsou nainstalovány na Mac OS X, Windows a mnoho uživatelů Unix/Linux, kteří mají nainstalované Core fonty pro webový balíček.

Pro ostatní uživatele je k dispozici srovnávací tabulka. Obsahuje podobná písma patřící do konkrétní rodiny.

Tabulka korespondence a příslušnosti písem ke konkrétní rodině:

WindowsMacOSUnix/Linuxrodová rodina
Arial BlackHelvetica C.Y.Nimbus Sans LBezpatkové
ArialHelvetica C.Y.Nimbus Sans LBezpatkové
Comic Sans MSMonako CY* (viz níže)kurzívní
Kurýr Nový* (viz níže)Nimbus Mono LJednoprostorový
Gruzie* (viz níže)Učebnice století LSerif
DopadCharcoal C.Y.* (viz níže)Bezpatkové
Times New RomanTimes C.Y.Nimbus Roman No9 LSerif
Trebuchet čsHelvetica C.Y.* (viz níže)Bezpatkové
VerdanaGeneva C.Y.DejaVu SansBezpatkové

* Při připojování písem se na to můžete bezpečně spolehnout. Tabulka podporuje znaky azbuky a ruskou abecedu.
V tomto článku jsem vzal samotnou tabulku.

Připojení systémových písem k webu

Existuje několik způsobů, jak připojit systémová písma k vašemu webu. Kromě toho můžete k různým odstavcům připojit různá písma. Použijte různá písma na jednotlivá slova a fráze. To vše se nyní pokusím zvážit.
Udělejme tedy vše po pořádku.

Propojování písem v souboru CSS

Pokud se potřebujete připojit hlavní písmo pro celý dokument, stačí do šablony stylů přidat následující kód:

Body ( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; /* připojit písmo k celému dokumentu */ velikost písma: 16px; /* dodatečně nastavit velikost písma */ písmo -weight: 400 /* nastavte váhu písma nebo místo 400 nastavte hodnotu na normální */ )

Přiřazení fontu nadpisům H1, H2, H3, H4, H5, H6, (zde je to stejné, jen jsme nastavili tučnou hodnotu pro zvýraznění nadpisů):

H1,h2,h3,h4,h5,h6( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* připojte písmo k nadpisům */ váha písma: 600; / * nastavte váhu písma nebo místo 600 nastavte hodnotu na tučné */ )

Písmo přiřazujeme pouze odstavcům:

P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* připojení písma k odstavcům, lze použít na seznamy li, bloky div, formuláře a další prvky */ váha písma : normal /* nastavte váhu písma nebo místo 600 nastavte hodnotu na tučné */ font-size: 16px /* dodatečně nastavit velikost písma pro odstavce */ )

Na přiřadit písmo pouze ke konkrétnímu odstavci, nebo bloku, musíte nejprve tomuto bloku v dokumentu HTML přiřadit třídu

Zde je odstavec s vlastním písmem

A do tabulky CSS napište následující kód:

Font( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; /* písmo spojujeme s určitými odstavci, lze použít na jednotlivé seznamy li, bloky div, formuláře a další prvky */ font-weight: normal /* nastavit váhu písma, nebo místo 600 nastavit hodnotu na tučné */ font-size: 16px /* dodatečně nastavit velikost písma pro odstavce */ )

Nyní bude každé značce - html prvku s třídou .font (nazývejte si ji jak chcete) přiřazeno písmo Arial s normální (400), tučným písmem a velikostí 16 pixelů.
Podobně můžete přiřadit různá písma seznamům li, tabulkám, celým blokům div, jednotlivým slovům nebo frázím.

Propojení písem v dokumentu HTML

Písma jsou zahrnuta přímo do dokumentu HTML stejným způsobem jako soubor CSS, rozdíl je pouze v syntaxi. Písma můžete zahrnout do záhlaví dokumentu – mezi značky (obdoba CSS souboru), nebo inline – přiřazování vlastností přímo html tagům.

Včetně písem v záhlaví, mezi značkami . Chcete-li to provést, přidejte do dokumentu html následující kód:

Nebudu se tu opakovat. Vše je podobné připojení v souboru CSS.

Připojování písem inline, přímo k prvkům webu. Dovolte mi uvést několik příkladů:

Připojení písma k odstavci

Zde je odstavec s textem

Samostatné slovo zvýrazníme tučně a přiřadíme samostatný font od hlavního

Zde je odstavec s textem a toto slovo, který by měl být zvýrazněn tučně

Tady je odkaz

Podobně přiřazujeme fonty libovolné html značce.

Ale stále je nejlepší a doporučené přiřazovat styly prvkům prostřednictvím souboru CSS. Za prvé, musíte napsat styly v CSS pouze jednou a poté přiřadit pouze požadovanou třídu v HTML. Za druhé, psaním inline stylů vzniká duplicitní obsah. Zdá se, že tyto vlastnosti a třídy jsou indexovány vyhledávači a slyšel jsem, že W3C chce inline úplně zrušit. I když někdy je snazší psát styly tímto způsobem.

Vše. Sledujte aktualizace stránek, připravuji článek o připojení nestandardních a originálních písem na stránky, aby se správně zobrazovaly ve všech prohlížečích. Také vám představím několik dobrých služeb, kde si můžete vybrat vlastní písma.

Když začínáte vytvářet rozvržení, musíte v CSS konkrétně specifikovat písma použitá na stránce. Návrhář často v různých fontech píše nejen hlavní text stránky, ale také různé nadpisy, loga a monogramy:

Dobrý návrhář, stejně jako dobrý návrhář rozvržení, ví, že prohlížeč může k zobrazení stránky používat pouze ta písma, která jsou nainstalována v počítači uživatele. To znamená, že písma lze rozdělit do dvou kategorií:

  1. Písma, která bez problémů zobrazí drtivá většina uživatelů.
  2. Písma, která nemá dost velká skupina uživatelů.

Pokud designér použil fonty druhé kategorie k vytvoření například loga nebo velkých statických nadpisů, nemůžete s technikou váhat. Nevýhodou použití této techniky je nepružnost. Pokud dojde ke změnám v textu, budete muset obrázek předělat a změnit CSS (například pokud rozměry nového obrázku neodpovídají tomu starému).

Můžeme říci, že nebezpečí použití techniky přímo závisí na pravděpodobnosti změny textu. Proto například obecný text stránky nelze psát nestandardním písmem! Kompetentní designér by tohle nikdy neudělal. A pokud designér na zelené narazí, dobrý designér layoutu je prostě povinen svou chybu napravit – v layoutu vyměnit tento font za co nejpodobnější standardní.

Ale jak lze rozlišit písma první skupiny od druhé? Je jasné, že se nemůžete spolehnout na sadu písem nainstalovaných přímo na vašem počítači! Pojďme na to přijít.

Standardní fonty

Standardní písma jsou sada písem, která se instalují s operačním systémem. Protože se operační systémy liší, liší se i jejich sada písem. Seznam standardních písem pro různé verze Windows naleznete například v článku Standardní písma Windows a seznam standardních písem Mac OS na stránce Písma obsažená v Mac OS. Pokud jde o operační systémy Unix/Linux, nemají jedinou sadu písem. Mnoho uživatelů Linuxu používá sadu písem DejaVu, zejména na Ubuntu jsou nainstalovány ve výchozím nastavení. Podle statistik z http://www.codestyle.org má mnoho uživatelů Unix/Linux nainstalované také sady písem URW, Free a další. Podle stejných statistik má více než 60 % uživatelů Unixu/Linuxu na svém počítači fonty ze sady Core fonts for the Web, která byla do roku 2002 oficiálně zdarma ke stažení na webu Microsoftu.

Aby se stránka zobrazila tak, jak zamýšlel návrhář, na jakémkoli operačním systému je možné ve vlastnosti CSS zadat několik písem oddělených čárkami.

Tato vlastnost určuje prioritní seznam názvů rodin písem a/nebo obecných názvů rodin. Podle specifikace CSS2 existují dva typy názvů rodin písem:

  1. Název rodiny písem dle vašeho výběru. Například "Times new Roman", "Arial" a další. Názvy rodin písem obsahující mezery musí být uzavřeny v uvozovkách. Pokud uvozovky chybí, všechny znaky mezery před a za názvem písma jsou ignorovány a jakákoli sekvence mezer v názvu písma se převede na jednu mezeru.
  2. Generická (společná) rodina. Specifikace definuje následující generické rodiny:
    • serif - písma s patkami na koncích;
    • sans-serif - bezpatková písma;
    • kurzíva — kurzíva;
    • fantasy - dekorativní písma;
    • monospace - jednoprostorové písmo (s písmeny stejné šířky).
    Příjmení klanů jsou klíčová slova a není třeba je uzavírat do uvozovek.

Pro návrh se tedy vezme standardní písmo z OS Windows, vybere se podobné pro Mac OS a Unix/Linux, zadá se společná rodina písem a je hotovo.

Ale není to tak jednoduché. Pojďme kopat podrobněji.

Hledání webových bezpečných písem

Na internetu se koncept „bezpečných“ webových písem historicky vyvíjel. Bezpečné písmo je písmo, které je standardní pro všechny operační systémy. Protože o takovém stavu věcí si člověk může nechat jen zdát Neexistují žádná absolutně bezpečná písma!

Některá písma lze s určitými výhradami označit za bezpečná.

Základem pro definování „bezpečných“ písem byla písma nejběžnějšího operačního systému Windows, která se používají i v jiných operačních systémech. Příkladem takového použití jsou již zmíněné Core fonty pro Web font package, který si podle statistik stáhlo mnoho uživatelů Unixu/Linuxu.

Tento balíček obsahuje následující fonty: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Všechny podporují azbuku, která je pro Runet důležitá.

Sada písem, která se standardně dodávají s Mac OS X (tento OS je nejrozšířenější mezi uživateli Mac OS), zahrnuje všechna písma ze sady Core fonts for the Web.

Na základě písem Windows používaných v jiných operačních systémech byl tedy vytvořen následující seznam takzvaných „bezpečných“ webových písem:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Kurýr Nový
  • Gruzie
  • Dopad
  • Times New Roman
  • Trebuchet čs
  • Verdana

Písmo Webdings obsahuje ikony a nelze jej použít pro obsah. Andale Mono se příliš nepoužívá, protože se příliš nehodí pro každodenní čtení obrazovky a ne všichni uživatelé Windows jej mají.

Každý uživatel Windows, Mac OS X a naprostá většina uživatelů Unixu/Linuxu (tj. těch, kteří si nainstalovali Core fonts for the Web package) má všechna tato písma.

Ale co zbytek? Koneckonců chcete, aby plán návrháře vidělo co nejvíce uživatelů!

Přečtěte si o tom v druhé části publikace.

Když začínáte vytvářet rozvržení, musíte v CSS konkrétně specifikovat písma použitá na stránce. Návrhář často v různých fontech píše nejen hlavní text stránky, ale také různé nadpisy, loga a monogramy.

Dobrý návrhář, stejně jako dobrý návrhář rozvržení, ví, že prohlížeč může k zobrazení stránky používat pouze ta písma, která jsou nainstalována v počítači uživatele. To znamená, že písma lze rozdělit do dvou kategorií:

  1. Písma, která bez problémů zobrazí drtivá většina uživatelů.
  2. Písma, která nemá dost velká skupina uživatelů.

Pokud designér použil fonty druhé kategorie k vytvoření například loga nebo velkých statických nadpisů, nemůžete váhat použít techniku ​​nahrazení textu obrázkem. Nevýhodou použití této techniky je nepružnost. Pokud dojde ke změnám v textu, budete muset obrázek předělat a změnit CSS (například pokud rozměry nového obrázku neodpovídají tomu starému).

Můžeme říci, že nebezpečí použití techniky přímo závisí na pravděpodobnosti změny textu. Proto například obecný text stránky nelze psát nestandardním písmem! Kompetentní designér by tohle nikdy neudělal. A pokud designér na zelené narazí, dobrý designér layoutu je prostě povinen svou chybu napravit – v layoutu vyměnit tento font za co nejpodobnější standardní.

Ale jak lze rozlišit písma první skupiny od druhé? Je jasné, že se nemůžete spolehnout na sadu písem nainstalovaných přímo na vašem počítači! Pojďme na to přijít.

Standardní fonty

Standardní písma jsou sada písem, která se instalují s operačním systémem. Protože se operační systémy liší, liší se i jejich sada písem. Seznam standardních písem pro různé verze Windows naleznete například v článku Standardní písma Windows a seznam standardních písem Mac OS na stránce Písma obsažená v Mac OS. Pokud jde o operační systémy Unix/Linux, nemají jedinou sadu písem. Mnoho uživatelů Linuxu používá sadu písem DejaVu, zejména na Ubuntu jsou nainstalovány ve výchozím nastavení. Podle statistik z http://www.codestyle.org má mnoho uživatelů Unix/Linux nainstalované také sady písem URW, Free a další. Podle stejných statistik má více než 60 % uživatelů Unixu/Linuxu na svém počítači fonty ze sady Core fonts for the Web, která byla do roku 2002 oficiálně zdarma ke stažení na webu Microsoftu.

Aby se stránka zobrazila tak, jak ji návrhář zamýšlel na libovolném operačním systému, je možné ve vlastnosti CSS font-family zadat několik písem oddělených čárkami.

Tato vlastnost určuje prioritní seznam názvů rodin písem a/nebo obecných názvů rodin. Podle specifikace CSS2 existují dva typy názvů rodin písem:

  1. Název rodiny písem dle vašeho výběru. Například „Times new Roman“, „Arial“ a další. Názvy rodin písem obsahující mezery musí být uzavřeny v uvozovkách. Pokud uvozovky chybí, všechny znaky mezery před a za názvem písma jsou ignorovány a jakákoli sekvence mezer v názvu písma se převede na jednu mezeru.
  2. Generická (společná) rodina. Specifikace definuje následující generické rodiny:
    • serif - písma s patkami na koncích;
    • sans-serif - bezpatková písma;
    • kurzíva - kurzíva;
    • fantasy - dekorativní písma;
    • monospace - jednoprostorové písmo (s písmeny stejné šířky).

Příjmení klanů jsou klíčová slova a není třeba je uzavírat do uvozovek.

Pro návrh se tedy vezme standardní písmo z OS Windows, vybere se podobné pro Mac OS a Unix/Linux, zadá se společná rodina písem a je hotovo.

Ale není to tak jednoduché. Pojďme kopat podrobněji.

Hledání webových bezpečných písem

Na internetu se koncept „bezpečných“ webových písem historicky vyvíjel. Bezpečné písmo je písmo, které je standardní pro všechny operační systémy. Protože se o tomto stavu věcí může jen zdát, absolutně bezpečná písma neexistují!

Některá písma lze s určitými výhradami označit za bezpečná.

Základem pro definování „bezpečných“ písem byla písma nejběžnějšího operačního systému Windows, která se používají i v jiných operačních systémech. Příkladem takového použití jsou již zmíněné Core fonty pro Web font package, který si podle statistik stáhlo mnoho uživatelů Unixu/Linuxu.

Tento balíček obsahuje následující fonty: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Všechny podporují azbuku, která je pro Runet důležitá.

Sada písem, která se standardně dodávají s Mac OS X (tento OS je nejrozšířenější mezi uživateli Mac OS), zahrnuje všechna písma ze sady Core fonts for the Web.

Na základě písem Windows používaných v jiných operačních systémech byl tedy vytvořen následující seznam takzvaných „bezpečných“ webových písem:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Kurýr Nový
  5. Gruzie
  6. Dopad
  7. Times New Roman
  8. Trebuchet čs
  9. Verdana

Písmo Webdings obsahuje ikony a nelze jej použít pro obsah. Andale Mono se příliš nepoužívá, protože se příliš nehodí pro každodenní čtení obrazovky a ne všichni uživatelé Windows jej mají.

Každý uživatel Windows, Mac OS X a naprostá většina uživatelů Unixu/Linuxu (tj. těch, kteří si nainstalovali Core fonts for the Web package) má všechna tato písma.

Ale co zbytek? Koneckonců chcete, aby plán návrháře vidělo co nejvíce uživatelů!

Fonty podporující azbuku

Specifickou vlastností RuNetu je problém s kódováním stránek a podporou azbuky ve fontech. Aby se předešlo problémům s různým kódováním znaků, přišli chytří lidé s Unicode, který vám umožňuje kombinovat znaky z několika jazyků v jednom písmu. Pro stránky v ruském jazyce tedy musíte používat pouze písma Unicode, která podporují azbuku.

Níže je tabulka korespondence písem.

Windows MacOS Unix/Linux rodová rodina
Arial Black Helvetica C.Y. Nimbus Sans L Bezpatkové
Arial Helvetica C.Y. Nimbus Sans L Bezpatkové
Comic Sans MS Monako CY * (viz níže) kurzívní
Kurýr Nový * (viz níže) Nimbus Mono L Jednoprostorový
Gruzie * (viz níže) Učebnice století L Serif
Dopad Charcoal C.Y. * (viz níže) Bezpatkové
Times New Roman Times C.Y. Nimbus Roman No9 L Serif
Trebuchet čs Helvetica C.Y. * (viz níže) Bezpatkové
Verdana Geneva C.Y. DejaVu Sans Bezpatkové

* ve sloupci naproti fontu znamená, že operační systém nemá nativní cyrilické ekvivalenty fontu Windows. Zároveň je ale velká pravděpodobnost, že toto písmo samotné je nainstalováno přímo v operačním systému.

Pokud je například hlavním textem rozvržení Arial, najdeme tento font v tabulce a napíšeme odpovídající řádek v CSS:

tělo ( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; )

tělo (

písmo - rodina: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové;

Tato položka znamená, že pokud má uživatel písmo Arial (a mají jej všichni uživatelé Windows a všichni uživatelé Mac OS X), stránka se zobrazí v tomto písmu. Pokud uživatel toto písmo nemá, bude stránka rusky mluvícího uživatele Mac OS 9 přesně zobrazena ve standardním systémovém písmu Helvetica CY a pro uživatele Unix/Linux bude zobrazena ve písmu Nimbus Sans L , který je nainstalován na 90 % uživatelů Unix/Linux. Pokud je uživatel Unixu/Linuxu v 10 % bez tohoto písma, stránka se zobrazí v patkovém písmu, které je standardně nastaveno pro prohlížení webových stránek.

Kromě toho, že tabulka zohledňuje Unix/Linux fonty, je tam po obvyklé Helvetice i nějaká podivná ikona CY. Pojďme zjistit, co to je!

Před vydáním Mac OS X měl tento řádek následující význam: pro uživatele Windows zobrazujeme stránku v Arialu, pro uživatele Mac OS 9 ve standardním fontu Helvetica a pro ostatní vidíme stránku v systému bezpatkové písmo, které je ve výchozím nastavení nakonfigurováno v prohlížeči. Ale opět důležitá nuance! Standardní písmo Mac OS 9 Helvetica nemá azbuku! Pro ruskojazyčnou stránku to znamenalo následující: pro uživatele Windows zobrazujeme stránku Arial, pro uživatele Mac OS 9 - ve standardním fontu Helvetica, který zobrazuje nečitelné informace, a zbytek viz stránku se systémem bezpatkovým font nakonfigurovaný ve výchozím nastavení v prohlížeči.

Pro správné zobrazení této sady pro uživatele Mac OS 9, namísto necyrilického Helvetica, má smysl zadat stejný standardní Mac OS 9 font Helvetica CY obsahující azbuku.

Čtení pravítek se od vydání systému Mac OS X změnilo. Nyní je určeno jedno běžné standardní písmo pro Windows/Mac OS X. A pokud chceme, aby uživatelé Mac OS 9 viděli záměr návrháře, musíme do řádku písma zahrnout písmo obsahující azbuku.

I když tedy neexistují žádná bezpečná písma, existují bezpečné rodiny písem. Jsou také tzv zásobníky CSS písem. Kromě standardních písem Windows/Mac OS X mohou tyto řádky obsahovat také ekvivalentní písma ze standardní sady Mac OS 9 (která ve výchozím nastavení neobsahuje „bezpečná“ písma) a běžná písma Unix/Linux.

Každý návrhář rozvržení dříve nebo později narazí na okamžik, kdy návrhář použije písmo v rozvržení, které není zahrnuto v seznamu „bezpečných“ písem; To ale ještě není důvod bít na poplach! Například návrháři velmi často používají na rozvrženích písmo Tahoma, které není v tomto seznamu zahrnuto. Správně postavená řada písem otevírá možnost použití nejen Tahoma, ale i jiných písem. Této příležitosti využívá stále větší počet designérů a kompetentní návrhář dispozičního řešení by o tom měl vědět.

Níže je uvedena dodatečná tabulka písem, která nejsou zahrnuta v seznamu „bezpečných“ písem, ale lze je použít v rozvrženích.

Windows MacOS rodová rodina
Konzole Lucida Monako Jednoprostorový
Lucida Sans Unicode Lucida Grandeová Bezpatkové
Tahoma Geneva C.Y. Bezpatkové

Co když neexistuje žádná azbuka?

Pro anglicky psané texty mají výše uvedené tabulky mírně odlišný vzhled.

Windows MacOS Unix/Linux rodová rodina
Arial Black Gadget Nimbus Sans L Bezpatkové
Arial Helvetica Nimbus Sans L Bezpatkové
Comic Sans MS Monako TSCu_Comic kurzívní
Kurýr Nový Kurýr Nimbus Mono L Jednoprostorový
Gruzie * (viz níže) Učebnice století L Serif
Dopad Dřevěné uhlí Rekha Bezpatkové
Times New Roman Times Nimbus Roman No9 L Serif
Trebuchet čs Helvetica Garuda Bezpatkové
Verdana Ženeva DejaVu Sans Bezpatkové

U písem Arial, Courier New a Times New Roman je při vytváření pravítek lepší zadat nejprve písmo Unix/Linux a poté písmo Mac OS. To je způsobeno určitou křivostí sady základních písem Linux X11.

Písma, která nejsou zahrnuta v seznamu „bezpečných“, ale lze je použít v rozvrženích, jsou lépe definována pomocí zásobníků písem CSS založených na této tabulce.

Windows MacOS Unix/Linux rodová rodina
Konzole Lucida Monako - Jednoprostorový
Lucida Sans Unicode Lucida Grandeová Garuda Bezpatkové
Palatino linotyp Palatino Garuda** Bezpatkové
Tahoma Ženeva Kalimati Bezpatkové

Pomlčka ve sloupci Unix/Linux znamená, že uživatelé těchto operačních systémů s největší pravděpodobností uvidí na stránce výchozí písmo.

** V tomto řádku má smysl umístit písmo Garuda před Palatino (viz vysvětlení výše).

Závěry:

  1. Neexistují žádná absolutně bezpečná písma. Následující písma lze považovat za podmíněně bezpečná:
    • Arial
    • Arial Black
    • Comic Sans MS
    • Kurýr Nový
    • Gruzie
    • Dopad
    • Times New Roman
    • Trebuchet čs
    • Verdana
  2. Bezpečné zásobníky CSS, které zohledňují podporu azbuky ve fontech, najdete v článku.
  3. Pokud na stránce není důležitá podpora azbuky, použijeme zásobníky CSS z článku.

Jedním z hlavních úkolů webdesignu je vybrat ten správný standardní fonty. Služby vkládání písem jako Google Web Fonts nebo Typekit byly vytvořeny jako alternativa s cílem poskytnout něco nového.

Jejich použití je velmi snadné. Vezměme si jako příklad Google Web Fonts.

Vyberte písmo Open Sans, Droid Serif nebo Lato. Napište kód a vložte jej do prvku HTML dokument. Jste připraveni na to odkazovat v CSS! Celý proces netrval déle než 60 sekund. A vše je zcela zdarma.

Co by mohlo být špatně?

Některá písma nemusí být dostupná všem. A to znamená, že mohou nastat problémy. Jste rádi, že jste si pro stránky vybrali krásné písmo, ale návštěvník webu místo toho vidí ošklivé písmo.

To se nestane, pokud implementujete možnost zálohování.

Jak důležité je používat bezpečná webová písma?

Každé zařízení má vlastní sadu předinstalovaných písem. Která závisí na operačním systému. Problém je v tom, že mezi nimi jsou drobné rozdíly.

A co webové stránky? Jako tenhle? Písmo, které vidíte, nemusí být to, které bylo původně určeno pro daný web.

co to znamená? Řekněme, že návrhář pro web vybral nějakou rodinu placených písem. Pokud je nemáte nainstalované a neposkytuje je speciální webová služba, pak je písmo, které vidíte, jednou ze standardních možností. Například Times New Roman.

Text na vaší obrazovce proto může vypadat jednoduše hrozně.

Ale standardní fonty pro web k dispozici na všech operačních systémech. Toto je malá sbírka dostupná na Windows, Mac, Google a také Unix a Linux.

Pomocí tohoto výběru mohou designéři i majitelé webových stránek určit, které písmo se má použít jako záložní písmo. To vám dává možnost ovládat, jak bude stránka vypadat na různých zařízeních.

Jako záložní možnost si vývojář vybere písmo, které je velmi podobné původnímu, a právě toto se uživateli zobrazí.

Pojďme se podívat na výběr těch nejoblíbenějších standardní fonty HTML.

15 Nejlepší Web Bezpečné Fonty

  1. Arial

Ve většině případů považováno za standardní. Nejběžnější písmo" sans serif"nebo bezpatková písma ( které nemají patky na koncích písmen). Ve Windows se často používá k nahrazení jiných znaků.

  1. Helvetica


Helvetica je záchranář pro designéry. Tento standardní webové písmo funguje téměř vždy ( alespoň jako záchranná síť pro ostatní písma).

  1. Times New Roman


Slouží pro patková písma stejnou roli jako Arial pro bezpatková písma. Patří mezi nejoblíbenější na Zařízení Windows. Toto je aktualizovaná verze starého písma Times.

  1. Times


CSS standardní písmo The Times zná většina. Mnoho lidí si ho pamatuje malými písmeny v úzkých sloupcích starých novin. Nejběžnější typ tisku, který se stal tradicí.

  1. Kurýr Nový


Podobné jako Times New Roman a používané jako variace staré klasiky. To je také považováno za jednoprostorové písmo. Na rozdíl od patkového a bezpatkového písma mají všechny jeho znaky stejnou šířku.

  1. Kurýr


Staré písmo s pevnou šířkou, které se používá jako záložní na téměř všech zařízeních a operačních systémech.

  1. Verdana


Verdana lze právem považovat za skutečné webové písmo ( skutečné webové písmo) díky jednoduchým liniím působícím jako patky a také velké velikosti. Jeho písmena jsou mírně protáhlá, takže jsou na obrazovce dobře čitelná.

  1. Gruzie


Standardní webové písmo Georgia je tvarem a velikostí podobné písmu Verdana. Jeho znaky jsou větší než u jiných písem stejné velikosti. Ale je lepší ho nepoužívat v kombinaci s jinými. Stejný Times New Roman vypadá ve srovnání jako trpaslík.

  1. Palatino


Palatino sahá až do éry renesance. Žádné vtipy. Toto je další velké písmo, které je ideální pro web. Běžně se používá v titulcích a reklamách.

  1. Garamond


Další starobylé písmo, které pochází z 16. století v Paříži. Jeho nová a vylepšená verze je standardně dodávána na většině zařízení se systémem Windows. Později bylo toto písmo přijato jinými operačními systémy.

  1. Bookman


Bookman ( nebo Bookman Old Style) - jeden z nejlepší standardní fonty pro nadpisy. Jeho charakteristickou vlastností je čitelnost i při použití malé velikosti.

  1. Comic Sans MS


Comic Sans MS je zábavná alternativa pro patkové fonty.

  1. Trebuchet čs


Jedná se o středověké písmo původně vyvinuté společností Microsoft v polovině devadesátých let. Byl použit ve Windows XP. Dnes se používá ke skládání hlavního textu.

  1. Arial Black


Analog standardní písmo pro web Arial. Pravda, je větší, tlustší a tužší. Jeho proporce jsou podobné fontu Helvetica. A to je důležité. Mohou úspěšně nahradit Helvetica bez nutnosti kupovat licenci.

  1. Dopad


Další skvělý font pro zvýraznění nadpisů. Funguje to dobře v krátké frázi složené z několika slov, stejně jako v dlouhých větách.




Nahoru