Sdílet prostřednictvím


Fonty

Poznámka

Tento průvodce návrhem byl vytvořen pro Windows 7 a nebyl aktualizován pro novější verze Windows. Většina pokynů se stále používá v zásadě, ale prezentace a příklady neodráží naše aktuální pokyny k návrhu.

Uživatelé pracují s textem více než s jakýmkoli jiným prvkem v systému Microsoft Windows. Segoe UI (vyslovuje se "SEE-go") je systémové písmo systému Windows. Standardní velikost písma byla zvýšena na 9 bodů.

ilustrace abecedy v písma segoe ui

Písmo Segoe UI.

Segoe UI a Segoe nejsou stejné písmo. Segoe UI je písmo Windows určené pro textové řetězce uživatelského rozhraní. Segoe je písmo značky používané Microsoftem a partnery k výrobě materiálů pro tisk a reklamu.

Segoe UI je přístupný, otevřený a přívětivý typ a v důsledku toho má lepší čitelnost než Tahoma, Microsoft Sans Serif a Arial. Má vlastnosti humanistského sans serif: různé šířky svých hlavních písmen (úzké E a S, například v porovnání s Helvetica, kde šířky jsou spíše, poměrně široké); napětí a písmena jeho malých písmen; a jeho pravdivá kurzíva (spíše než "šikmá" nebo šikmá římská, jako mnoho průmyslových sans serifů). Typ písma má mít stejný vizuální efekt na obrazovce i v tisku. Byl navržen tak, aby byl humanistický sans bez silné postavy nebo rušivé nechtěnosti.

Uživatelské rozhraní Segoe je optimalizované pro ClearType, které je ve výchozím nastavení ve Windows zapnuté. S povolenou funkcí ClearType je uživatelské rozhraní Segoe elegantním čitelným písmem. Bez povolení ClearType je uživatelské rozhraní Segoe přijatelné pouze na okraji. Tento faktor určuje, kdy byste měli použít uživatelské rozhraní Segoe.

Segoe UI zahrnuje latinku, řečtinu, cyrilici a arabské znaky. Existují nová písma, optimalizovaná také pro ClearType, vytvořená pro jiné znakové sady a použití. Patří mezi ně Meiryo pro japonštinu, Malgun Gothic pro korejštinu, Microsoft JhengHei pro čínštinu (tradiční), Microsoft YaHei pro čínštinu (zjednodušená), Gisha pro hebrejštinu a Leelawadee pro thajštinu a písma ClearType Collection navržená pro použití v dokumentu.

Meiryo obsahuje latinky založené na Verdana. Malgun Gothic, Microsoft JhengHei a Microsoft YaHei používají přizpůsobené uživatelské rozhraní Segoe. Použití kurzívy těchto písem se nedoporučuje. Malgun Gothic, Microsoft JhengHei a Microsoft YaHei jsou dodávány pouze v pravidelných a tučných stylech, což znamená, že kurzíva jsou syntetizovány nakláněným styly. I když Meiryo obsahuje skutečnou kurzívu a tučné kurzívu, tyto styly se vztahují pouze na latinky, japonské znaky zůstávají při použití kurzívy v pořádku.

V uživatelském rozhraní pásů karet uživatelského rozhraní se upřednostňuje varianta Meiryo s názvem Meiryo UI.

Pro podporu národních prostředí pomocí těchto znakových sad se uživatelské rozhraní Segoe nahradí správnými písmy v závislosti na každém národním prostředí během lokalizace procesu.

Pokud chcete licenci Segoe UI a dalších písem Microsoftu pro distribuci pomocí programu založeného na Systému Windows, obraťte se na Monotype.

Poznámka: Pokyny týkající se stylu a tónu a textu uživatelského rozhraní jsou uvedeny v samostatných článcích.

Koncepty návrhu

Písma, písma, písma, velikosti bodů a atributy

