De bästa standardteckensnitten. Systemteckensnitt, anslutning

En av huvuduppgifterna för webbdesign är att välja rätt standardtypsnitt. Typsnittsinbäddningstjänster som Google Web Fonts eller Typekit skapades som ett alternativ med målet att ge något nytt.

De är väldigt lätta att använda. Låt oss ta Google Web Fonts som ett exempel.

Välj typsnittet Open Sans, Droid Serif eller Lato. Skriv koden och klistra in den i elementet HTML-dokument. Du är redo att referera till det i CSS! Hela processen tog inte mer än 60 sekunder. Och allt är helt gratis.

Vad kan vara fel?

Vissa teckensnitt kanske inte är tillgängliga för alla. Och det betyder att det kan finnas problem. Du är glad att du valt ett vackert typsnitt för sajten, men besökaren på webbsidan ser istället ful skrift.

Detta kommer inte att hända om du implementerar ett backupalternativ.

Hur viktigt är det att använda säkra webbteckensnitt?

Varje enhet har sin egen uppsättning förinstallerade teckensnitt. Vilken beror på operativsystemet. Problemet är att det finns små skillnader mellan dem.

Hur är det med webbplatser? Som den här? Teckensnittet du ser kanske inte är det som ursprungligen angavs för webbplatsen.

Vad betyder det? Låt oss säga att designern har valt en familj av betalda typsnitt för webbplatsen. Om du inte har dem installerade och inte tillhandahålls av en speciell webbtjänst, är typsnittet du ser ett av standardalternativen. Till exempel Times New Roman.

Därför kan texten på din skärm helt enkelt se hemsk ut.

Och här standardteckensnitt för webbplatsen tillgänglig på alla operativsystem. Detta är en liten samling tillgänglig på Windows, Mac, Google samt Unix och Linux.

Med hjälp av detta urval kan designers, såväl som webbplatsägare, specificera vilket typsnitt som ska användas som backup-font. Detta ger dig möjlighet att styra hur sidan kommer att se ut på olika enheter.

Som ett reservalternativ väljer utvecklaren ett teckensnitt som är mycket likt det ursprungliga, och det är detta som kommer att visas för användaren.

Låt oss ta en titt på ett urval av de mest populära standardtypsnitt HTML.

15 bästa webbsäkra teckensnitt

  1. Arial

Anses som standard i de flesta fall. Det vanligaste typsnittet " sans serif"eller sans serif-teckensnitt ( som inte har seriffer i ändarna av bokstäverna). Det används ofta i Windows för att ersätta andra tecken.

  1. Helvetica

Helvetica är en livräddare för designers. Detta standard webbtypsnitt fungerar nästan alltid ( åtminstone som ett skyddsnät för andra typsnitt).

  1. Times New Roman

Har samma roll för serif-teckensnitt som Arial gör för sans serif-typsnitt. Det är en av de mest populära på Windows-enheter. Detta är en uppdaterad version av det gamla Times-fonten.

  1. Tider

CSS standardtypsnitt The Times är bekant för de flesta. Många minns honom med små bokstäver i smala spalter i gamla tidningar. Den vanligaste typen av tryck som har blivit en tradition.

  1. Courier Ny

Liknar Times New Roman och används som en variant av de gamla klassikerna. Det anses också vara ett teckensnitt med monospace. Till skillnad från teckensnitten serif och sans serif har alla dess tecken samma bredd.

  1. Kurir

Ett gammalt typsnitt med fast bredd som används som reserv på nästan alla enheter och operativsystem.

  1. Verdana

Verdana kan med rätta anses vara ett riktigt webbteckensnitt ( sant webbteckensnitt) tack vare enkla linjer som fungerar som seriffer, samt en stor storlek. Bokstäverna är något långsträckta, så de är lätta att läsa på skärmen.

  1. Georgien

Det vanliga webbteckensnittet Georgia liknar Verdana-teckensnittet till form och storlek. Dess tecken är större än andra teckensnitt av samma storlek. Men det är bättre att inte använda det i kombination med andra. Samma Times New Roman ser ut som en dvärg i jämförelse.

  1. Palatino

Palatino går tillbaka till renässansen. Inga skämt. Detta är ett annat stort typsnitt som är perfekt för webben. Det används ofta i rubriker och annonser.

  1. Garamond

En annan gammal typsnitt som dök upp på 1500-talet i Paris. Dess nya och förbättrade version kommer som standard på de flesta Windows-enheter. Senare antogs detta typsnitt av andra operativsystem.

  1. Bokman

Bookman ( eller Bookman Old Style) - en av bästa standardteckensnitt för rubriker. Dess karakteristiska egenskap är läsbarhet även när du använder en liten storlek.

  1. Comic Sans MS

Comic Sans MS är ett roligt alternativ för serif-teckensnitt.

  1. Trebuchet MS

Detta är ett typsnitt med medeltida tema som ursprungligen utvecklades av Microsoft i mitten av nittiotalet. Det användes i Windows XP. Idag används den för att komponera huvudtexten.

En specifik egenskap hos RuNet är problemet med sidkodningar och stöd för kyrilliska teckensnitt. För att undvika problem med olika teckenkodningar kom smarta människor på ett teckensnitt som låter dig kombinera tecken från flera språk i ett teckensnitt. För ryskspråkiga sidor behöver du alltså endast använda Unicode-teckensnitt som stöder kyrilliska.

Nedan finns en tabell över teckensnittsöverensstämmelse.

Windows Mac OS Unix/Linux förfäders familj
Arial Black Helvetica C.Y. Nimbus Sans L Sans serif
Arial Helvetica C.Y. Nimbus Sans L Sans serif
Comic Sans MS Monaco CY * (se nedan) kursiv
Courier Ny * (se nedan) Nimbus Mono L Monospace
Georgien * (se nedan) Century Schoolbook L Serif
Påverkan Charcoal C.Y. * (se nedan) Sans serif
Times New Roman Times C.Y. Nimbus Roman No9 L Serif
Trebuchet MS Helvetica C.Y. * (se nedan) Sans serif
Verdana Genève C.Y. DejaVu Sans Sans serif

* i kolumnen mittemot teckensnittet betyder att operativsystemet inte har inbyggda kyrilliska motsvarigheter till Windows-teckensnittet. Men samtidigt är det stor sannolikhet att det här typsnittet i sig installeras direkt i operativsystemet.

Till exempel, om huvudtexten i layouten är Arial, hittar vi detta teckensnitt i tabellen och skriver motsvarande rad i CSS:

Kropp (typsnittsfamilj: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

Den här posten betyder att om användaren har Arial-teckensnittet (och alla Windows-användare och alla Mac OS X-användare har det), så kommer sidan att visas i detta teckensnitt. Om användaren inte har det här teckensnittet, kommer sidan för en rysktalande Mac OS 9-användare att visas korrekt i standardsystemteckensnittet Helvetica CY, och för en Unix/Linux-användare kommer det att visas i teckensnittet Nimbus Sans L , som är installerat på 90 % av Unix/Linux-användarna. Om Unix/Linux-användaren är i de 10 % som inte har detta teckensnitt, kommer sidan att visas i serif-teckensnittet som är inställt som standard för visning av webbsidor.

Exempel på sådana linjaler kan ses till exempel i Dreamweaver.

Nybörjarlayoutdesigners väljer en linjal baserat på det första teckensnittet utan att tänka på vad denna långa rad betyder. Vissa raderar till och med allt utom det första teckensnittet, vilket berövar alla användare som av någon anledning inte har detta teckensnitt installerat från att se designerns avsikt.

Men nu vet vi vad den här raden betyder, eller hur? Och vi kan redan använda det korrekt.

Men varför är linjen vi byggde så annorlunda än den vanliga i Dreamweaver:

Kropp (typsnittsfamilj: Arial, Helvetica, sans-serif; )

Förutom att tabellen tar hänsyn till Unix/Linux-fonter så finns det även någon konstig CY-ikon efter den vanliga Helvetica. Låt oss ta reda på vad det är!

Före lanseringen av Mac OS X hade den här raden följande betydelse: för Windows-användare visar vi sidan i Arial, för Mac OS 9-användare, i standardtypsnittet Helvetica, och för resten ser vi sidan i systemet sans-serif teckensnitt, som är konfigurerat som standard i webbläsaren. Men återigen, en viktig nyans! Standardtypsnittet Mac OS 9 Helvetica har inte kyrilliskt! För den ryskspråkiga sidan betydde detta följande: för Windows-användare visar vi Arial-sidan, för Mac OS 9-användare - i standardtypsnittet Helvetica, som visar oläsbar information, och resten ser sidan med systemet sans-serif teckensnitt konfigurerat som standard i webbläsaren.

För att korrekt visa denna uppsättning för Mac OS 9-användare, istället för icke-cyrilliserad Helvetica, är det vettigt att ange samma standardtypsnitt för Mac OS 9 Helvetica CY, som innehåller kyrilliska.

Läsningen av linjaler har förändrats sedan lanseringen av Mac OS X. Det finns nu ett vanligt standardteckensnitt specificerat för Windows/Mac OS X. Och om vi vill att Mac OS 9-användare ska kunna se designerns avsikt måste vi inkludera ett teckensnitt som innehåller kyrilliska i teckensnittsraden.

Så även om det inte finns några säkra typsnitt, finns det säkra typsnittsfamiljer. De kallas också teckensnitt CSS-staplar. Förutom vanliga Windows/Mac OS X-teckensnitt kan dessa rader även innehålla motsvarande typsnitt från standarduppsättningen Mac OS 9 (som inte innehåller "säkra" typsnitt som standard) och vanliga Unix/Linux-teckensnitt.

Varje layoutdesigner stöter förr eller senare på ett ögonblick när en designer använder ett teckensnitt i en layout som inte ingår i listan över "säkra" teckensnitt; Men detta är ännu ingen anledning att slå larm! Till exempel använder designers väldigt ofta typsnittet Tahoma på layouter, som inte ingår i den här listan. En korrekt konstruerad linje med teckensnitt öppnar för möjligheten att använda inte bara Tahoma, utan även andra typsnitt. Ett ökande antal designers utnyttjar denna möjlighet, och en kompetent layoutdesigner bör känna till detta.

Nedan finns en ytterligare tabell över teckensnitt som inte ingår i listan över "säkra" teckensnitt, men som kan användas i layouter.

Windows Mac OS förfäders familj
Lucida konsol Monaco Monospace
Lucida Sans Unicode Lucida Grande Sans serif
Tahoma Genève C.Y. Sans serif

Vad händer om det inte finns något kyrilliskt alfabet?

För engelskspråkiga texter har ovanstående tabeller ett lite annorlunda utseende.

Windows Mac OS Unix/Linux förfäders familj
Arial Black Grej Nimbus Sans L Sans serif
Arial Helvetica Nimbus Sans L Sans serif
Comic Sans MS Monaco TSCu_Comic kursiv
Courier Ny Kurir Nimbus Mono L Monospace
Georgien * (se nedan) Century Schoolbook L Serif
Påverkan Träkol Rekha Sans serif
Times New Roman Tider Nimbus Roman No9 L Serif
Trebuchet MS Helvetica Garuda Sans serif
Verdana Genève DejaVu Sans Sans serif

För typsnitten Arial, Courier New och Times New Roman, när du skapar linjaler, är det bättre att ange Unix/Linux-teckensnittet först och sedan Mac OS-teckensnittet. Detta beror på en viss snedhet i Linux X11-kärntypsnittsuppsättningen.

Teckensnitt som inte ingår i den "säkra" listan, men som kan användas i layouter, är bättre definierade av CSS-teckensnittsstaplar baserat på denna tabell.

Windows Mac OS Unix/Linux förfäders familj
Lucida konsol Monaco Monospace
Lucida Sans Unicode Lucida Grande Garuda Sans serif
Palatino Linotyp Palatino Garuda** Sans serif
Tahoma Genève Kalimati Sans serif

Ett streck i Unix/Linux-kolumnen indikerar att användare av dessa operativsystem med största sannolikhet kommer att se standardteckensnittet på sidan.

Teckensnitt är en integrerad och mycket viktig del av en webbsidas design och betonar dess individualitet. Artikeln kommer att prata om att ansluta standardteckensnitt till en webbsida, de kallas också systemteckensnitt.

System, standard, säkra typsnitt

Alla webbläsare visar endast de teckensnitt som finns i datorns operativsystem. Det är därför de kallas system ettor och installeras som standard tillsammans med operativsystemet.

Och de kallas säkra typsnitt eftersom de sannolikt kommer att visas i webbläsaren för de flesta webbplatsbesökare.

Men problemet är att olika operativsystem har olika uppsättningar av teckensnitt installerade. Du kan se uppsättningarna med medföljande teckensnitt tillsammans med operativsystemet på de officiella sidorna för Windows och Mac OS. Och i Unix/Linux finns det ingen standarduppsättning alls.

För att webbsidan ska kunna visas i enlighet med designerns idé installerades en font-egenskap som heter font-family i CSS

teckensnittsfamiljens egendom

Egenskapen font-family är teckensnittsfamiljer grupperade efter vissa egenskaper.

Generiska familjer:
  • serif - teckensnitt med seriffer i ändarna;
  • sans-serif - sans-serif-teckensnitt;
  • kursiv - kursiv stil;
  • fantasi - dekorativa typsnitt;
  • monospace - monospace-teckensnitt (med bokstäver av samma bredd).

På så sätt väljs helt enkelt liknande typsnitt från olika operativsystem och ansluts till internetsidan separerade med kommatecken.

Här är ett exempel, bara för visuell uppfattning. Vi kommer att återkomma till detta exempel senare när vi överväger att koppla teckensnitt direkt.

Följ bara logiken så blir allt kristallklart.

Kropp ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) Låt oss analysera vad som står:

  • OS Windows - Arial;
  • OC Mac OS - Helvetica CY;
  • OC Unix/Linux - Nimbus Sans L;
  • Generisk familj - sans-serif.

