Delen via


Lettertypen

Notitie

Deze ontwerphandleiding is gemaakt voor Windows 7 en is niet bijgewerkt voor nieuwere versies van Windows. Veel van de richtlijnen zijn in principe nog steeds van toepassing, maar de presentatie en voorbeelden weerspiegelen niet onze huidige ontwerprichtlijnen.

Gebruikers communiceren meer met tekst dan met een ander element in Microsoft Windows. Segoe UI (uitgesproken als 'SEE-go') is het lettertype van het Windows-systeem. De standaardtekengrootte is verhoogd tot 9 punten.

illustratie van alfabet in lettertype segoe ui

Het lettertype Segoe UI.

Segoe UI en Segoe zijn niet hetzelfde lettertype. Segoe UI is het Windows-lettertype dat is bedoeld voor tekenreeksen van de gebruikersinterface. Segoe is een huisstijllettertype dat door Microsoft en partners wordt gebruikt om materiaal te produceren voor afdrukken en adverteren.

Segoe UI is een toegankelijk, open en vriendelijk lettertype en heeft als gevolg hiervan een betere leesbaarheid dan Tahoma, Microsoft Sans Serif en Arial. Het heeft de kenmerken van een humanistische sans serif: de verschillende breedten van zijn hoofdletters (smalle E en S, bijvoorbeeld vergeleken met Helvetica, waar de breedten gelijker zijn, redelijk breed); de stress en lettervormen van de kleine letters; en zijn ware cursief (in plaats van een "schuin" of schuin romeins, zoals veel industriële ogende sans serifs). Het lettertype is bedoeld om hetzelfde visuele effect op het scherm en in de afdruk te geven. Het was ontworpen om een humanistische sans serif te zijn zonder sterk karakter of afleidende quirkiteit.

Segoe UI is geoptimaliseerd voor ClearType, dat standaard is ingeschakeld in Windows. Als ClearType is ingeschakeld, is Segoe UI een elegant, leesbaar lettertype. Zonder ClearType ingeschakeld, is de Segoe-gebruikersinterface slechts marginaal acceptabel. Deze factor bepaalt wanneer u Segoe UI moet gebruiken.

Segoe UI bevat Latijnse, Griekse, Cyrillische en Arabische tekens. Er zijn nieuwe lettertypen, ook geoptimaliseerd voor ClearType, gemaakt voor andere tekensets en toepassingen. Deze omvatten Meiryo voor Japans, Malgun Gothic voor Koreaans, Microsoft JhengHei voor Chinees (traditioneel), Microsoft YaHei voor Chinees (vereenvoudigd), Gisha voor Hebreeuws en Leelawadee voor Thai en de ClearType Collection-lettertypen die zijn ontworpen voor documentgebruik.

Meiryo bevat Latijnse tekens op basis van Verdana. Malgun Gothic, Microsoft JhengHei en Microsoft YaHei gebruiken een aangepaste Segoe-gebruikersinterface. Het gebruik van cursieve versies van deze lettertypen wordt niet aanbevolen. Malgun Gothic, Microsoft JhengHei en Microsoft YaHei worden alleen geleverd in reguliere en vetgedrukte stijlen, wat betekent dat cursieve tekens worden gesynthetiseerd door de rechtop staande stijlen te laten staan. Hoewel Meiryo echte cursief en vetgedrukte cursief bevat, zijn deze stijlen alleen van toepassing op de Latijnse tekens, blijven de Japanse tekens rechtop wanneer cursief stijl wordt toegepast.

Een variatie van Meiryo, meiryo-gebruikersinterface genoemd, heeft de voorkeur in de linten opdrachtgebruikersinterface.

Ter ondersteuning van landinstellingen die deze tekensets gebruiken, wordt Segoe UI vervangen door de juiste lettertypen, afhankelijk van elke landinstelling tijdens de lokalisatie proces.

Als u Segoe UI en andere Microsoft-lettertypen wilt licentie geven voor distributie met een Windows-programma, neemt u contact op met Monotype-.

Opmerking: richtlijnen met betrekking tot stijl en toon en tekst van de gebruikersinterface worden in afzonderlijke artikelen gepresenteerd.

Ontwerpconcepten

Lettertypen, lettertypen, puntgrootten en kenmerken

In traditionele typografie beschrijft een lettertype een combinatie van een lettertype, een puntgrootte en kenmerken. Een lettertype is het uiterlijk van het lettertype. Segoe UI, Tahoma, Verdana en Arial zijn allemaal lettertypen. Puntgrootte verwijst naar de grootte van het lettertype, gemeten vanaf de bovenkant van de opklimmers tot de onderkant van de afdaalders, minus de interne afstand (de zogenaamde voorloop). Een punt is ongeveer 1/72 inch. Ten slotte kan een lettertype kenmerken van vet of cursief bevatten.