V tradiční typografii písmo popisuje kombinaci řezu písma, velikosti bodu a atributů. Typ písma je vzhled písma. Segoe UI, Tahoma, Verdana a Arial jsou všechny typy. Velikost bodu odkazuje na velikost písma měřenou od horní části vzestupných dolů sestupných hodnot minus vnitřní mezery (označované jako úvodní). Bod je přibližně 1/72 palce. A konečně písmo může mít atributy tučného písma nebo kurzívy.

Neformálně lidé často místo písma používají písmo, jak to dělá tento článek, ale technicky vzato, segoe UI je písmo, nikoli písmo. Každá kombinace atributů je jedinečné písmo (například 9 bodů Segoe UI regular, 10 point Segoe UI bold atd.).

Serif a sans serif

Písma jsou buď bezpatková, nebo bezpatková. Serif označuje malé tahy, které často končí tahy písmen v písmu. Bezpatkový typ písma nemá patky.

Čtenáři obecně dávají přednost bezpatkovým písmům používaným jako základní text v dokumentu. Patky poskytují pocit formality a eleganci dokumentu. U textu uživatelského rozhraní je potřeba čistý vzhled a nižší rozlišení počítačových monitorů usnadňuje výběr bezpatkového písma.

Kontrast

Text se nejsnadněji čte, pokud je mezi světelností textu a pozadím velký rozdíl. Černý text na bílém pozadí poskytuje nejvyšší kontrastní tmavý text na velmi světlém pozadí může také poskytovat vysoký kontrast. Tato kombinace je nejvhodnější pro primární plochy uživatelského rozhraní.

Světlý text na tmavém pozadí nabízí dobrý kontrast, ale ne tak dobrý jako tmavý text na světlém pozadí. Tato kombinace funguje dobře pro sekundární plochy uživatelského rozhraní, jako jsou podokna úloh Průzkumníka, která chcete zvýraznit vzhledem k primárním povrchům uživatelského rozhraní.

Pokud chcete zajistit, aby uživatelé text přečetli, použijte tmavý text na světlém pozadí.

Affordances

Text může použít následující cenových k označení, jak se používá:

  • Ukazatel. Ukazatel I-pruh ("výběr textu") označuje, že text je možné vybrat, zatímco ukazatel na šipku vlevo ("normální výběr") označuje, že text není.
  • Vynechávka. Když má text fokus, kurzor je blikající svislý pruh, který označuje kurzor nebo bod výběru ve vybraném nebo upravitelném textu.
  • Krabice. Pole kolem textu, které označuje, že je možné ho upravit. Pokud chcete snížit váhu prezentace, může se pole dynamicky zobrazovat jenom v případě, že je vybraný upravitelný text.
  • Barva popředí Světle šedá označuje, že text je zakázaný. Nešedlé barvy, zejména modré a fialové, označují, že text je odkaz.
  • Barva pozadí Světle šedé pozadí slabě naznačuje, že text je jen pro čtení, ale v praxi může mít jakýkoli barevný pozadí.

Tyto cenové možnosti jsou kombinovány pro následující významy:

  • Upravitelný. Text zobrazený v poli s ukazatelem výběru textu, kurzorem (na vstupním fokusu) a obvykle na bílém pozadí.
  • Je možné vybrat jen pro čtení. Text s vybraným ukazatelem a kurzorem (na vstupním fokusu)
  • Jen pro čtení, není možné vybrat. Text s ukazatelem šipky
  • Invalidní. Světle šedý text s ukazatelem šipky, někdy na šedém pozadí.

Text jen pro čtení má tradičně šedé pozadí, ale šedé pozadí není nutné. Ve skutečnosti může být šedé pozadí nežádoucí, zejména pro velké bloky textu, protože naznačuje, že text je zakázaný a nedoporučuje čtení.

Přístupnost a systémové písmo, velikosti a barvy

Pokyny pro zpřístupnění textu uživatelům s postižením nebo postižením se dají omezit na jedno jednoduché pravidlo: Respektujte nastavení uživatele tak, že vždy používáte systémové písmo, velikosti a barvy.

Pokud děláš jen jednu věc...

Respektujte nastavení uživatele vždy pomocí systémového písma, velikostí a barev.

