Typografie v Windows

několik slov vykreslených v Segoe UI Variable

Jako vizuální reprezentace jazyka je hlavním úkolem typografie sdělit informace. Systém typů Windows vám pomůže vytvořit strukturu a hierarchii v obsahu, aby se maximalizovala čitelnost a čitelnost uživatelského rozhraní.

Segoe UI Variable je nové systémové písmo pro Windows. Jedná se o obnovenou verzi klasického Segoe, která používá technologii proměnných písem k dynamickému zajištění skvělé čitelnosti ve velmi malých velikostech a vylepšených obrysů ve větších velikostech.

Návod

Tento článek popisuje, jak se pro aplikace Windows používá jazyk Fluent Design. Další informace naleznete v tématu Fluent Design - Typografie.

Použití proměnné Segoe Fluent

Proměnné uživatelského rozhraní Segoe podporuje dvě osy pro jemnější ovládání textu: tloušťku a optickou velikost.

  • Osa váhy (wght) je přírůstková, s váhami od Tenké (100) po Tučné (700).
  • Optická osa velikosti (opsz) je ve výchozím nastavení automatická a zapnutá. Řídí tvar a velikost počítadel v písmu, aby byla upřednostněna čitelnost při malých velikostech a osobitost při velkých velikostech (pro optické měřítko od 8 bodů do 36 bodů).

Při použití běžných ovládacích prvků XAML se pro podporované jazyky ve výchozím nastavení vybere písmo Segoe UI Variable. Pokud se použije toto písmo nebo jiné proměnné písmo s optickou osou, optická velikost se automaticky shoduje s požadovanou velikostí písma. Při použití HTML je optické škálování také automatické, ale budete muset zadat písmo Segoe UI Variable v šabloně STYLŮ CSS.

Slovo 'Segoe' vykreslené písmem Segoe UI Variable s několika zvýrazněnými aspekty písma

Hmotnosti

Název váhy Hodnota hmotnostní osy Vizuální prvek
světlo 300 slovo Segoe vykreslené ve světle proměnné uživatelského rozhraní Segoe
Semilight 350 slovo „Segoe“ vykreslené v písmu Segoe UI Variable ve stylu semilight
Běžné 400 slovo Segoe vykreslené v běžné proměnné uživatelského rozhraní Segoe
polobold 600 slovo 'Segoe' vykreslené písmem Segoe UI Variable semibold
tučné 700 slovo Segoe tučně vykreslené ve fontu Segoe UI Variable

Optická osa

malé písmeno vykreslené v proměnné uživatelského rozhraní Segoe s obrysy různých obrazců, které může mít na základě kontextu, ve kterém se vykresluje

Osvědčené postupy pro typografii v Windows 11

Windows 11 používá proměnnou uživatelského rozhraní Segoe s následujícími atributy na základě kontextu, ve kterém se text zobrazuje.

Vlastnost Hodnota Poznámky
Hmotnost Normální, Polotučné Pro většinu textu použijte běžnou tloušťku, pro nadpisy použijte polotučné písmo
Zarovnání Vlevo, Střed Ve výchozím nastavení zarovnat doleva, zarovnat na střed pouze ve výjimečných případech, například v textu pod ikonami
minimální hodnoty 14px Semibold, 12px Regular Text menší než tyto velikosti a tloušťky je v některých jazycích nečitelný
kryt Velká písmena věty Použít psaní malými písmeny jako ve větách pro veškerý text uživatelského rozhraní, včetně názvů.
Zkrácení Tři tečky a výřez Ve většině případů používejte tři tečky; výřez se používá pouze ve výjimečných případech.

Příklady

Otevřete aplikaci Galerie WinUI 3 a podívejte se na principy typografie v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady většiny ovládacích prvků, funkcí a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo získejte zdrojový kód na GitHub

Typografie v aplikacích Windows

hlavní obrázek

Jako vizuální reprezentace jazyka je hlavním úkolem typografie sdělit informace. Jeho styl by nikdy neměl být v cestě tohoto cíle. V tomto článku probereme, jak stylovat typografii ve vaší Windows aplikaci, abychom uživatelům pomohli snadno a efektivně pochopit obsah.

Písmo

V uživatelském rozhraní aplikace byste měli použít jedno písmo a doporučujeme použít výchozí písmo pro aplikace Windows Segoe UI Variable. Je navržená tak, aby zachovala optimální čitelnost mezi velikostmi a hustotami pixelů a nabízí čistou, lehkou a otevřenou estetickou stránku, která doplňuje obsah systému.

Ukázkový text písma Segoe UI Variable.

Pokud chcete zobrazit neanglické jazyky nebo vybrat jiné písmo aplikace, přečtěte si prosím Languages a Fonts pro naše doporučená písma pro aplikace Windows.

