Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Als visuele weergave van taal is de belangrijkste taak van typografie om informatie te communiceren. Met het Windows-typesysteem kunt u structuur en hiërarchie in uw inhoud maken om de leesbaarheid en leesbaarheid in uw gebruikersinterface te maximaliseren.
Segoe UI Variable is het nieuwe systeemlettertype voor Windows. Het is een vernieuwde kijk op de klassieke Segoe en maakt gebruik van variabele lettertypetechnologie om dynamisch een geweldige leesbaarheid te bieden op zeer kleine grootten en verbeterde overzichten bij weergavegrootten.
Aanbeveling
In dit artikel wordt beschreven hoe de Fluent Design-taal wordt toegepast op Windows-apps. Zie Fluent Design - Typografie voor meer informatie.
Segoe Fluent Variable gebruiken
Segoe UI Variable ondersteunt twee assen voor een nauwkeurigere controle van tekst: gewicht en optische grootte.
- De gewichtsas (
wght) is oplopend met gewichten van Dun (100) tot Vet (700). - De optische grootteas (
opsz) is standaard automatisch en ingeschakeld. Hiermee bepaalt u de vorm en grootte van de tellers in het lettertype om de leesbaarheid van de kleine grootten en persoonlijkheid bij de grote maten te prioriteren (voor optische schaalaanpassing van 8pt tot 36pt).
Wanneer u XAML-standaardbesturingselementen gebruikt, wordt standaard het Segoe UI Variable-lettertype geselecteerd voor ondersteunde talen. Wanneer dit lettertype of een ander variabel lettertype met een optische as wordt gebruikt, komt de optische grootte automatisch overeen met de aangevraagde tekengrootte. Bij het gebruik van HTML is optische schaalaanpassing ook automatisch, maar u moet het lettertype Segoe UI Variable opgeven in CSS.
Gewichten
| Gewichtsnaam | Waarde van de gewichtsas | Visueel |
|---|---|---|
| Licht | 300 |
|
| Halflicht | 350 |
|
| Normaal | 400 |
|
| semibold | 600 |
|
| Vet | 700 |
|
Optische as
Best practices voor typografie in Windows 11
Windows 11 maakt gebruik van Segoe UI Variable met de volgende kenmerken op basis van de context waarin de tekst wordt weergegeven.
| Eigenschap | Waarde | Opmerkingen |
|---|---|---|
| Gewicht | Normaal, Semibold | Gebruik regelmatig gewicht voor de meeste tekst, gebruik Semibold voor titels |
| Uitlijning | Links, Midden | Standaard links uitlijnen, centreren alleen in zeldzame gevallen, zoals tekst onder pictogrammen |
| minimumwaarden | 14px Semibold, 12px Normaal | Tekst kleiner dan deze grootten en gewichten zijn in sommige talen onleesbaar |
| Behuizing | Zinsvoorbeeld | Hoofdlettergebruik toepassen voor alle gebruikersinterface-tekst, inclusief titels |
| Afkorting | Beletseltekens en knipsels | Gebruik in de meeste gevallen beletseltekens; knipsel wordt alleen gebruikt in zeldzame gevallen |
Voorbeelden
De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op
Typografie in Windows-apps
Als visuele weergave van taal is de belangrijkste taak van typografie om informatie te communiceren. De stijl mag nooit in de weg staan van dat doel. In dit artikel bespreken we hoe u typografie in uw Windows-app kunt toepassen om gebruikers te helpen eenvoudig en efficiënt inhoud te begrijpen.
Lettertype
U moet één lettertype gebruiken in de gebruikersinterface van uw app en we raden u aan het standaardlettertype voor Windows-apps, Segoe UI Variable, te gebruiken. Het is ontworpen om optimale leesbaarheid te behouden tussen grootten en pixeldichtheid en biedt een schone, lichte en open esthetische die de inhoud van het systeem aanvult.
Als u niet-Engelse talen wilt weergeven of een ander lettertype voor uw app wilt selecteren, raadpleegt u Talen en lettertypen voor onze aanbevolen lettertypen voor Windows-apps.
Grootte en schaal
Tekengrootten in XAML-apps worden automatisch geschaald op alle apparaten. Het schaalalgoritme zorgt ervoor dat een lettertype van 24 pixels op een groot scherm op 10 meter afstand net zo leesbaar is als een lettertype van 24 px op een klein scherm dat een paar centimeter verderop ligt.
Vanwege hoe het schaalsysteem werkt, ontwerpt u in effectieve pixels, niet de werkelijke fysieke pixels en hoeft u de tekengrootten niet te wijzigen voor verschillende schermen of resoluties.
Hiërarchie
Gebruikers vertrouwen op een visuele hiërarchie bij het scannen van een pagina: kopteksten samenvatten inhoud en hoofdtekst biedt meer details. Als u een duidelijke visuele hiërarchie in uw app wilt maken, volgt u de typografie-richtlijn van Windows.
Type schaal
De windows-type ramp brengt belangrijke relaties tot stand tussen de typestijlen op een pagina, zodat gebruikers inhoud gemakkelijk kunnen lezen. Alle grootten bevinden zich in effectieve pixels en zijn geoptimaliseerd voor Windows-apps die worden uitgevoerd op alle schermgrootten.
Windows 11 gebruikt de volgende waarden voor verschillende typen tekst in de gebruikersinterface.
| Voorbeeld | Gewicht | Grootte/lijnhoogte |
|---|---|---|
|
Klein | 12/16 epx |
|
Tekst | 14/20 epx |
|
Tekst semibold | 14/20 epx |
|
Tekst | 18/24 epx |
|
Semibold weergeven | 20/28 epx |
|
Semibold weergeven | 28/36 epx |
|
Semibold weergeven | 40/52 epx |
|
Semibold weergeven | 68/92 epx |
Bekijk de richtlijnen voor het gebruik van de XAML-type ramp voor meer informatie.
Uitlijning
De standaardinstelling TextAlignment is links, en in de meeste gevallen biedt uitgelijnd aan de linkerkant en ongelijke rechterkant consistente verankering van de inhoud en een uniforme lay-out. Zie Indeling en lettertypen aanpassen om globalisering te ondersteunen voor rtl-talen.
<TextBlock TextAlignment="Left">
Aantal tekens
Houd 50-60 letters per regel voor leesgemak.
Gebruik niet minder dan 20 tekens of meer dan 60 tekens per regel, omdat dit moeilijk te lezen is.
Knip- en weglatingstekens
Wanneer de hoeveelheid tekst buiten de beschikbare ruimte ligt, raden we u aan om de tekst af te knippen en weglatingstekens [...]in te voegen. Dit is het standaardgedrag van de meeste BESTURINGSelementen voor UWP-tekst.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Tekst knippen en teruglopen als meerdere regels zijn ingeschakeld.
Gebruik geen weglatingstekens om visuele rommel te vermijden.
Opmerking
Als containers niet goed zijn gedefinieerd (bijvoorbeeld geen verschillende achtergrondkleur), of als er een koppeling is om meer tekst weer te geven, gebruikt u beletseltekens.
Talen
Segoe UI Variable is ons lettertype voor Engels, Europese talen, Grieks en Russisch. Zie de volgende aanbevelingen voor andere talen.
Lettertypen globaliseren/lokaliseren
Gebruik de LanguageFont-api's voor lettertypetoewijzing voor programmatische toegang tot de aanbevolen lettertypefamilie, grootte, gewicht en stijl voor een bepaalde taal. Het LanguageFont-object biedt toegang tot de juiste lettertype-informatie voor verschillende inhoudscategorieën, waaronder UI-headers, meldingen, hoofdtekst en lettertypen voor de hoofdtekst van het document die door de gebruiker kunnen worden bewerkt. Zie Indeling en lettertypen aanpassen ter ondersteuning van globalisering voor meer informatie.
Lettertypen voor niet-Latijnse talen
| Lettertypefamilie | Stijlen | Opmerkingen |
|---|---|---|
| Ebrima | Normaal, vet | Lettertype van gebruikersinterface voor Afrikaanse scripts (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai). |
| Gadugi | Normaal, vet | Lettertype van de gebruikersinterface voor Noord-Amerikaanse scripts (Canadese Syllabics, Cherokee, Osage). |
| Leelawadee UI | Normaal, Halflicht, Vet | Lettertype van de gebruikersinterface voor Zuidoost-Aziatische scripts (Buginese, Khmer, Lao, Thai). |
| Malgun Gothic | Regelmatig | Lettertype van de gebruikersinterface voor Koreaans. |
| Microsoft JhengHei UI | Normaal, vet, licht | Lettertype van de gebruikersinterface voor traditioneel Chinees. |
| Microsoft YaHei-gebruikersinterface | Normaal, vet, licht | Lettertype van de gebruikersinterface voor vereenvoudigd Chinees. |
| Tekst over Myanmar | Regelmatig | Terugvallettertype voor Myanmar-schrift. |
| Nirmala UI | Normaal, Halflicht, Vet | Lettertype van de gebruikersinterface voor Zuid-Aziatische scripts (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Mclasslam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu). |
| Segoe UI | Regelmatig, Cursief, Licht cursief, Zwart Cursief, Vet, Vet Cursief, Licht, Semilight, Semibold, Zwart | Lettertype van de gebruikersinterface voor Arabisch, Armeens, Georgisch en Hebreeuws. |
| SimSun | Regelmatig | Een verouderd Chinees UI-lettertype. |
| Yu Gothic UI | Licht, Semi-licht, Normaal, Halfvet, Vet | Lettertype van de gebruikersinterface voor Japans. |
Lettertypen
Schreefloze lettertypen
Sans-serif-lettertypen zijn een uitstekende keuze voor koppen en UI-elementen.
| Lettertypefamilie | Stijlen | Opmerkingen |
|---|---|---|
| Arial | Normaal, cursief, vet, vet cursief, zwart | Ondersteunt Europese en Midden-Oostenscripts (Latijns, Grieks, Cyrillisch, Arabisch, Armeens en Hebreeuws). Zwart gewicht ondersteunt alleen Europese scripts. |
| Calibri | Regelmatig, cursief, vet, vet cursief, licht, licht cursief | Ondersteunt Europese en Midden-Oostenscripts (Latijns, Grieks, Cyrillisch, Arabisch en Hebreeuws). Arabisch alleen beschikbaar in de staande modellen. |
| Consolas | Normaal, cursief, vet, vet cursief | Lettertype met vaste breedte dat Ondersteuning biedt voor Europese scripts (Latijns, Grieks en Cyrillisch). |
| Segoe UI | Regelmatig, Cursief, Licht cursief, Zwart Cursief, Vet, Vet Cursief, Licht, Semilight, Semibold, Zwart | Lettertype van de gebruikersinterface voor Europese en Midden-Oosten scripts (Arabisch, Armeens, Cyrillisch, Georgisch, Grieks, Hebreeuws, Latijns) en ook Lisu script. |
| Selawik | Normaal, Semilight, Licht, Vet, Semibold | Een open-source-lettertype dat metrisch compatibel is met Segoe UI, bedoeld voor apps op andere platforms die Segoe UI niet willen bundelen. Haal Selawik op GitHub. |
Serif-lettertypen
Serif-lettertypen zijn geschikt voor het presenteren van grote hoeveelheden tekst.
| Lettertypefamilie | Stijlen | Opmerkingen |
|---|---|---|
| Cambria | Regelmatig | Serif-lettertype dat Europese scripts ondersteunt (Latijns, Grieks, Cyrillisch). |
| Courier New | Normaal, cursief, vet, vet cursief | Schreef lettertype met vaste breedte dat ondersteuning biedt voor Europese en Midden-Oosten-scripts (Latijns, Grieks, Cyrillisch, Arabisch, Armeens en Hebreeuws). |
| Georgië | Normaal, cursief, vet, vet cursief | Ondersteunt Europese scripts (Latijns, Grieks en Cyrillisch). |
| Times New Roman | Normaal, cursief, vet, vet cursief | Verouderd lettertype dat Europese scripts ondersteunt (Latijns, Grieks, Cyrillisch, Arabisch, Armeens, Hebreeuws). |
Variabele lettertypen
Variabele lettertypen zijn geschikt voor het nauwkeurig beheren van het uiterlijk van tekst.
| Lettertypefamilie | Assen | Opmerkingen |
|---|---|---|
| Bahnschrift | Gewicht, Breedte | Variabel lettertype dat Ondersteuning biedt voor Latijns, Grieks en Cyrillisch. |
| Segoe UI-variabele | Gewicht, optische grootte | Variabel lettertype dat Ondersteuning biedt voor Latijns, Grieks en Cyrillisch. |
Symbolen en pictogrammen
| Lettertypefamilie | Stijlen | Opmerkingen |
|---|---|---|
| Segoe MDL2-assets | Regelmatig | Lettertype van de gebruikersinterface voor app-pictogrammen. Zie het lettertypeartikel Segoe Fluent Icons voor meer informatie. |
| Segoe UI Emoji | Regelmatig | Lettertype van de gebruikersinterface voor Emoji. |
| Segoe UI Symbool | Regelmatig | Terugvallettertype voor symbolen. |
Verwante artikelen
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer