Tipográfia a Windowsban

A nyelv vizuális ábrázolásaként a tipográfia fő feladata az információk közlése. A Windows-típusrendszer segítségével struktúrát és hierarchiát hozhat létre a tartalomban annak érdekében, hogy a felhasználói felületen maximalizálhassa az olvashatóságot és az olvashatóságot.

A Segoe UI Változó a Windows új rendszer betűtípusa. Ez egy frissített változat a klasszikus Segoeról, amely változó betűtípus-technológiát használ, hogy dinamikusan biztosítson kiváló olvashatóságot nagyon kis méretek esetén, és továbbfejlesztett körvonalakat a kijelző méretű szövegekhez.

Jótanács

Ez a cikk bemutatja, hogyan alkalmazza a Fluent Design nyelvet a Windows-alkalmazásokra. További információ: Fluent Design – Tipográfia.

A Segoe Fluent Változó használata

A Segoe UI-változó két tengelyt támogat a szöveg finomabb szabályozásához: a súlyt és az optikai méretet.

• A súlytengely (wght) fokozatos, Vékonytól (100) Félkövérig (700) terjedő súlyokkal.
• Az optikai mérettengely (opsz) alapértelmezés szerint automatikus és be van kapcsolva. A betűtípusban szabályozza a számlálók alakját és méretét, hogy a kis méreteknél az olvashatóságot, míg a nagy méreteknél a személyiséget részesítse előnyben (optikai méretezés esetén 8 pontostól 36 pontosig).

Az XAML gyakori vezérlőinek használatakor alapértelmezés szerint a Segoe UI Változó betűtípus lesz kiválasztva a támogatott nyelvekhez. Ha ezt a betűtípust vagy egy másik, optikai tengelyt tartalmazó változó betűtípust használ, az optikai méret automatikusan megegyezik a kért betűmérettel. HTML használata esetén az optikai skálázás is automatikus, de meg kell adnia a Segoe UI Változó betűtípust a CSS-ben.

Súlyok

Súly neve	Súlytengely értéke	Vizuális
Fény	300
Szemi-fény	350
Rendszeres	400
Félbold	600
Merész	700

Optikai tengely

Ajánlott tipográfiai eljárások a Windows 11-ben

A Windows 11 Segoe felhasználói felületi változót használ a következő attribútumokkal a szöveg megjelenítésének kontextusa alapján.

Jellemző	Érték	Jegyzetek
Súly	Normál, Félbold	A legtöbb szöveghez használjon normál súlyt, a címekhez pedig a Semiboldot.
Igazítás	Balra, Középre	Alapértelmezés szerint balra igazítás, középre igazítás csak ritkán, például az alábbi szöveg ikonok esetén
Minimális értékek	14px Semibold, 12px Normál	Az ilyen méretű és súlyú szövegek egyes nyelvekben olvashatatlanok
Burkolat	Mondatos eset	Mondatkezdő nagybetű használata az összes felhasználói felület szövegéhez, beleértve a címeket is
Csonkolás	Három pont és kivágás	A legtöbb esetben használjon három pontot; A kivágást csak ritkán használják

Példák

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a tipográfiai alapelveket működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI 3 vezérlők, funkciók és funkciók többségére. Szerezd meg az alkalmazást a Microsoft Store-ból , vagy a forráskódot a GitHubról .

Tipográfia a Windows Appsben

A nyelv vizuális ábrázolásaként a tipográfia fő feladata az információk közlése. A stílusnak soha nem szabad akadályoznia a célt. Ebben a cikkben bemutatjuk, hogyan lehet stílustipográfiai stílust használni a Windows-alkalmazásban, hogy a felhasználók könnyebben és hatékonyan megértsék a tartalmakat.

Betűtípus

Az alkalmazás felhasználói felületén egy betűtípust kell használnia, és azt javasoljuk, hogy tartsa be a Windows-alkalmazások alapértelmezett betűtípusát, a Segoe felhasználói felületi változót. Úgy tervezték, hogy a méret és a képpontsűrűség között optimális olvashatóságot tartson fenn, és tiszta, világos és nyitott esztétikát kínál, amely kiegészíti a rendszer tartalmát.

Ha nem angol nyelvű nyelveket szeretne megjeleníteni, vagy másik betűtípust szeretne választani az alkalmazáshoz, tekintse meg a Windows-alkalmazásokhoz ajánlott betűtípusok nyelveit és betűtípusait .

Méret és skálázás