Informeel gebruiken mensen vaak lettertype in plaats van lettertype zoals gedaan in dit artikel, maar technisch gezien is Segoe UI een lettertype, niet een lettertype. Elke combinatie van kenmerken is een uniek lettertype (bijvoorbeeld 9 punten Segoe UI normaal, 10 punten Segoe UI vet, enzovoort).

Serif en sans serif

Lettertypen zijn schreefloos of sans serif. Serif verwijst naar kleine bochten die vaak de pennenstreken van letters in een lettertype voltooien. Een schreefloos lettertype heeft geen serifs.

Lezers geven over het algemeen de voorkeur aan schreefloze lettertypen die worden gebruikt als hoofdtekst in een document. De serifs bieden een gevoel van formaliteit en elegantie aan een document. Voor UI-tekst is de behoefte aan een schoon uiterlijk en de lagere resolutie van computermonitoren maakt sans serif-lettertypen de betere keuze.

Tegenstelling

Tekst is het eenvoudigst te lezen wanneer er een groot verschil is tussen de helderheid van de tekst en de achtergrond. Zwarte tekst op een witte achtergrond geeft het hoogste contrast donkere tekst op een zeer lichte achtergrond ook een hoog contrast. Deze combinatie is het beste voor primaire UI-oppervlakken.

Lichte tekst op een donkere achtergrond biedt een goed contrast, maar niet zo goed als donkere tekst op een lichte achtergrond. Deze combinatie werkt goed voor secundaire UI-oppervlakken, zoals verkenner-taakvensters, die u wilt de nadruk leggen ten opzichte van de primaire UI-oppervlakken.

Als u ervoor wilt zorgen dat gebruikers uw tekst lezen, gebruikt u donkere tekst op een lichte achtergrond.

Betaalbaarheid

Tekst kan de volgende betaalbaarheid gebruiken om aan te geven hoe deze wordt gebruikt:

  • Aanwijzer. De aanwijzer op de I-balk ('tekstselectie') geeft aan dat de tekst kan worden geselecteerd, terwijl de pijl naar links ('normale selectie') aanwijst dat tekst niet is.
  • Caret. Wanneer tekst de focus op invoer heeft, is de caret de knipperende verticale balk die het invoeg-/selectiepunt in selecteerbare of bewerkbare tekst aangeeft.
  • Doos. Een vak rond tekst dat aangeeft dat het bewerkbaar is. Als u het gewicht van de presentatie wilt verkleinen, wordt het vak mogelijk alleen dynamisch weergegeven wanneer de bewerkbare tekst is geselecteerd.
  • Voorgrondkleur. Lichtgrijs geeft aan dat tekst is uitgeschakeld. Niet-grijze kleuren, met name blauw en paars, geven aan dat tekst een koppeling is.
  • Achtergrondkleur. Een lichtgrijze achtergrond suggereert zwak dat tekst alleen-lezen is, maar in de praktijk kan alleen-lezen tekst elke kleurachtergrond hebben.

Deze betaalbaarheden worden gecombineerd voor de volgende betekenissen:

  • Bewerkbaar. Tekst die wordt weergegeven in een vak, met een aanwijzer voor tekstselectie, een caret (op invoerfocus) en meestal op een witte achtergrond.
  • Alleen-lezen, selecteerbaar. Tekst met een aanwijzer en een caret (op invoerfocus).
  • Alleen-lezen, niet-selecteerbaar. Tekst met een pijlaanwijzer.
  • Invalide. Lichtgrijze tekst met een pijlaanwijzer, soms op een grijze achtergrond.

Alleen-lezen tekst heeft traditioneel een grijze achtergrond, maar een grijze achtergrond is niet nodig. In feite kan een grijze achtergrond ongewenst zijn, met name voor grote blokken tekst, omdat deze aangeeft dat de tekst is uitgeschakeld en het lezen wordt afgeraden.

Toegankelijkheid en het systeemlettertype, de grootte en de kleuren

De richtlijnen voor het toegankelijk maken van tekst voor gebruikers met een handicap of beperkingen kunnen worden aangepast aan één eenvoudige regel: Respecteer de instellingen van de gebruiker door altijd het systeemlettertype, de grootten en kleuren te gebruiken.

Als u maar één ding doet...

Respecteer de instellingen van de gebruiker door altijd het systeemlettertype, de tekengrootten en de kleuren te gebruiken.

ontwikkelaars: Van code kunt u de eigenschappen van het systeemlettertype (inclusief de grootte) bepalen met behulp van de functie GetThemeFont-API. U kunt de systeemkleuren bepalen met behulp van de functie GetThemeSysColor API.