vývojáři: Z kódu můžete určit vlastnosti systémového písma (včetně jeho velikosti) pomocí funkce Rozhraní API GetThemeFont. Systémové barvy můžete určit pomocí funkce GetThemeSysColor API.

Vzhledem k tomu, že nemůžete provádět žádné předpoklady o nastavení systémového motivu uživatelů, měli byste:

  • Barvy písma a pozadí vždy založte ze systémových barev motivu. Nikdy nevytvádejte vlastní barvy založené na pevných hodnotách RGB (červené, zelené, modré).
  • Barvy systémového textu se vždy shodují s odpovídajícími barvami pozadí. Pokud například zvolíte COLOR_STATICTEXT pro barvu textu, musíte také zvolit COLOR_STATIC pro barvu pozadí.
  • Vždy vytvářejte nová písma na základě poměrných variant systémového písma. Vzhledem k metrikám systémových písem můžete vytvořit tučné písmo, kurzívu, větší a menší varianty.

Jednoduchý způsob, jak zajistit, aby program respektoval nastavení uživatelů, je otestovat pomocí jiné velikosti písma a barevného schématu s vysokým kontrastem. Ve zvoleném barevném schématu by se měl správně zobrazit veškerý text.

Vzory použití

Text má několik vzorů použití:

Zvyk Popis
text záhlaví
Text v záhlaví, který identifikuje okno.
příklad písma záhlaví
hlavní pokyny
Text, který vysvětluje, co dělat na stránce, okně nebo dialogovém okně
příklad hlavního písma písma textu
sekundární pokyny
Doplňkový text, který vysvětluje, co dělat na stránce, okně nebo dialogovém okně
příklad sekundárního písma textu
normálního textu
Běžný (jen pro čtení) zobrazený v uživatelském rozhraní
příklad normálního písma textu
zvýrazněný text
Tučný text se používá k usnadnění parsování textu a k upoutat pozornost uživatelům textu, který musí číst. Kurzíva se používá k doslova odkazování na text (místo uvozovek) a ke zvýraznění konkrétních slov.
příklad zvýrazněného písma textu
upravitelné textové
Text, který můžou uživatelé upravovat, se zobrazí v poli. pokud chcete snížit váhu prezentace, může být pole zobrazeno pouze v případě, že je vybraný upravitelný text.
příklad upravitelného písma textu
Zakázáno textové
Text, který se nevztahuje na aktuální kontext, například popisky pro zakázané ovládací prvky. zakázaný text označuje, že uživatelé (obvykle) by neměli text číst.
příklad zakázaného písma textu
odkazy
Text použitý k přechodu na jinou stránku, okno nebo téma nápovědy nebo inicializaci příkazu
příklad písma textu odkazu
příklad písma textu odkazů (najetí myší)
záhlaví skupiny
Text použitý k seskupení položek v zobrazení seznamu
příklad písma záhlaví skupiny
názvu souboru
Text názvu souboru (jenom v zobrazení obsahu)
příklad názvu souboru (v zobrazení obsahu)
text dokumentu
Text použitý v dokumentech (na rozdíl od textu uživatelského rozhraní)
příklad písma textu dokumentu
nadpisy dokumentu
Text použitý jako nadpis v dokumentu
příklad písma textu nadpisů dokumentu

Pokyny

Písma a barvy

  • Následující písma a barvy jsou výchozí pro Systém Windows Vista a Windows 7.
