Teckensnitt

Artikel
03/12/2025

Not

Den här designguiden skapades för Windows 7 och har inte uppdaterats för nyare versioner av Windows. Mycket av vägledningen gäller fortfarande i princip, men presentationen och exemplen återspeglar inte vår nuvarande designvägledning.

Användare interagerar med text mer än med något annat element i Microsoft Windows. Segoe UI (uttalas "SEE-go") är Windows-systemteckensnittet. Standardteckensnittsstorleken har ökats till 9 punkter.

bild av alfabetet i segoe ui-teckensnittet

Teckensnittet Segoe UI.

Segoe UI och Segoe är inte samma teckensnitt. Segoe UI är det Windows-teckensnitt som är avsett för användargränssnittets textsträngar. Segoe är ett varumärkesteckensnitt som används av Microsoft och partner för att producera material för tryck och reklam.

Segoe UI är ett användarvänligt, öppet och användarvänligt typsnitt och har därför bättre läsbarhet än Tahoma, Microsoft Sans Serif och Arial. Den har egenskaperna hos en humanistisk sans serif: de varierande bredderna i dess huvudstäder (smala E och S, till exempel jämfört med Helvetica, där bredderna är mer lika, ganska breda); stressen och bokstavsformerna i dess gemener. och dess sanna kursiv (snarare än en "sned" eller lutande romerska, som många industriella utseende sans serifs). Typsnittet är avsett att ge samma visuella effekt på skärmen och i utskrift. Det var utformat för att vara en humanistisk sans serif utan stark karaktär eller distraherande egenhet.

Segoe-användargränssnittet är optimerat för ClearType, som är aktiverat som standard i Windows. Med ClearType aktiverat är Segoe-användargränssnittet ett elegant, läsbart teckensnitt. Utan ClearType aktiverat är Segoe-användargränssnittet endast marginellt acceptabelt. Den här faktorn avgör när du ska använda Segoe-användargränssnittet.

Segoe UI innehåller latinska, grekiska, kyrilliska och arabiska tecken. Det finns nya teckensnitt, även optimerade för ClearType, som skapats för andra teckenuppsättningar och användningsområden. Dessa inkluderar Meiryo för japanska, Malgun Gothic för koreanska, Microsoft JhengHei för kinesiska (traditionell), Microsoft YaHei för kinesiska (förenklad), Gisha för hebreiska och Leelawadee för thailändska och ClearType Collection-teckensnitt som är utformade för dokumentanvändning.

Meiryo innehåller latinska tecken baserade på Verdana. Malgun Gothic, Microsoft JhengHei och Microsoft YaHei använder ett anpassat Segoe-användargränssnitt. Användning av kursiv version av dessa teckensnitt rekommenderas inte. Malgun Gothic, Microsoft JhengHei och Microsoft YaHei levereras endast i vanliga och fetstilar, vilket innebär att kursiva tecken syntetiseras genom att luta de upprättstående stilarna. Även om Meiryo innehåller sanna kursiv och fet kursiv stil, gäller dessa stilar endast för de latinska tecknen som de japanska tecknen förblir upprätt när kursiv stil tillämpas.

En variant av Meiryo, som kallas Meiryo-användargränssnitt, föredras i menyfliksområdet kommandoanvändargränssnittet.

För att stödja nationella inställningar med hjälp av dessa teckenuppsättningar ersätts Segoe-användargränssnittet med rätt teckensnitt beroende på varje språk under lokalisering processen.

Om du vill licensiera Segoe-användargränssnittet och andra Microsoft-teckensnitt för distribution med ett Windows-baserat program kontaktar du Monotype.

Obs! riktlinjer som rör stil och ton och användargränssnittstext visas i separata artiklar.

Designbegrepp

Teckensnitt, typsnitt, punktstorlekar och attribut

I traditionell typografi beskriver ett teckensnitt en kombination av ett typsnitt, en punktstorlek och attribut. Ett typsnitt är teckensnittets utseende. Segoe UI, Tahoma, Verdana och Arial är alla typsnitt. Punktstorlek refererar till storleken på teckensnittet, mätt från början av uppstigande till nederkanten av underordnade, minus det interna avståndet (kallas inledande). En punkt är ungefär 1/72 tum. Slutligen kan ett teckensnitt ha attribut med fet stil eller kursiv stil.

Informellt använder människor ofta teckensnitt i stället för typsnitt som det görs i den här artikeln, men tekniskt sett är Segoe-användargränssnittet ett typsnitt, inte ett teckensnitt. Varje kombination av attribut är ett unikt teckensnitt (till exempel 9 punkters Segoe UI regular, 10 point Segoe UI bold och så vidare).

Serif och sans serif

Typefaces är antingen serif eller sans serif. Serif refererar till små svängar som ofta avslutar teckenstrecken i ett teckensnitt. En sans serif typeface har inte serifs.