Velikost a škálování

Velikost písma v aplikacích XAML se automaticky škáluje na všech zařízeních. Algoritmus měřítka zajišťuje, že písmo o velikosti 24 pixelů na velké obrazovce vzdálené 10 stop je stejně čitelné jako písmo o velikosti 24 pixelů na malé obrazovce, která je vzdálená několik palců.

zobrazení vzdáleností pro různá zařízení.

Vzhledem k tomu, jak systém škálování funguje, navrhujete efektivní pixely, nikoli skutečné fyzické pixely, a neměli byste měnit velikosti písem pro různé velikosti obrazovek nebo rozlišení.

Hierarchie

Uživatelé při skenování stránky spoléhají na hierarchii vizuálů: záhlaví shrnují obsah a základní text poskytují podrobnější informace. Pokud chcete v aplikaci vytvořit jasnou vizuální hierarchii, postupujte podle typografického systému Windows.

snímek obrazovky se třemi řádky textu, kde se velikost písma zmenší z jednoho řádku na další.

Typ rampy

Rampa typu Windows vytváří zásadní vztahy mezi styly typů na stránce a pomáhá uživatelům snadno číst obsah. Všechny velikosti jsou v efektivních pixelech a jsou optimalizované pro Windows aplikace běžící na všech velikostech obrazovky.

Windows 11 používá následující hodnoty pro různé typy textu v uživatelském rozhraní.

Příklad Hmotnost Velikost/výška řádku
Příklad textu titulku Malý 12/16 epx
Příklad základního textu Text 14/20 epx
Příklad základního silného textu Text polotučný 14/20 epx
Příklad velkého textu Text 18/24 epx
Příklad velkého silného textu textu Text polotučný 18/24 epx
Příklad textu titulků Zobrazení polotučné 20/28 epx
Příklad textu nadpisu Zobrazení polotučné 28/36 epx
Příklad nadpisu velkého textu Zobrazení polotučné 40/52 epx
Příklad zobrazeného textu Zobrazení polotučné 68/92 EPX

Tyto styly typů jsou k dispozici jako statické prostředky XAML, které se řídí konvencemi rampy typu XAML , takže je můžete použít přímo ve své aplikaci.

Poznámka:

Styly tučného písma a kurzívy nejsou součástí typografické škály Windows. Pro zdůraznění použijte středník místo tučného písma. Kurzíva je vyloučena, protože může snížit čitelnost a srozumitelnost, zejména pro osoby s dyslexií.

Zarovnání

Výchozí TextAlignment je levý, a ve většině případů zarovnání vlevo a roztřepené na pravé straně poskytuje konzistentní ukotvení obsahu a jednotné rozložení. Informace o jazycích RTL naleznete v tématu Úpravy rozložení a písem pro podporu globalizace.

Zobrazuje text zarovnaný vlevo. 

<TextBlock TextAlignment="Left">

Počet znaků

čtvrtý snímek obrazovky se zeleným pruhem, který má zelenou značku zaškrtnutí a slovo Do. 50–60 písmen na řádek pro snadné čtení.

nepoužívejte Nepoužívejte méně než 20 znaků nebo více než 60 znaků na řádek, protože je obtížné číst.

Výřezy a tři tečky

Pokud množství textu přesahuje dostupné místo, doporučujeme vystřihnout text a vložit tři tečky [...], což je výchozí chování většiny textových ovládacích prvků WinUI.

Zobrazí rámeček zařízení s výřezem textu. 

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Pátý snímek obrazovky zeleného pruhu, který má zelenou značku zaškrtnutí a slovo Do. Oříznout text a zalomit, pokud je povoleno více řádků.

nepoužívejte Nepoužívejte tři tečky, abyste se vyhnuli nepřehledným vizuálním prvkům.

Poznámka:

Pokud kontejnery nejsou dobře definované (například žádná barva pozadí), nebo pokud existuje odkaz pro zobrazení dalšího textu, použijte tři tečky.

Jazyky

Segoe UI Variable je naše písmo pro angličtinu, evropské jazyky, řečtinu a ruštinu. Další jazyky najdete v následujících doporučeních.

Globalizace a lokalizace písem

Pro použití rozhraní API pro mapování písem LanguageFont k programatickému přístupu k doporučené rodině písem, velikosti, tloušťce a stylu pro určitý jazyk. Objekt LanguageFont poskytuje přístup ke správným informacím o písmu pro různé kategorie obsahu, včetně záhlaví uživatelského rozhraní, oznámení, základního textu a uživatelsky upravitelných písem textu dokumentu. Další informace najdete v tématu Úprava rozložení a písem pro podporu globalizace.

Písma pro jiné jazyky než Latin