Så kallade säkra typsnitt

Baserat på OS Windows har en lista över flera säkra typsnitt sammanställts.

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier Ny
  5. Georgien
  6. Påverkan
  7. Times New Roman
  8. Trebuchet MS
  9. Verdana

Alla dessa typsnitt är installerade på Mac OS X, Windows och många Unix/Linux-användare som har Core-teckensnitten för webbpaketet installerade.

För andra användare tillhandahålls en korrespondenstabell. Den innehåller liknande typsnitt som tillhör en specifik familj.

Tabell över korrespondens och typsnitts tillhörighet till en specifik familj:

WindowsMac OSUnix/Linuxförfäders familj
Arial BlackHelvetica C.Y.Nimbus Sans LSans serif
ArialHelvetica C.Y.Nimbus Sans LSans serif
Comic Sans MSMonaco CY* (se nedan)kursiv
Courier Ny* (se nedan)Nimbus Mono LMonospace
Georgien* (se nedan)Century Schoolbook LSerif
PåverkanCharcoal C.Y.* (se nedan)Sans serif
Times New RomanTimes C.Y.Nimbus Roman No9 LSerif
Trebuchet MSHelvetica C.Y.* (se nedan)Sans serif
VerdanaGenève C.Y.DejaVu SansSans serif

* När du ansluter teckensnitt kan du lita på det säkert. Tabellen stöder kyrilliska tecken och det ryska alfabetet.

Ansluter systemteckensnitt till webbplatsen

Om du behöver ansluta huvudteckensnitt för hela dokumentet, du behöver bara lägga till följande kod i CSS-formatmallen:

Brödtext ( /* kopplar teckensnittet till hela dokumentet */ font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* ställ dessutom in teckenstorleken */ font-size: 16px; / * ställ in fetstilt teckensnitt, eller istället för 400, ställ in värdet - normal */ font-weight: 400; )

Och så här är systemteckensnitt anslutna i Bootstrap 4-ramverket: Teckensnitt ingår med mobila enheter i åtanke.

Brödtext ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; )

Tilldela ett teckensnitt för rubriker

H1, H2, H3, H4, H5, H6 - här är det samma, bara vi ställer in djärvhetsvärdet för att markera rubrikerna:

H1, h2, h3, h4, h5, h6 ( teckensnittsfamilj: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* koppla teckensnittet till rubrikerna */ teckensnittsvikt: 600; / * ställ in teckensnittsvikt, eller istället för 600, ställ in värdet till fetstil */ )

Vi tilldelar endast stycken ett teckensnitt:

p ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; ) Rad för rad ser det ut så här:
  1. Vi kopplar typsnittet till stycken, det kan appliceras på li-listor, div-block, formulär och andra element;
  2. Ställ in teckensnittsvikten, eller istället för 600, ställ in värdet till fetstil;
  3. Dessutom ställer vi in ​​teckenstorleken för stycken.

Till tilldela ett teckensnitt endast till ett specifikt stycke, eller block, måste du först tilldela en klass till detta block i HTML-dokumentet:

Här är ett stycke med ett plugin-font

Och i CSS-tabellen skriv följande kod:

Huvudteckensnitt (teckensnittsfamilj: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; )

Nu kommer varje tagg - ett html-element med en .font-klass (kalla det vad du vill) att tilldelas ett Arial-teckensnitt, med normal (400), fetstil och en storlek på 16 pixlar.
På samma sätt kan du tilldela olika typsnitt till li-listor, tabeller, hela div-block, enskilda ord eller fraser.