Az XAML-alkalmazások betűméretei automatikusan skálázhatók az összes eszközön. A skálázási algoritmus biztosítja, hogy egy 24 px-es betűtípus egy 10 méterre lévő nagy képernyőn ugyanolyan olvasható legyen, mint egy 24 képpontos betűtípus egy néhány hüvelyknyire lévő kis képernyőn.

A skálázási rendszer működése miatt hatékony képpontokban tervez, nem tényleges fizikai képpontokban, és nem kell módosítania a betűméreteket a különböző képernyőméretek vagy felbontások esetében.

Hierarchia

A felhasználók a vizuális hierarchiára támaszkodnak egy lap áttekintésekor: a fejlécek összegzik a tartalmat, a szövegtörzs pedig részletesebb információt nyújt. Ha tiszta vizualizációs hierarchiát szeretne létrehozni az alkalmazásban, kövesse a Windows-típusra vonatkozó rámpát.

Gépelés rámpa

A Windows-típusrámpa kritikus kapcsolatokat hoz létre a lapon található típusstílusok között, így a felhasználók könnyebben olvashatják a tartalmakat. Minden méret hatékony képpontban van, és minden képernyőméreten futó Windows-alkalmazásokhoz van optimalizálva.

A Windows 11 a következő értékeket használja a felhasználói felületen található különböző típusú szövegekhez.

példa	Súly	Méret/vonalmagasság
	Kicsi	12/16 epx
	Szöveg	14/20 epx
	Szöveg félkövér	14/20 epx
	Szöveg	18/24 epx
	Félkövér megjelenítés	20/28 epx
	Félkövér megjelenítés	28/36 epx
	Félkövér megjelenítés	40/52 epx
	Félkövér megjelenítés	68/92 epx

További részletekért tekintse meg az XAML típusú rámpa használatáról szóló útmutatót.

Igazítás

Az alapértelmezett TextAlignment balra igazít, és a legtöbb esetben a balra igazított és cikk-cakkos jobb oldal biztosítja a tartalom következetes rögzítését és egységes megjelenését. RTL-nyelvek esetén lásd: Az elrendezés és a betűtípusok módosítása a globalizáció támogatásához.

<TextBlock TextAlignment="Left">

Karakterszám

Az olvasás megkönnyítése érdekében tartsa meg az 50–60 betűt soronként.

Ne használjon 20 karakternél kevesebbet vagy 60 karakternél több karaktert sorbanként, mivel ez nehezen olvasható.

Kivágás és három pont

Ha a szöveg mennyisége túllépi a rendelkezésre álló területet, javasoljuk, hogy vágja ki a szöveget, és szúrjon be három pontot [...], amely a legtöbb UWP-szövegvezérlő alapértelmezett viselkedése.

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

Szöveg kivágása és körbefuttatása, ha több sor is engedélyezve van.

Ne használjon három pontot a vizuális zsúfoltság elkerülése érdekében.

Megjegyzés:

Ha a tárolók nincsenek jól definiálva (például nem különböztetik meg a háttérszínt), vagy ha több szöveg megjelenítésére mutató hivatkozás található, használjon három pontot.

Nyelvek

A Segoe UI Variable az angol, az európai, a görög és az orosz nyelv betűtípusa. Más nyelvek esetén tekintse meg az alábbi javaslatokat.

Betűtípusok globalizálása/honosítása

A LanguageFont betűleképezési API-kkal programozott módon hozzáférhet egy adott nyelvhez az ajánlott betűcsaládhoz, mérethez, súlyhoz és stílushoz. A LanguageFont objektum hozzáférést biztosít a megfelelő betűtípus-információkhoz a tartalom különböző kategóriáihoz, beleértve a felhasználói felület fejléceit, az értesítéseket, a törzsszöveget és a felhasználó által szerkeszthető dokumentumtörzs betűtípusait. További információ: Elrendezés és betűtípusok módosítása a globalizáció támogatásához.

Betűtípusok nem latin nyelvű nyelvekhez