Omdat u geen aannames kunt doen over de systeemthema-instellingen van gebruikers, moet u het volgende doen:

  • U kunt uw lettertypekleuren en achtergronden altijd baseren op systeemthemakleuren. Maak nooit uw eigen kleuren op basis van vaste RGB-waarden (rood, groen, blauw).
  • Laat systeemtekstkleuren altijd overeenkomen met de bijbehorende achtergrondkleuren. Als u bijvoorbeeld COLOR_STATICTEXT kiest voor de tekstkleur, moet u ook COLOR_STATIC voor de achtergrondkleur kiezen.
  • Maak altijd nieuwe lettertypen op basis van proportionele variaties van het systeemlettertype. Op basis van de metrische gegevens voor het systeemlettertype kunt u vetgedrukte, cursieve, grotere en kleinere variaties maken.

Een eenvoudige manier om ervoor te zorgen dat uw programma de instellingen van gebruikers respecteert, is door te testen met behulp van een andere tekengrootte en een kleurenschema met hoog contrast. Alle tekst moet het formaat wijzigen en correct weergeven in het gekozen kleurenschema.

Gebruikspatronen

Tekst heeft verschillende gebruikspatronen:

Gebruik Beschrijving
tekst titelbalk
Tekst op de titelbalk die het venster identificeert.
voorbeeld van lettertype voor titelbalktekst
hoofdinstructies
Tekst waarin wordt uitgelegd wat u moet doen op een pagina, venster of dialoogvenster.
voorbeeld van het lettertype voor hoofdinstructies
secundaire instructies
Aanvullende tekst waarin wordt uitgelegd wat u moet doen op een pagina, venster of dialoogvenster.
voorbeeld van tekstlettertype met secundaire instructies
normale tekst
Gewone tekst (alleen-lezen) die wordt weergegeven in een gebruikersinterface.
voorbeeld van een normaal lettertype
onderstreepte tekst
Vetgedrukte tekst wordt gebruikt om de tekst gemakkelijker te parseren en om de aandacht te vestigen op tekst die gebruikers moeten lezen. Cursieve tekst wordt gebruikt om letterlijk naar tekst te verwijzen (in plaats van aanhalingstekens) en om specifieke woorden te benadrukken.
voorbeeld van tekstlettertype met nadruk
bewerkbare tekst
Tekst die gebruikers kunnen bewerken, wordt weergegeven in een vak. om het gewicht van de presentatie te verminderen, kan het vak alleen worden weergegeven wanneer de bewerkbare tekst is geselecteerd.
voorbeeld van bewerkbare tekstlettertype
Uitgeschakelde tekst
Tekst die niet van toepassing is op de huidige context, zoals labels voor uitgeschakelde besturingselementen. uitgeschakelde tekst geeft aan dat gebruikers (normaal) de tekst niet mogen lezen.
voorbeeld van uitgeschakeld lettertype
Koppelingen
Tekst die wordt gebruikt om naar een andere pagina, venster of Help-onderwerp te navigeren of een opdracht te starten.
voorbeeld van lettertype voor koppelingstekst
voorbeeld van tekstlettertype voor koppelingen (aanwijzen)
groepskoptekst
Tekst die wordt gebruikt om items in een lijstweergave te groeperen.
voorbeeld van lettertype voor groepskoptekst
bestandsnaam
Bestandsnaamtekst (alleen in de inhoudsweergave).
voorbeeld van het lettertype voor de bestandsnaam (in de inhoudsweergave)
documenttekst
Tekst die wordt gebruikt in documenten (in tegenstelling tot ui-tekst).
voorbeeld van lettertype voor documenttekst
documentkoppen
Tekst die wordt gebruikt als kop in een document.
voorbeeld van tekstlettertype voor documentkoppen

Richtsnoeren

Lettertypen en kleuren

  • De volgende lettertypen en kleuren zijn standaardinstellingen voor Windows Vista en Windows 7.