Vzor Symbol motivu Písmo, barva
příklad písma záhlaví
TitulekFont
9 bodů černá (#0000000) Segoe UI
příklad hlavního písma písma textu
MainInstruction
12 bodů modrá (#003399) Segoe UI
příklad sekundárního písma textu
Instrukce
9 bodů černá (#0000000) Segoe UI
příklad normálního písma textu
Základní text
9 bodů černá (#0000000) Segoe UI
příklad zvýrazněného písma textu
Základní text
9 bodů. černá (#0000000) Segoe UI, tučné písmo nebo kurzíva
příklad upravitelného písma textu
Základní text
9 bodů černé (#0000000) Segoe UI v poli
příklad zakázaného písma textu
Invalidní
9 bodů– tmavě šedá (#323232) Segoe UI
příklad písma textu odkazu
HyperLinkText
9 bodů modrá (#0066CC) Segoe UI
příklad písma textu odkazů (najetí myší)
Horký
9 bodů– světle modrá (#3399FF) Segoe UI
příklad písma záhlaví skupiny
11 pt. blue (#003399) Segoe UI
příklad názvu souboru (v zobrazení obsahu)
11 bodů černá (#0000000) Segoe UI
příklad písma textu dokumentu
(žádný)
9 bodů černá (#0000000) Calibri
příklad písma textu nadpisů dokumentu
(žádný)
17 bodů černá (#000000) Calibri
  • Zvolit písma a optimalizovat rozložení oken na základě technologie uživatelského rozhraní a cílové verze Windows:
Technologie uživatelského rozhraní Cílová verze Windows Písma, která se mají použít a optimalizovat pro
Windows Presentation Foundation
Všichni
Používejte části motivu WPF.
Win32 nebo WinForms
Windows Vista nebo novější
Použijte příslušné písmo uživatelského rozhraní Segoe.
Rozšiřitelné komponenty nebo před windows Vista
Chcete-li cílit na systém Windows XP a Windows 2000, použijte 8 bod MS Shell Dlg 2 pseudo písmo, které mapuje na Tahoma.
Chcete-li cílit na starší verze systému Windows, použijte 8 bod MS Shell Dlg pseudo písmo, které mapuje tahoma v systémech Windows 2000 a Windows XP a MS Sans Serif ve Windows 95, Windows 98, Windows Millennium Edition a Windows NT 4.0.
  • vývojáři :
    • U prvků, které používají pevné rozložení (například šablony dialogových oken Systému Windows a WinForms), pevně zakódujte příslušné písmo z předchozí tabulky.
    • Pro prvky, které používají dynamické rozložení (například Windows Presentation Foundation), použijte písma motivu. Pomocí rozhraní API motivu, jako je DrawThemeText, můžete nakreslit text na základě symbolu motivu. Pokud služba motivu není spuštěná, nezapomeňte použít alternativu založenou na systémových metrikách.
  • V případě uživatelského rozhraní Segoe použijte velikost písma o velikosti 9 bodů nebo větší. Písmo Segoe UI je optimalizované pro tyto velikosti, takže nepoužívejte menší velikosti.
  • Barvy systémového textu se vždy shodují s odpovídajícími barvami pozadí. Pokud například zvolíte COLOR_STATICTEXT pro barvu textu, musíte také zvolit COLOR_STATIC pro barvu pozadí.
  • Vždy vytvářejte nová písma na základě poměrných variant systémového písma. Vzhledem k metrikám systémových písem můžete vytvořit tučné písmo, kurzívu, větší a menší varianty.
  • Zobrazí velké bloky textu jen pro čtení (například licenční podmínky) na světlém pozadí místo šedého pozadí. Šedé pozadí naznačují, že text je zakázaný a nedoporučuje čtení.
  • Zvažte maximální délku řádku 65 znaků, aby byl text snadno čitelný. (Znaky zahrnují písmena, interpunkci a mezery.)

Atributy

  • Většina textu uživatelského rozhraní by měla být prostý bez jakýchkoli atributů. Atributy lze použít takto:
    • Tučný. V popiscích ovládacích prvků se text snadněji parsuje. Používejte střídmě při upoutat pozornost uživatelům textu, které musí číst. Použití příliš velkého tučného písma sníží jeho dopad.
    • Kurzíva. Umožňuje odkazovat na text doslova místo uvozovek. Používejte střídmě ke zvýraznění konkrétních slov. Používá se pro výzvy v textových polích a upravitelných rozevíracích seznamech.
    • Tučný kurzíva. Nepoužívejte.
    • Podtrhnout. Nepoužívejte s výjimkou odkazů. Pro zdůraznění používejte kurzívu.
  • Ne všechna písma podporují tučné písmo a kurzívu, takže by nikdy neměly být pro pochopení textu zásadní.