Koppla teckensnitt direkt i ett HTML-dokument

Teckensnitt ingår direkt i ett HTML-dokument på samma sätt som en CSS-fil, den enda skillnaden ligger i syntaxen. Du kan inkludera teckensnitt i dokumenthuvudet - mellan taggar (liknar en CSS-fil), eller inline - tilldela egenskaper direkt till html-taggar.

Inklusive typsnitt i rubriken, mellan taggar . För att göra detta, lägg till följande kod i html-dokumentet:

Allt liknar anslutningen i CSS-filen.

Ansluta teckensnitt inline

Direkt till webbplatselement. Låt mig ge dig några exempel:

Koppla teckensnittet till stycket

Här är ett stycke med text

Vi markerar ett separat ord i fetstil och tilldelar ett separat typsnitt från det huvudsakliga

Här är ett stycke med text, och detta ord, som ska markeras med fet stil

Vi markerar länken i fet stil och tilldelar ett separat typsnitt från det huvudsakliga

Detta är enkel text. Här är länken också enkel text.

På samma sätt tilldelar vi typsnitt till alla HTML-taggar.

Obs - Systemteckensnitt i Bootstrap 4

Utvecklarna av den berömda Framework Bootstrap 4 ansluter typsnitt på följande sätt så att nästan vilken enhet som helst kan använda sina vanliga systemteckensnitt.

Brödtext ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )

I den här artikeln kommer jag att dela min lösning på problemet med felaktig visning av teckensnitt i Windows 7, vilket kräver återställning av alla standardtypsnitt iWindows 7. Bakgrunden till frågan är denna: Jag letade nyligen efter nya originaltypsnitt för användning i en grafikredigerare, jag laddade ner en hel massa av dem, men sedan märkte jag att när ett nytt typsnitt läggs till i systemet, om det finns en matcha ersätts det ursprungliga typsnittet med ett nytt (instruktioner om hur man installerar typsnitt i Windows 7). Som ett resultat av denna aktivitet blev det omöjligt att arbeta i hälften av systempanelerna och applikationerna på grund av det faktum att de talade på språk som jag inte känner till :).

En snabb Google-sökning efter " återställa systemteckensnitt tillWindows 7"och" standardteckensnitt förWindows 7", gav inte mycket resultat, de föreslagna lösningarna hjälpte inte fkb (naturligtvis passade det inte mig att installera om systemet). Därför bestämde jag mig för att gå min egen väg och till att börja med kopierade jag helt enkelt de ursprungliga typsnitten från ett känt normalt system (låt mig påminna dig om att typsnitten är lagrade i katalogen %windir%\fonts) och ersatte typsnitten på mitt system med dem. Lösningen hjälpte bara delvis, det blev möjligt att arbeta i systemet, mina inhemska kyrilliska tecken dök upp, men teckensnittsparametrarna lämnade mycket övrigt att önska. För det första har storleken på vissa typsnitt ändrats, eller så överensstämmer inte längre med originalet, eller av någon anledning har typsnittet blivit fetstilt.

Men jag lyckades ta reda på hur jag skulle lösa detta problem. För att göra detta måste du återställa teckensnittsinställningarna i registret, för att ladda ner den bifogade filen nedan, som låter dig återställa associationer för standardteckensnitt i Windows 7. Du kan ladda ner den:

Den här filen representerar det exporterade innehållet i registerdatafilen HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts i Win 7. Efter att ha applicerat denna .reg-fil måste systemet startas om. Problemet med typsnitt borde försvinna!

De där. Sekvensen som hjälpte mig att återställa standardsystemteckensnitt i Windows 7 är denna:

  • ersätta teckensnitt i katalogen %windir%\fonts med teckensnitt från ett "rent" system
  • exportera registergren HLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts

Jag hoppas att om dina teckensnitt också har kraschat kommer den här lösningen att hjälpa dig också. I alla fall, om du hittar en alternativ metod som hjälpte i din situation, tveka inte att dela i kommentarerna. I teorin är instruktionerna också lämpliga i fall där det önskade teckensnittet av misstag raderades, och efter att det hittades och kopierades tillbaka försvinner inte felen.

PS. Om du inte har rent Windows 7 till hands kan du ladda ner ett arkiv med standardteckensnitt här: http://narod.ru/disk/52061075001.99f42303cf1a0ac70dc978dd20406657/original_fonts.zip.html, arkivstorleken är cirka 350 MB.