Patroon Themasymbool Tekstkleur
voorbeeld van lettertype voor titelbalktekst
CaptionFont
9 pt. zwart (#000000) Segoe UI
voorbeeld van het lettertype voor hoofdinstructies
MainInstruction
12 pt. blauw (#003399) Segoe UI
voorbeeld van tekstlettertype met secundaire instructies
Instructie
9 pt. zwart (#000000) Segoe UI
voorbeeld van een normaal lettertype
BodyText
9 pt. zwart (#000000) Segoe UI
voorbeeld van tekstlettertype met nadruk
BodyText
9 pt. zwart (#000000) Segoe UI, vet of cursief
voorbeeld van bewerkbare tekstlettertype
BodyText
9 pt. zwart (#000000) Segoe UI, in een vak
voorbeeld van uitgeschakeld lettertype
Invalide
9 pt donkergrijs (#323232) Segoe UI
voorbeeld van lettertype voor koppelingstekst
HyperLinkText
9 pt. blue (#0066CC) Segoe UI
voorbeeld van tekstlettertype voor koppelingen (aanwijzen)
Heet
9 pt lichtblauw (#3399FF) Segoe UI
voorbeeld van lettertype voor groepskoptekst
11 pt. blauw (#003399) Segoe UI
voorbeeld van het lettertype voor de bestandsnaam (in de inhoudsweergave)
11 pt. zwart (#000000) Segoe UI
voorbeeld van lettertype voor documenttekst
(geen)
9 pt. zwart (#000000) Calibri
voorbeeld van tekstlettertype voor documentkoppen
(geen)
17 pt. zwart (#000000) Calibri
  • Lettertypen kiezen en vensterindelingen optimaliseren op basis van de ui-technologie en de doelversie van Windows:
UI-technologie Doelversie van Windows Lettertypen die moeten worden gebruikt en geoptimaliseerd voor
Windows Presentation Foundation
Alle
Gebruik WPF-themaonderdelen.
Win32 of WinForms
Windows Vista of hoger
Gebruik het juiste lettertype voor de Segoe UI.
Uitbreidbare onderdelen of pre-Windows Vista
Als u windows XP en Windows 2000 wilt targeten, gebruikt u het pseudolettertype MS Shell Dlg 2 van 8 punten, dat is toegewezen aan Tahoma.
Als u eerdere versies van Windows wilt gebruiken, gebruikt u 8 punt MS Shell Dlg pseudolettertype, dat is toegewezen aan Tahoma in Windows 2000 en Windows XP, en ms Sans Serif op Windows 95, Windows 98, Windows Millennium Edition en Windows NT 4.0.
  • ontwikkelaars:
    • Voor elementen die gebruikmaken van een vaste indeling (zoals Windows-dialoogvenstersjablonen en WinForms), codet u het juiste lettertype uit de voorgaande tabel.
    • Gebruik de themalettertypen voor elementen die gebruikmaken van dynamische indeling (zoals Windows Presentation Foundation). Gebruik thema-API's zoals DrawThemeText om tekst te tekenen op basis van het themasymbool. Zorg ervoor dat u een alternatief hebt op basis van metrische systeemgegevens voor het geval de themaservice niet wordt uitgevoerd.
  • Gebruik voor de Segoe-gebruikersinterface een tekengrootte van 9 punten of groter. Het lettertype Segoe UI is geoptimaliseerd voor deze grootten, dus vermijd kleinere grootten.
  • Laat systeemtekstkleuren altijd overeenkomen met de bijbehorende achtergrondkleuren. Als u bijvoorbeeld COLOR_STATICTEXT kiest voor de tekstkleur, moet u ook COLOR_STATIC voor de achtergrondkleur kiezen.
  • Maak altijd nieuwe lettertypen op basis van proportionele variaties van het systeemlettertype. Op basis van de metrische gegevens voor het systeemlettertype kunt u vetgedrukte, cursieve, grotere en kleinere variaties maken.
  • Grote blokken alleen-lezen tekst (zoals licentievoorwaarden) weergeven tegen een lichte achtergrond in plaats van een grijze achtergrond. Grijze achtergronden stellen voor dat de tekst is uitgeschakeld en het lezen wordt afgeraden.
  • Overweeg een maximale regellengte van 65 tekens om de tekst gemakkelijk leesbaar te maken. (Tekens zijn letters, leestekens en spaties.)

Kenmerken

  • De meeste ui-tekst moet zonder kenmerken zonder opmaak zijn. Kenmerken kunnen als volgt worden gebruikt:
    • Brutaal. Gebruik in besturingslabels om de tekst gemakkelijker te parseren. Gebruik spaarzaam om de aandacht te vestigen op tekst die gebruikers moeten lezen. Het gebruik van te veel vet vermindert de impact ervan.
    • Cursief. Gebruik dit om letterlijk te verwijzen naar tekst in plaats van aanhalingstekens. Gebruik spaarzaam om specifieke woorden te benadrukken. Gebruiken voor prompts in tekstvakken en bewerkbare vervolgkeuzelijsten.
    • Vet cursief. Niet gebruiken.
    • Onderstrepen. Gebruik niet, behalve voor koppelingen. Gebruik cursief in plaats daarvan voor nadruk.
  • Niet alle lettertypen ondersteunen vet en cursief, dus ze moeten nooit cruciaal zijn om de tekst te begrijpen.