Läsare föredrar vanligtvis serif-teckensnitt som används som brödtext i ett dokument. Seriferna ger en känsla av formalitet och elegans till ett dokument. För användargränssnittstext gör behovet av ett rent utseende och den lägre upplösningen på datorskärmarna sans serif typefaces det bättre valet.

Kontrast

Det är enklast att läsa text när det finns en stor skillnad mellan textens luminans och bakgrunden. Svart text på en vit bakgrund ger den högsta kontrasten mörk text på en mycket ljus bakgrund kan också ge hög kontrast. Den här kombinationen passar bäst för primära gränssnittsytor.

Ljus text på en mörk bakgrund ger bra kontrast, men inte lika bra som mörk text på en ljus bakgrund. Den här kombinationen fungerar bra för sekundära gränssnittsytor, till exempel utforskarens åtgärdsfönster, som du vill framhäva i förhållande till de primära gränssnittsytorna.

Om du vill se till att användarna läser texten använder du mörk text i en ljus bakgrund.

Affordances

Text kan använda följande råd för att ange hur den används:

Pekare. Pekaren I-bar ("textmarkering") anger att texten kan väljas, medan vänsterpilen ("normal select") pekaren anger att texten inte är det.
Cirkumflex. När text har indatafokus är caret det blinkande lodräta fältet som anger insättnings-/markeringspunkten i valbar eller redigerbar text.
Låda. En ruta runt text som anger att den är redigerbar. Om du vill minska presentationens vikt kan rutan endast visas dynamiskt när den redigerbara texten har valts.
Förgrundsfärg. Ljusgrå anger att texten är inaktiverad. Icke-grå färger, särskilt blå och lila, anger att text är en länk.
Bakgrundsfärg. En ljusgrå bakgrund tyder svagt på att texten är skrivskyddad, men i praktiken kan skrivskyddad text ha valfri färgbakgrund.

Dessa råd kombineras för följande betydelser:

Redigerbara. Text som visas i en ruta, med en textmarkeringspekare, en caret (vid indatafokus) och vanligtvis på en vit bakgrund.
Skrivskyddad, valbar. Text med en markeringspekare och en caret (vid indatafokus).
Skrivskyddad, ej valbar. Text med en pilpekare.
Handikappad. Ljusgrå text med en pilpekare, ibland på en grå bakgrund.

Skrivskyddad text har traditionellt en grå bakgrund, men en grå bakgrund är inte nödvändig. I själva verket kan en grå bakgrund vara oönskad, särskilt för stora textblock, eftersom den antyder att texten är inaktiverad och avråder från att läsa.

Hjälpmedel och systemets teckensnitt, storlekar och färger

Riktlinjerna för att göra text tillgänglig för användare med funktionshinder eller funktionsnedsättningar kan kokas ned till en enkel regel: Respektera användarens inställningar genom att alltid använda systemets teckensnitt, storlekar och färger.

Om du bara gör en sak...

Respektera användarens inställningar genom att alltid använda systemets teckensnitt, storlekar och färger.

Utvecklare: Från kod kan du fastställa systemets teckensnittsegenskaper (inklusive dess storlek) med hjälp av funktionen GetThemeFont API. Du kan fastställa systemfärgerna med hjälp av funktionen GetThemeSysColor API.

Eftersom du inte kan göra några antaganden om användarnas inställningar för systemtema bör du:

Basera alltid teckensnittsfärger och bakgrunder på systemtemafärger. Skapa aldrig egna färger baserat på fasta RGB-värden (röd, grön, blå).
Matcha alltid systemets textfärger med motsvarande bakgrundsfärger. Om du till exempel väljer COLOR_STATICTEXT för textfärgen måste du också välja COLOR_STATIC för bakgrundsfärgen.
Skapa alltid nya teckensnitt baserat på proportionella varianter av systemteckensnittet. Med tanke på systemets teckensnittsmått kan du skapa fetstil, kursiv stil, större och mindre varianter.

Ett enkelt sätt att se till att programmet respekterar användarnas inställningar är att testa med en annan teckenstorlek och ett färgschema med hög kontrast. All text bör ändra storlek på och visas korrekt i det valda färgschemat.

Användningsmönster

Text har flera användningsmönster:

Användning	Beskrivning
text i namnlisten Text i namnlisten som identifierar fönstret.
Huvudinstruktioner Text som förklarar vad du ska göra på en sida, ett fönster eller en dialogruta.
Sekundära instruktioner Kompletterande text som förklarar vad du ska göra på en sida, ett fönster eller en dialogruta.
Normal text Vanlig (skrivskyddad) text som visas i ett användargränssnitt.
framhävd text Fet text används för att göra texten enklare att parsa och för att uppmärksamma textanvändare måste läsa. kursiv text används för att referera till text bokstavligen (i stället för citattecken) och för att betona specifika ord.
redigerbar text Text som användare kan redigera visas i en ruta. för att minska presentationens vikt kan rutan endast visas när den redigerbara texten har valts.
Inaktiverad text Text som inte gäller för den aktuella kontexten, till exempel etiketter för inaktiverade kontroller. inaktiverad text anger att användarna (normalt) inte ska bry sig om att läsa texten.
Länkar Text som används för att navigera till en annan sida, ett annat fönster eller hjälpavsnitt eller initiera ett kommando.
Grupprubrik Text som används för att gruppera objekt i en listvy.
Filnamn Filnamnstext (endast i innehållsvyn).
Dokumenttext Text som används i dokument (till skillnad från användargränssnittstext).
Dokumentrubriker Text som används som rubrik i ett dokument.