Den här listan innehåller teckensnitt som är gemensamma för alla nuvarande Windows-operativsystem (faktiskt sedan Windows 98), och deras motsvarigheter i Mac OS. Sådana typsnitt kallas ibland "säkra typsnitt för webbläsare" ( webbläsarsäkra teckensnitt). Det här är en liten uppslagsbok som jag använder när jag gör webbsidor och jag tror att den kommer att vara användbar för dig också.

Om du är ny på webbdesign, kanske du tänker något i stil med: "Varför skulle jag begränsas till en så liten uppsättning teckensnitt? Jag har en enorm samling av vackra typsnitt!” Faktum är att besökarens webbläsare bara kan visa de typsnitt som är installerade i hans operativ system ( cirka. översättare: För närvarande är det redan möjligt att använda praktiskt taget alla typsnitt när man designar sidor med CSS 3 och dess nya egenskap @font-face; dock har inte alla webbläsare ännu stöd för denna funktion), vilket betyder att varje besökaren på din sida måste vara ägaren till de typsnitt du har valt. Därför bör du bara använda teckensnitt som är tillgängliga på varje operativsystem. Lyckligtvis har CSS en egenskap @typsnittsfamilj, vilket gör denna uppgift enklare.

Lista

@font-family betydelse Windows Mac Familj
Arial, Helvetica, sans-serif Arial Arial, Helvetica sans serif
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget sans serif
"Comic Sans MS", kursiv Comic Sans MS Comic Sans MS 5 kursiv
"Courier New", Courier, monospace Courier Ny Courier New, Courier 6 monospace
Georgia, Serif Georgien 1 Georgien serif
Impact, Charcoal, sans-serif Påverkan Impact 5, Charcoal 6 sans serif
"Lucida Console", Monaco, monospace Lucida konsol Monaco 5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, bok Antiqua 3 Palatino 6 serif
Tahoma, Genève, sans-serif Tahoma Genève sans serif
"Times New Roman", Times, serif Times New Roman Tider serif
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS 1 Helvetica sans serif
Verdana, Genève, sans-serif Verdana Verdana, Genève sans serif
Symbol Symbol 2 Symbol 2 -
Webbningar Webbningar 2 Webbningar 2 -
Wingdings, "Zapf Dingbats" Wingdings 2 Zapf Dingbats 2 -
"MS Sans Serif", Genève, sans-serif MS Sans Serif 4 Genève sans serif
"MS Serif", "New York", serif MS Serif 4 New York 6 serif

1 Teckensnitten Georgia och Trebuchet MS levereras med Windows 2000/XP och ingår i IE-teckensnittspaketet (och kommer faktiskt med många Microsoft-program), så de är installerade på många Windows 98-datorer.

2 Symbolteckensnitt visas bara i Internet Explorer, i andra webbläsare ersätts de vanligtvis av ett standardteckensnitt (även om t.ex. Symbol-teckensnittet visas i Opera och Webdings i Safari).

3 Typsnittet Book Antiqua är nästan identiskt med Palatino Linotype; Palatino Linotype kommer med Windows 2000/XP och Book Antiqua kommer med Windows 98.

4 Observera att dessa teckensnitt inte är TrueType, utan bitmapp, så de kan se dåliga ut i vissa storlekar (de är utformade för att visas vid 8, 10, 12, 14, 18 och 24 pt vid 96 DPI).

5 Dessa typsnitt fungerar bara i Safari i standardstil, men fungerar inte i fetstil eller kursiv stil. Comic Sans MS fungerar också i fet stil, men inte i kursiv stil. Andra Mac-webbläsare verkar vara bra efterlikna saknade teckensnittsegenskaper på egen hand (tack till Christian Fecteau för tipset).

6 Dessa teckensnitt installeras endast på Mac med klassisk installation

Skärmdumpar

  • Mac OS X 10.4.8, Firefox 2.0, ClearType aktiverad (tack till Juris Vecvanags för skärmdumpen)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType aktiverat
  • Mac OS X 10.4.11, Safari 3.0.4, ClearType aktiverad (tack till Nolan Gladius för skärmdumpen)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType aktiverad (tack till Eric Zavesky för skärmdumpen)
  • Windows Vista, Internet Explorer 7, ClearType aktiverat
  • Windows Vista, Firefox 2.0, ClearType aktiverat (tack till Michiel Bijl för skärmdumpen)

Publikationer om ämnet