Betűcsalád	Stílusok	Jegyzetek
Ebrima	Normál, félkövér	Afrikai szkriptek felhasználói felületi betűtípusa (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Normál, félkövér	Felhasználói felületi betűtípus észak-amerikai szkriptekhez (kanadai Syllabics, Cherokee, Osage).
Leelawadee felhasználói felület	Normál, Félvastag, Félkövér	A délkelet-ázsiai szkriptek felhasználói felületi betűtípusa (Buginese, Khmer, Lao, Thai).
Malgun gótikus	Rendszeres	A koreai felhasználói felület betűtípusa.
Microsoft JhengHei felhasználói felület	Normál, Félkövér, Könnyű	A hagyományos kínaiak felhasználói felületi betűtípusa.
Microsoft YaHei felhasználói felület	Normál, Félkövér, Könnyű	Egyszerűsített kínai felhasználói felület betűtípusa.
Mianmar-szöveg	Rendszeres	Tartalék betűtípus a mianmari szkripthez.
Nirmala felhasználói felület	Normál, Félvastag, Félkövér	Felhasználói felületi betűtípus dél-ázsiai szkriptekhez (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe felhasználói felület	Normál, Dőlt, Világos dőlt, Fekete dőlt, Félkövér, Félkövér dőlt, Világos, Félkövér, Félkövér, Fekete	Felhasználói felületi betűtípus arab, örmény, grúz és héber nyelven.
SimSun	Rendszeres	Régi kínai felhasználói felület betűtípusa.
Yu Gothic felhasználói felület	Light, Semilight, Normál, Félkövér, Kövér	Japán felhasználói felület betűtípusa.

Betűtípusok

Sans-serif betűtípusok

A Sans-serif betűtípusok remek választás címsorokhoz és felhasználói felületi elemekhez.

Betűcsalád	Stílusok	Jegyzetek
Arial	Normál, Dőlt, Félkövér, Félkövér dőlt, Fekete	Támogatja az európai és közel-keleti szkripteket (latin, görög, cirill, arab, örmény és héber). A fekete súly csak az európai szkripteket támogatja.
Calibri	Normál, Dőlt, Félkövér, Félkövér dőlt, Könnyű, Könnyű dőlt	Támogatja az európai és közel-keleti (latin, görög, cirill, arab és héber) szkripteket. Arab csak függőlegesen érhető el.
Consolas	Normál, Dőlt, Félkövér, Félkövér Dőlt	Rögzített szélességű betűtípus, amely támogatja az európai (latin, görög és cirill betűs) szkripteket.
Segoe felhasználói felület	Normál, Dőlt, Világos dőlt, Fekete dőlt, Félkövér, Félkövér dőlt, Világos, Félkövér, Félkövér, Fekete	Európai és közel-keleti (arab, örmény, cirill, grúz, görög, héber, latin) és Lisu-szkriptek felhasználói felületi betűtípusa.
Selawik	Normál, Félvilágos, Világos, Kövér, Félkövér	Nyílt forráskódú betűtípus, amely metrikakompatibilis a Segoe felhasználói felületével, olyan más platformokon futó alkalmazásokhoz készült, amelyek nem szeretnék a Segoe felhasználói felületét csomagolni. Selawik lekérése a GitHubon.

Serif betűtípusok

A serif betűtípusok jól alkalmasak nagy mennyiségű szöveg bemutatására.

Betűcsalád	Stílusok	Jegyzetek
Cambria	Rendszeres	Serif betűtípus, amely támogatja az európai szkripteket (latin, görög, cirill betű).
Futár Új	Normál, Dőlt, Félkövér, Félkövér Dőlt	Serif rögzített szélességű betűtípus, amely támogatja az európai és közel-keleti szkripteket (latin, görög, cirill, arab, örmény és héber).
Grúzia	Normál, Dőlt, Félkövér, Félkövér Dőlt	Támogatja az európai (latin, görög és cirill betűs) szkripteket.
Times New Roman	Normál, Dőlt, Félkövér, Félkövér Dőlt	Örökölt betűtípus, amely támogatja az európai szkripteket (latin, görög, cirill, arab, örmény, héber).

Változó betűtípusok

A változó betűtípusok alkalmasak a szöveg megjelenésének pontos szabályozására.

Betűcsalád	Tengelyek	Jegyzetek
Bahnschrift	Súly, szélesség	Latin, görög és cirill betűkészletet támogató változó betűtípus.
Segoe felhasználói felület változója	Súly, optikai méret	Latin, görög és cirill betűkészletet támogató változó betűtípus.

Szimbólumok és ikonok

Betűcsalád	Stílusok	Jegyzetek
Segoe MDL2-eszközök	Rendszeres	Az alkalmazásikonok felhasználói felületi betűtípusa. További információ: Segoe Fluent Icons betűtípus-cikk .
Segoe UI hangulatjel	Rendszeres	Az Emoji felhasználói felületi betűtípusa.
Segoe felhasználói felület szimbóluma	Rendszeres	Tartalék betűtípus szimbólumokhoz.

Kapcsolódó cikkek

• Szövegvezérlők
• XAML-témaerőforrások
• XAML-stílusok
• Microsoft Tipográfia
• Változó betűtípusok