Riktlinjer

Teckensnitt och färger

Följande teckensnitt och färger är standard för Windows Vista och Windows 7.

Mönster	Temasymbol	Teckenfärg
	CaptionFont	9 pt. svart (#0000000) Segoe UI
	MainInstruction	12 pt. blå (#003399) Segoe UI
	Undervisning	9 pt. svart (#0000000) Segoe UI
	BodyText	9 pt. svart (#0000000) Segoe UI
	BodyText	9 pt. svart (#0000000) Segoe UI, fet eller kursiv
	BodyText	9 pt. svart (#0000000) Segoe UI, i en ruta
	Handikappad	9 pt. mörkgrå (#323232) Segoe UI
	HyperLinkText	9 pt. blå (#0066CC) Segoe UI
	Het	9 pt. ljusblå (#3399FF) Segoe UI
		11 pt. blå (#003399) Segoe UI
		11 pt. svart (#0000000) Segoe UI
	(ingen)	9 pt. svart (#0000000) Calibri
	(ingen)	17 pt. svart (#0000000) Calibri

Välj teckensnitt och optimera fönsterlayouter baserat på användargränssnittstekniken och målversionen av Windows:

UI-teknik	Windows-målversion	Teckensnitt som ska användas och optimeras för
Windows Presentation Foundation	Alla	Använd WPF-temadelar.
Win32 eller WinForms	Windows Vista eller senare	Använd lämpligt Segoe-gränssnittsteckensnitt.
	Utökningsbara komponenter eller pre-Windows Vista	Om du vill rikta in dig på Windows XP och Windows 2000 använder du pseudoteckensnittet MS Shell Dlg 2 med 8 punkter, som mappar till Tahoma. Om du vill använda tidigare versioner av Windows använder du pseudoteckensnittet MS Shell Dlg med 8 punkter, som mappar till Tahoma i Windows 2000 och Windows XP, och till MS Sans Serif på Windows 95, Windows 98, Windows Millennium Edition och Windows NT 4.0.

Utvecklare:
- För element som använder fast layout (till exempel Windows-dialogmallar och WinForms) hårdkodar du lämpligt teckensnitt från föregående tabell.
- För element som använder dynamisk layout (till exempel Windows Presentation Foundation) använder du temateckensnitten. Använd tema-API:er som DrawThemeText för att rita text baserat på temasymbolen. Se till att ha ett alternativ baserat på systemmått om tematjänsten inte körs.
För Segoe-användargränssnittet använder du en teckenstorlek på 9 punkter eller större. Segoe UI-teckensnittet är optimerat för dessa storlekar, så undvik att använda mindre storlekar.
Matcha alltid systemets textfärger med motsvarande bakgrundsfärger. Om du till exempel väljer COLOR_STATICTEXT för textfärgen måste du också välja COLOR_STATIC för bakgrundsfärgen.
Skapa alltid nya teckensnitt baserat på proportionella varianter av systemteckensnittet. Med tanke på systemets teckensnittsmått kan du skapa fetstil, kursiv stil, större och mindre varianter.
Visa stora block med skrivskyddad text (till exempel licensvillkor) mot en ljus bakgrund i stället för en grå bakgrund. Grå bakgrunder tyder på att texten är inaktiverad och avråder från att läsa.
Överväg en maximal radlängd på 65 tecken för att göra texten lätt att läsa. (Tecken inkluderar bokstäver, skiljetecken och blanksteg.)

Attribut

De flesta användargränssnittstexter ska vara oformaterade utan attribut. Attribut kan användas på följande sätt:
- Djärv. Använd i kontrolletiketter för att göra texten enklare att parsa. Använd sparsamt för att uppmärksamma textanvändare måste läsa. Om du använder för mycket fetstil minskar dess inverkan.
- Kursiv. Använd för att referera till text bokstavligen i stället för citattecken. Använd sparsamt för att framhäva specifika ord. Använd för -frågor i textrutor och redigerbara listrutor.
- Fet kursiv stil. Använd inte.
- Understryka. Använd inte förutom länkar. Använd kursiv stil i stället för betoning.
Alla teckensnitt stöder inte fetstil och kursiv stil, så de bör aldrig vara avgörande för att förstå texten.

Dela via