Rodina písem Styly Poznámky
Ebrima Normální, tučné Písmo uživatelského rozhraní pro africké skripty (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi Normální, tučné Písmo uživatelského rozhraní pro severoamerické skripty (kanadské slabiky, Cherokee, Osage).
Uživatelské rozhraní Leelawadee Normální, Polotučné, Tučné Písmo uživatelského rozhraní pro skripty jihovýchodní Asie (Buginese, Khmer, Lao, Thai).
Malgun Gothic Běžné Písmo uživatelského rozhraní pro korejštinu
Microsoft uživatelské rozhraní JhengHei Normální, Tučné, Světlé Písmo uživatelského rozhraní pro tradiční čínštinu
Microsoft uživatelské rozhraní YaHei Normální, Tučné, Světlé Písmo uživatelského rozhraní pro zjednodušenou čínštinu
myanmarský text Běžné Záložní písmo pro myanmarský skript.
Uživatelské rozhraní Nirmala Normální, Polotučné, Tučné Písmo uživatelského rozhraní pro skripty jižní Asie (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI Pravidelné, Kurzíva, Světlá kurzíva, Černá kurzíva, Tučné, Tučné kurzíva, Světlé, Polosvětlo, Polotučné, Černé Písmo uživatelského rozhraní pro arabštinu, arménštinu, gruzínštinu a hebrejštinu.
SimSun Běžné Starší písmo uživatelského rozhraní čínštiny.
Yu Gothic uživatelské rozhraní Světlo, Středník, Normální, Polobold, Tučné Písmo uživatelského rozhraní pro japonštinu

Písma

Bezpatková písma

Bezpatková písma jsou skvělou volbou pro nadpisy a prvky uživatelského rozhraní.

Rodina písem Styly Poznámky
Arial Normální, Kurzíva, Tučné, Tučná kurzíva, Black Podporuje evropské a střední východní skripty (latinka, řečtina, cyrilice, arabština, arménská a hebrejština). Černá hmotnost podporuje pouze evropské skripty.
Calibri Normální, Kurzíva, Tučné, Tučné kurzíva, Světlý, Světlá kurzíva Podporuje evropské a střední východní skripty (latinka, řečtina, cyrilice, arabština a hebrejština). Arabština je k dispozici pouze ve svislých verzích.
Consolas Normální, Kurzíva, Tučné, Tučná kurzíva Písmo s pevnou šířkou, které podporuje evropské skripty (latinka, řečtina a cyrilice).
Segoe UI Pravidelné, Kurzíva, Světlá kurzíva, Černá kurzíva, Tučné, Tučné kurzíva, Světlé, Polosvětlo, Polotučné, Černé Písmo uživatelského rozhraní pro skripty evropského a středního východu (arabština, arménská, cyrilice, gruzie, řečtina, hebrejština, latinka) a také skript Lisu.
Selawik Pravidelné, Polosvětlo, Světlo, Tučné, Polotučné Opensourcové písmo, které je metricky kompatibilní s uživatelským rozhraním Segoe, určené pro aplikace na jiných platformách, které nechtějí seskupit uživatelské rozhraní Segoe. Get Selawik na GitHub.

Patková písma

Bezpatková písma jsou vhodná pro prezentaci velkého množství textu.

Rodina písem Styly Poznámky
Cambria Běžné Písmo Serif, které podporuje evropské skripty (latinka, řečtina, cyrilice).
Kurýr Nový Normální, Kurzíva, Tučné, Tučná kurzíva Písmo serif s pevnou šířkou, které podporuje evropské a střední východové skripty (latinka, řečtina, cyrilice, arabština, arménská a hebrejština).
Gruzie Normální, Kurzíva, Tučné, Tučná kurzíva Podporuje evropské skripty (latinka, řečtina a cyrilice).
Časy Nový Roman Normální, Kurzíva, Tučné, Tučná kurzíva Starší písmo, které podporuje evropské skripty (latinka, řečtina, cyrilice, arabština, arménská, hebrejština).

Různá písma

Písma proměnných jsou vhodná pro přesné řízení vzhledu textu.

Rodina písem Sekery Poznámky
Bahnschrift Hmotnost, šířka Proměnlivé písmo, které podporuje latinku, řečtinu a cyrilici.
Proměnná uživatelského rozhraní Segoe Hmotnost, optická velikost Proměnlivé písmo, které podporuje latinku, řečtinu a cyrilici.

Symboly a ikony

Rodina písem Styly Poznámky
Segoe Fluent Ikony Běžné Písmo uživatelského rozhraní pro ikony aplikací Další informace naleznete v článku o písmu Segoe Fluent Icons .
Segoe UI Emoji Běžné Písmo uživatelského rozhraní pro emoji
Symbol uživatelského rozhraní Segoe Běžné Náhradní písmo pro symboly
  • Last updated on