Lijst met standaardlettertypen. Lettertypen die gelden voor alle (huidige) versies van Windows en hun Mac-equivalenten

Een van de belangrijkste taken van webdesign is het goede kiezen standaard lettertypen. Diensten voor het insluiten van lettertypen, zoals Google Web Lettertypen, of Typekit, zijn als alternatief gemaakt met als doel iets nieuws te bieden.

Ze zijn heel gemakkelijk te gebruiken. Laten we als voorbeeld nemen Google-service Weblettertypen.

Kies het lettertype Open Sans, Droid Serif of Lato. Schrijf de code en plak deze in het element HTML-document. U bent klaar om ernaar te verwijzen in CSS! Het hele proces duurde niet meer dan 60 seconden. En alles is volledig gratis.

Wat kan er mis zijn?

Sommige lettertypen zijn mogelijk niet voor iedereen beschikbaar. En dit betekent dat er mogelijk problemen kunnen optreden. Ben je blij met wat je hebt gekozen? prachtig lettertype voor de site, en de bezoeker van de webpagina ziet in plaats daarvan lelijke teksten.

Dit zal niet gebeuren als u een back-upoptie implementeert.

Hoe belangrijk is het om veilige weblettertypen te gebruiken?

Elk apparaat heeft zijn eigen set vooraf geïnstalleerde lettertypen. Van welke hangt af besturingssysteem. Het probleem is dat er kleine verschillen tussen hen bestaan.

Hoe zit het met websites? Zoals deze? Het lettertype dat u ziet, is mogelijk niet het lettertype dat oorspronkelijk voor de site was opgegeven.

Wat betekent het? Laten we zeggen dat de ontwerper een familie van betaalde lettertypen voor de site heeft gekozen. Als je ze niet hebt geïnstalleerd en niet door een speciale webservice wordt geleverd, dan is het lettertype dat je ziet er één van standaard opties. Times New Roman bijvoorbeeld.

Daarom kan de tekst op uw scherm er gewoon verschrikkelijk uitzien.

En hier standaardlettertypen voor de site beschikbaar op alle besturingssystemen. Dit is een kleine verzameling die beschikbaar is op Windows, Mac, Google, maar ook op Unix en Linux.

Met behulp van deze selectie kunnen ontwerpers, maar ook website-eigenaren, specificeren welk lettertype als back-uplettertype moet worden gebruikt. Dit geeft u de mogelijkheid om te bepalen hoe de pagina er op verschillende apparaten uit zal zien.

Als reserveoptie selecteert de ontwikkelaar een lettertype dat sterk lijkt op het originele lettertype, en dit is het lettertype dat aan de gebruiker wordt getoond.

Laten we eens kijken naar een selectie van de meest populaire standaard lettertypen HTML.

15 beste webveilige lettertypen

1. Ariaal

Wordt in de meeste gevallen als standaard beschouwd. Het meest voorkomende lettertype " schreefloos"of schreefloze lettertypen ( die geen schreven hebben aan de uiteinden van de letters). Het wordt in Windows vaak gebruikt om andere tekens te vervangen.

1. Helvetica

Helvetica is een redder in nood voor ontwerpers. Dit standaard web lettertype werkt bijna altijd ( Door ten minste, als vangnet voor andere lettertypen).

1. Times New Roman

Heeft dezelfde rol voor schreeflettertypen als Arial voor schreefloze lettertypen. Het is een van de meest populaire Windows-apparaten. Dit geupdate versie lettertype uit de oude tijd.

1. Keer

CSS standaard lettertype De Times is voor de meesten bekend. Veel mensen herinneren zich hem in kleine letters in smalle kolommen van oude kranten. Het meest voorkomende type drukwerk dat een traditie is geworden.

1. Koerier Nieuw

Vergelijkbaar met Times New Roman en gebruikt als variatie op de oude klassiekers. Het wordt ook beschouwd als een lettertype met één spatie. In tegenstelling tot schreef- en schreefloze lettertypen hebben alle tekens dezelfde breedte.

1. Koerier

Een oud lettertype met een vaste breedte dat als fallback wordt gebruikt op vrijwel alle apparaten en besturingssystemen.

1. Verdana

Verdana kan met recht worden beschouwd als een echt weblettertype ( echt weblettertype) dankzij eenvoudige lijnen, fungerend als schreven, evenals grote maat. De letters zijn iets langwerpig, zodat ze gemakkelijk op het scherm te lezen zijn.

1. Georgië

Het standaard weblettertype Georgia is qua vorm en grootte vergelijkbaar met het Verdana-lettertype. De tekens zijn groter dan andere lettertypen van dezelfde grootte. Maar het is beter om het niet in combinatie met anderen te gebruiken. Dezelfde Times New Roman ziet er in vergelijking uit als een dwerg.

1. Palatijn

Palatino dateert uit het Renaissance-tijdperk. Geen grappen. Dit is er nog een groot lettertype, ideaal voor internet. Het wordt vaak gebruikt in krantenkoppen en advertenties.

1. Garamond

Nog een oud lettertype dat dateert uit de 16e eeuw in Parijs. De nieuwe en verbeterde versie wordt standaard op de meeste Windows-apparaten geleverd. Later dit lettertype werd overgenomen door andere besturingssystemen.

1. Boekman

Boekman ( of Bookman Oude Stijl) - een van de beste standaardlettertypen voor kopjes. Het karakteristieke kenmerk is leesbaarheid, zelfs bij gebruik van een klein formaat.

1. Komisch zonder MS

Comic Sans MS is een leuk alternatief voor schreeflettertypen.

1. Trebuchet MS

Dit is een lettertype met een middeleeuws thema, oorspronkelijk ontwikkeld door Microsoft halverwege de jaren negentig. Het werd gebruikt in Windows XP. Tegenwoordig wordt het gebruikt om de hoofdtekst samen te stellen.

1. Arial zwart

Analoog standaardlettertype voor de site Ariaal. Toegegeven, het is groter, dikker en sterker. De verhoudingen zijn vergelijkbaar met het Helvetica-lettertype. En is het belangrijk? Ze kunnen Helvetica met succes vervangen zonder dat u een licentie hoeft te kopen.

1. Invloed

Nog een geweldig lettertype voor het markeren van koppen. Het werkt goed in een korte zin bestaande uit meerdere woorden, maar ook in lange zinnen.

Lettertypen zijn een integraal en zeer een belangrijk deel website-ontwerp, met de nadruk op de individualiteit ervan. In het artikel we zullen praten over het verbinden van standaardlettertypen met een webpagina, ze worden ook wel systeemlettertypen genoemd, en in het volgende artikel zullen we in detail kijken naar het kiezen en verbinden van lettertypen uit Google-lettertypen naar de WordPress-site.

Systeem-, standaard-, veilige lettertypen

Elke browser geeft alleen de lettertypen weer die aanwezig zijn in het besturingssysteem van de computer. Daarom worden ze systeemversies genoemd en worden ze standaard samen met het besturingssysteem geïnstalleerd.

En ze worden veilige lettertypen genoemd omdat ze waarschijnlijk in de browser van de meerderheid van de sitebezoekers worden weergegeven.

Maar het probleem is dat op verschillende besturingssystemen verschillende sets lettertypen zijn geïnstalleerd. De sets met meegeleverde lettertypen kunt u samen met het besturingssysteem bekijken op officiële pagina's Windows, MacOS. Maar in Unix/Linux is er geen standaard ingesteld.

Om de internetpagina volgens het idee van de ontwerper weer te geven, werd in CSS een lettertype-eigenschap met de naam font-family geïnstalleerd

lettertype-familie eigendom

De eigenschap font-family bestaat uit lettertypefamilies gegroepeerd op bepaalde kenmerken.

Generieke families:

• serif - lettertypen met schreven aan de uiteinden;
• schreefloze - schreefloze lettertypen;
• cursief - cursieve lettertypen;
• fantasie - decoratieve lettertypen;
• monospace - monospace-lettertype (met letters van dezelfde breedte).

Ze worden dus eenvoudig geselecteerd vergelijkbare lettertypen vanuit verschillende besturingssystemen en gescheiden door komma's, maak verbinding met de internetpagina.

Hier is een voorbeeld, alleen voor visuele perceptie. We komen later op dit voorbeeld terug als we overwegen om lettertypen rechtstreeks met elkaar te verbinden.

Volg gewoon de logica en alles zal glashelder worden.

Lichaam (lettertypefamilie: Arial, "Helvetica CY", "Nimbus Sans L", schreefloos;)

Laten we eens kijken naar wat er is geschreven:

• Besturingssysteem Windows - Arial;
• OC Mac OS - Helvetica CY;
• OC Unix/Linux - Nimbus Sans L;
• Generieke familie - schreefloos.

Zogenaamde veilige lettertypen

Op basis van OS Windows is een lijst met verschillende veilige lettertypen samengesteld.

1. Ariaal
2. Arial zwart
3. Komisch zonder MS
4. Koerier Nieuw
5. Georgië
6. Invloed
7. Times New Roman
8. Trebuchet MS
9. Verdana

Al deze lettertypen zijn geïnstalleerd op Mac OS X, Windows en veel Unix/Linux-gebruikers die het Core-lettertypen voor het webpakket hebben geïnstalleerd.

Voor andere gebruikers is er een correspondentietabel beschikbaar. Het bevat vergelijkbare lettertypen die tot een specifieke familie behoren.

Tabel met correspondentie en het behoren van lettertypen tot een specifieke familie:

* Bij het aansluiten van lettertypen kunt u er veilig op vertrouwen. Tafelsteunen Cyrillische karakters, Russisch alfabet.
Ik heb de tabel zelf in dit artikel genomen.

Systeemlettertypen verbinden met de site

Er zijn verschillende manieren om systeemlettertypen aan uw website te koppelen. Bovendien kunt u verschillende lettertypen aan verschillende alinea's koppelen. Pas verschillende lettertypen toe op afzonderlijke woorden en zinsdelen. Ik zal nu proberen dit allemaal te overwegen.
Laten we dus alles in goede orde doen.

Lettertypen verbinden in een CSS-bestand

Als u verbinding wilt maken hoofdlettertype voor het hele document, hoeft u alleen maar de volgende code aan het stijlblad toe te voegen:

Body ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* verbind het lettertype met het volledige document */ font-size: 16px; /* stel bovendien de lettergrootte in */ font -weight: 400; /* stel het lettertypegewicht in, of in plaats van 400, stel de waarde in op normal */ )

Een lettertype voor koppen toewijzen H1, H2, H3, H4, H5, H6, (hier is het hetzelfde, we hebben alleen de vetgedrukte waarde ingesteld om de koppen te markeren):

H1,h2,h3,h4,h5,h6( lettertypefamilie: Arial, "Helvetica CY", "Nimbus Sans L", schreefloos; /* verbind het lettertype met de koppen */ lettertypegewicht: 600; / * stel de lettergrootte in, of in plaats van 600, stel de waarde in op vet */ )

We wijzen alleen een lettertype toe aan alinea's:

P( lettertypefamilie: Arial, "Helvetica CY", "Nimbus Sans L", schreefloos; /* verbind het lettertype met alinea's, kan worden toegepast op li-lijsten, div blokken, formulier en andere elementen */ font-weight: normal; /* stel het lettertypegewicht in, of in plaats van 600, stel de waarde in op vet */ font-size: 16px; /* stel bovendien de lettergrootte voor alinea's in */ )

Naar wijs een lettertype alleen toe aan een specifieke alinea, of blok, moet u eerst een klasse aan dit blok in het HTML-document toewijzen

Hier is een paragraaf met een aangepast lettertype

En in CSS-tabel schrijf de volgende code:

Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* we verbinden het lettertype met bepaalde paragrafen, kunnen worden toegepast op aparte lijsten li, div-blokken, formulieren en andere elementen */ font-weight: normal; /* stel het lettertypegewicht in, of in plaats van 600, stel de waarde in op vet */ font-size: 16px; /* stel bovendien de lettergrootte voor alinea's in */ )

Nu, voor elke tag - html-element met de class.font (noem het hoe je maar wilt), krijgt het lettertype een Arial-lettertype toegewezen, met normaal (400), gewicht en grootte 16 pixels.
Op dezelfde manier kunt u verschillende lettertypen toewijzen aan li-lijsten, tabellen, volledige div-blokken, afzonderlijke woorden of zinsdelen.

Lettertypen verbinden in een HTML-document

Lettertypen worden rechtstreeks in een HTML-document opgenomen, op dezelfde manier als een CSS-bestand, het enige verschil zit in de syntaxis. U kunt lettertypen in de documentkop opnemen, tussen tags (vergelijkbaar met een CSS-bestand), of inline - eigenschappen rechtstreeks aan html-tags toewijzen.

Inclusief lettertypen in de header, tussen tags . Om dit binnen te doen html-document voeg deze code toe:

Ik zal mezelf hier niet herhalen. Alles is vergelijkbaar met de verbinding in het CSS-bestand.

Lettertypen inline verbinden, rechtstreeks naar de site-elementen. Laat me je een paar voorbeelden geven:

Het lettertype verbinden met de alinea

Hier is een paragraaf met tekst

Wij benadrukken vetgedrukt apart woord en wijs een lettertype toe dat gescheiden is van het hoofdlettertype

Hier is een paragraaf met tekst, en dit woord, dat vetgedrukt moet worden weergegeven

Hier is de link

Op dezelfde manier wijzen we lettertypen toe aan elke html-tag.

Maar toch is het het beste en aanbevolen om stijlen toe te wijzen aan elementen via CSS-bestand. Ten eerste hoeft u stijlen slechts één keer in CSS te schrijven en deze vervolgens alleen in HTML toe te wijzen vereiste klasse. Ten tweede wordt door het schrijven van inline stijlen dubbele inhoud gecreëerd. Deze eigenschappen en klassen lijken door zoekmachines te worden geïndexeerd, en ik heb gehoord dat het W3C inline helemaal wil afschaffen. Hoewel het soms gemakkelijker is om op deze manier stijlen te schrijven.

Alle. Volg de site-updates, ik bereid een artikel voor over het verbinden van niet-standaard en originele lettertypen met de site, zodat ze in alle browsers correct worden weergegeven. Ik zal je ook aan een aantal voorstellen goede diensten, waar u aangepaste lettertypen kunt selecteren.

Wanneer u begint met het maken van een lay-out, moet u in de CSS specifiek de lettertypen opgeven die op de pagina worden gebruikt. Vaak verschillende lettertypen de ontwerper typt niet alleen de hoofdtekst van de pagina, maar ook verschillende kopjes, logo's en monogrammen.

Goede ontwerper weet, net als een goede lay-outontwerper, dat de browser alleen de lettertypen kan gebruiken die op de computer van de gebruiker zijn geïnstalleerd om de pagina weer te geven. Dat wil zeggen, lettertypen kunnen in twee categorieën worden verdeeld:

1. Lettertypen die door de overgrote meerderheid van de gebruikers zonder problemen worden weergegeven.
2. Lettertypen waar je genoeg van hebt grote groep er zijn geen gebruikers.

Als de ontwerper lettertypen van de tweede categorie heeft gebruikt om bijvoorbeeld een logo of grote statische koppen te maken, kunt u niet aarzelen om de techniek te gebruiken om tekst te vervangen door een afbeelding. Het nadeel van het gebruik van deze techniek is inflexibiliteit. Bij wijzigingen in de tekst zul je de afbeelding opnieuw moeten maken en de CSS moeten aanpassen (bijvoorbeeld als de afmetingen nieuwe foto komt niet overeen met de oude).

We kunnen zeggen dat het gevaar van het gebruik van een techniek rechtstreeks afhangt van de waarschijnlijkheid dat de tekst wordt gewijzigd. Doe daarom bijvoorbeeld de algemene tekst van de pagina niet-standaard lettertypen het is verboden! Een competente ontwerper zou dit nooit doen. En als de ontwerper een groene tegenkomt, is een goede lay-outontwerper eenvoudigweg verplicht zijn fout te corrigeren - vervang dit lettertype in de lay-out door het meest vergelijkbare standaardlettertype.

Maar hoe kun je de lettertypen van de eerste groep onderscheiden van de tweede? Het is duidelijk dat u niet kunt vertrouwen op een reeks lettertypen die rechtstreeks op uw computer zijn geïnstalleerd! Laten we het uitzoeken.

Standaard lettertypen

Standaardlettertypen zijn een reeks lettertypen die samen met het besturingssysteem worden geïnstalleerd. Omdat besturingssystemen verschillend zijn, is hun set lettertypen ook anders. Lijst met standaardlettertypen Windows-versies vindt u bijvoorbeeld in het artikel Standaard Windows-lettertypen en een lijst met standaard Mac-lettertypen OS op de pagina Lettertypen meegeleverd met Mac OS. Unix/Linux-besturingssystemen hebben geen enkele set lettertypen. Veel Linux-gebruikers gebruik de DejaVu-lettertypeset, vooral op Ubuntu zijn deze standaard geïnstalleerd. Volgens statistieken van http://www.codestyle.org hebben veel Unix/Linux-gebruikers ook URW, Free en andere lettertypesets geïnstalleerd. Volgens dezelfde statistieken heeft meer dan 60% van de Unix/Linux-gebruikers lettertypen uit de Core-lettertypen voor het web op hun computer staan, die tot 2002 officieel beschikbaar waren voor gratis download op de Microsoft-website.

Om ervoor te zorgen dat de pagina op elk besturingssysteem wordt weergegeven zoals de ontwerper het bedoeld heeft, is het mogelijk om dit te doen CSS-eigenschap font-family specificeert meerdere lettertypen, gescheiden door komma's.

Deze eigenschap specificeert een geprioriteerde lijst met lettertypefamilienamen en/of generieke familienamen. Volgens de CSS2-specificatie zijn er twee soorten lettertypefamilienamen:

1. De lettertypefamilienaam van uw keuze. Bijvoorbeeld 'Times new Roman', 'Arial' en anderen. Namen van lettertypefamilies die spaties bevatten, moeten tussen aanhalingstekens worden geplaatst. Als aanhalingstekens ontbreken, worden eventuele spatietekens voor en na de lettertypenaam genegeerd en wordt elke reeks spaties binnen de lettertypenaam omgezet in één spatie.
2. Generieke (gemeenschappelijke) familie. De specificatie definieert de volgende generieke families:
   • serif - lettertypen met schreven aan de uiteinden;
   • schreefloze - schreefloze lettertypen;
   • cursief - cursieve lettertypen;
   • fantasie - decoratieve lettertypen;
   • monospace - monospace-lettertype (met letters van dezelfde breedte).

De namen van de voorouderlijke families zijn trefwoorden en hoeft niet tussen aanhalingstekens te staan.

Voor het ontwerp wordt dus een standaardlettertype van OS Windows genomen, een vergelijkbaar lettertype voor Mac OS en Unix/Linux geselecteerd, een gemeenschappelijke lettertypefamilie gespecificeerd, en je bent klaar.

Maar zo eenvoudig is het niet. Laten we dieper ingaan.

Webveilige lettertypen vinden

Op internet heeft het concept van ‘veilige’ weblettertypen zich historisch ontwikkeld. Een veilig lettertype is een lettertype dat standaard is voor alle besturingssystemen. Omdat we van een dergelijke stand van zaken alleen maar kunnen dromen, zijn er geen absoluut veilige lettertypen!

Individuele lettertypen kan met enig voorbehoud veilig worden genoemd.

De basis voor het bepalen van ‘veilige’ lettertypen waren de lettertypen van het meest voorkomende besturingssysteem. Windows-systemen, die ook in andere besturingssystemen worden gebruikt. Een voorbeeld van dergelijk gebruik zijn de reeds genoemde Core-lettertypen voor het Web-lettertypepakket, dat volgens de statistieken door veel Unix/Linux-gebruikers is gedownload.

Dit pakket bevat de volgende lettertypen: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Ze ondersteunen allemaal het Cyrillische alfabet, wat belangrijk is voor Runet.

De set lettertypen die deel uitmaakt van de standaarddistributie van Mac OS X (dit besturingssysteem is het meest verspreid onder de lettertypen). Mac-gebruikers OS) bevat alle lettertypen uit de kernlettertypen voor de webset.

Dus gebaseerd op Windows-lettertypen, gebruikt in andere besturingssystemen, is de volgende lijst met zogenaamde “veilige” weblettertypen gevormd:

1. Ariaal
2. Arial zwart
3. Komisch zonder MS
4. Koerier Nieuw
5. Georgië
6. Invloed
7. Times New Roman
8. Trebuchet MS
9. Verdana

Het Webdings-lettertype bevat pictogrammen en kan niet voor inhoud worden gebruikt. Andale Mono wordt niet veel gebruikt omdat het niet goed geschikt is voor dagelijks schermlezen en niet alle Windows-gebruikers het hebben.

Iedereen heeft al deze lettertypen Windows-gebruiker, Mac OS X en de overgrote meerderheid van Unix/Linux-gebruikers (d.w.z. degenen die de Core-lettertypen voor het webpakket hebben geïnstalleerd).

Maar hoe zit het met de rest? Je wilt immers dat het plan van de ontwerper zoveel mogelijk gezien wordt groter aantal gebruikers!

Lettertypen die Cyrillisch ondersteunen

Een specifiek kenmerk van RuNet is het probleem met paginacoderingen en ondersteuning voor Cyrillisch in lettertypen. Om problemen met verschillende tekencoderingen te voorkomen, slimme mensen heeft Unicode uitgevonden, waarmee je tekens uit verschillende talen in één lettertype kunt combineren. Voor Russischtalige pagina's hoeft u dus alleen Unicode-lettertypen te gebruiken die Cyrillisch ondersteunen.

Hieronder vindt u een tabel met lettertype-overeenkomsten.

* in de kolom tegenover het lettertype betekent dat het besturingssysteem geen eigen Cyrillische equivalenten van het Windows-lettertype heeft. Maar tegelijkertijd is de kans groot dat dit lettertype zelf rechtstreeks in het besturingssysteem wordt geïnstalleerd.

Als de hoofdtekst van de lay-out bijvoorbeeld Arial is, vinden we dit lettertype in de tabel en schrijven we de bijbehorende regel in CSS:

body ( lettertypefamilie: Arial, "Helvetica CY", "Nimbus Sans L", schreefloos; )

Deze invoer betekent dat als de gebruiker het Arial-lettertype heeft (en alle Windows-gebruikers en alle Mac OS X-gebruikers dit hebben), de pagina in dit lettertype wordt weergegeven. Als de gebruiker dit lettertype niet heeft, wordt de pagina van de Russischtalige Mac OS 9-gebruiker zeker standaard weergegeven systeem lettertype Helvetica CY, en voor een Unix/Linux-gebruiker zal het worden weergegeven in het lettertype Nimbus Sans L, dat op 90% van de Unix/Linux-gebruikers is geïnstalleerd. Als de Unix/Linux-gebruiker tot de 10% behoort die dit lettertype niet heeft, wordt de pagina weergegeven in het serif-lettertype dat standaard is ingesteld voor het bekijken van webpagina's.

Naast het feit dat de tabel rekening houdt met Unix/Linux-lettertypen, is er na de gebruikelijke Helvetica een soort van vreemd icoon C.Y. Laten we uitzoeken wat het is!

Voor Mac-release OS X had deze regel de volgende betekenis: voor Windows-gebruikers geven we de Arial-pagina weer, voor Mac OS 9-gebruikers - in het standaard Helvetica-lettertype, en de rest ziet de pagina met het schreefloze systeemlettertype dat standaard in de browser is geconfigureerd. Maar nogmaals: een belangrijke nuance! Het standaard Mac OS 9 Helvetica-lettertype heeft geen Cyrillisch! Voor de Russischtalige pagina betekende dit het volgende: voor Windows-gebruikers geven we de Arial-pagina weer, voor Mac OS 9-gebruikers - in het standaard Helvetica-lettertype, dat onleesbare informatie weergeeft, en de rest ziet de pagina met het systeem sans-serif lettertype dat standaard in de browser is geconfigureerd.

Om deze set correct weer te geven voor Mac OS 9-gebruikers, in plaats van niet-gecyrilliseerde Helvetica, is het zinvol om hetzelfde standaard Mac OS 9-lettertype Helvetica CY op te geven, met daarin Cyrillisch.

De lezing van linialen is veranderd sinds de release van Mac OS X. Er is nu één algemeen standaardlettertype gespecificeerd voor Windows/Mac OS X. En als we willen dat Mac OS 9-gebruikers de bedoeling van de ontwerper kunnen zien, moeten we een lettertype met Cyrillisch in de lettertyperegel opnemen.

Dus hoewel er geen veilige lettertypen zijn, zijn er wel veilige lettertypefamilies. Ze worden ook wel genoemd lettertype CSS-stapels. Naast de standaard Windows/Mac OS X-lettertypen kunnen deze regels ook gelijkwaardige lettertypen bevatten uit de standaardset van Mac OS 9 (die standaard geen “veilige” lettertypen bevat) en gewone Unix/Linux-lettertypen.

Elke lay-outontwerper komt vroeg of laat een moment tegen waarop een ontwerper een lettertype gebruikt in een lay-out die niet is opgenomen in de lijst met “veilige” lettertypen; Maar dit is nog geen reden om alarm te slaan! Ontwerpers gebruiken bijvoorbeeld heel vaak het Tahoma-lettertype in lay-outs, dat niet in deze lijst is opgenomen. Een goed opgebouwde lijn lettertypen biedt de mogelijkheid om niet alleen Tahoma, maar ook andere lettertypen te gebruiken. Alle grote hoeveelheid ontwerpers profiteren van deze mogelijkheid en een competente lay-outontwerper zou hiervan op de hoogte moeten zijn.

Hieronder vindt u een extra tabel met lettertypen die niet zijn opgenomen in de lijst met “veilige” lettertypen, maar die wel in lay-outs kunnen worden gebruikt.

Wat als er geen Cyrillisch alfabet bestaat?

Voor Engelstalige teksten zien bovenstaande tabellen er iets anders uit.

Voor de lettertypen Arial, Courier New en Times New Roman is het bij het maken van linialen beter om eerst het Unix/Linux-lettertype op te geven, en daarna het Mac OS-lettertype. Dit komt door een onjuistheid van de Linux X11-kernlettertypen.

Lettertypen die niet zijn opgenomen in de "veilige" lijst, maar wel in lay-outs kunnen worden gebruikt, worden beter gedefinieerd door CSS-lettertypestapels op basis van deze tabel.

Een streepje in de Unix/Linux-kolom geeft aan dat gebruikers van deze besturingssystemen hoogstwaarschijnlijk het standaardlettertype op de pagina zullen zien.

** In deze regel is het zinvol om het Garuda-lettertype vóór Palatino te plaatsen (zie uitleg hierboven).

Conclusies:

1. Er zijn geen absoluut veilige lettertypen. De volgende lettertypen kunnen als voorwaardelijk veilig worden beschouwd:
   • Ariaal
   • Arial zwart
   • Komisch zonder MS
   • Koerier Nieuw
   • Georgië
   • Invloed
   • Times New Roman
   • Trebuchet MS
   • Verdana
2. Veilige CSS-stacks die rekening houden met ondersteuning voor het Cyrillische alfabet in lettertypen zijn te vinden in het artikel.
3. Als ondersteuning voor het Cyrillische alfabet niet belangrijk is op de pagina, gebruiken we de CSS-stacks uit het artikel.

Wanneer u begint met het maken van een lay-out, moet u in de CSS specifiek de lettertypen opgeven die op de pagina worden gebruikt. Vaak typt de ontwerper in verschillende lettertypen niet alleen de hoofdtekst van de pagina, maar ook verschillende koppen, logo's en monogrammen:

Een goede ontwerper weet, net als een goede lay-outontwerper, dat de browser alleen de lettertypen kan gebruiken die op de computer van de gebruiker zijn geïnstalleerd om een ​​pagina weer te geven. Dat wil zeggen, lettertypen kunnen in twee categorieën worden verdeeld:

1. Lettertypen die door de overgrote meerderheid van de gebruikers zonder problemen worden weergegeven.
2. Lettertypen die een vrij grote groep gebruikers niet heeft.

Als de ontwerper lettertypen van de tweede categorie heeft gebruikt om bijvoorbeeld een logo of grote statische koppen te maken, kunt u niet aarzelen om de techniek te gebruiken. Het nadeel van het gebruik van deze techniek is inflexibiliteit. Als er wijzigingen in de tekst zijn, moet u de afbeelding opnieuw uitvoeren en de CSS wijzigen (bijvoorbeeld als de afmetingen van de nieuwe afbeelding niet overeenkomen met de oude).

We kunnen zeggen dat het gevaar van het gebruik van een techniek rechtstreeks afhangt van de waarschijnlijkheid dat de tekst wordt gewijzigd. Daarom kan de algemene tekst van een pagina bijvoorbeeld niet in niet-standaard lettertypen worden geschreven! Een competente ontwerper zou dit nooit doen. En als de ontwerper een groene tegenkomt, is een goede lay-outontwerper eenvoudigweg verplicht zijn fout te corrigeren - vervang dit lettertype in de lay-out door het meest vergelijkbare standaardlettertype.

Maar hoe kun je de lettertypen van de eerste groep onderscheiden van de tweede? Het is duidelijk dat u niet kunt vertrouwen op een reeks lettertypen die rechtstreeks op uw computer zijn geïnstalleerd! Laten we het uitzoeken.

Standaard lettertypen

Standaardlettertypen zijn een reeks lettertypen die samen met het besturingssysteem worden geïnstalleerd. Omdat besturingssystemen verschillend zijn, is hun set lettertypen ook anders. Lijst met standaardlettertypen verschillende versies Windows vindt u bijvoorbeeld in het artikel Standaard Windows-lettertypen, en een lijst met standaard Mac OS-lettertypen op de pagina Lettertypen meegeleverd met Mac OS. Unix/Linux-besturingssystemen hebben geen enkele set lettertypen. Veel Linux-gebruikers gebruiken de DejaVu-lettertypeset, vooral op Ubuntu worden deze standaard geïnstalleerd. Volgens statistieken van http://www.codestyle.org hebben veel Unix/Linux-gebruikers ook URW, Free en andere lettertypesets geïnstalleerd. Volgens dezelfde statistieken heeft meer dan 60% van de Unix/Linux-gebruikers lettertypen uit de Core-lettertypen voor het web op hun computer staan, die tot 2002 officieel gratis te downloaden waren op de website van Microsoft.

Om ervoor te zorgen dat de pagina wordt weergegeven zoals de ontwerper het bedoeld heeft, is het op elk besturingssysteem mogelijk om verschillende lettertypen op te geven in de CSS-eigenschap, gescheiden door komma's.

Deze eigenschap specificeert een geprioriteerde lijst met lettertypefamilienamen en/of generieke familienamen. Volgens de CSS2-specificatie zijn er twee soorten lettertypefamilienamen:

1. De lettertypefamilienaam van uw keuze. Bijvoorbeeld "Times new Roman", "Arial" en anderen. Namen van lettertypefamilies die spaties bevatten, moeten tussen aanhalingstekens worden geplaatst. Als aanhalingstekens ontbreken, worden eventuele spatietekens voor en na de lettertypenaam genegeerd en wordt elke reeks spaties binnen de lettertypenaam omgezet in één spatie.
2. Generieke (gemeenschappelijke) familie. De specificatie definieert de volgende generieke families:
   • serif - lettertypen met schreven aan de uiteinden;
   • schreefloze - schreefloze lettertypen;
   • cursief — cursieve lettertypen;
   • fantasie - decoratieve lettertypen;
   • monospace - monospace-lettertype (met letters van dezelfde breedte).
   Clanfamilienamen zijn trefwoorden en hoeven niet tussen aanhalingstekens te staan.

Voor het ontwerp wordt dus een standaardlettertype van OS Windows genomen, een vergelijkbaar lettertype voor Mac OS en Unix/Linux geselecteerd, een gemeenschappelijke lettertypefamilie gespecificeerd, en je bent klaar.

Maar zo eenvoudig is het niet. Laten we dieper ingaan.

Webveilige lettertypen vinden

Op internet heeft het concept van ‘veilige’ weblettertypen zich historisch ontwikkeld. Een veilig lettertype is een lettertype dat standaard is voor alle besturingssystemen. Over zo'n stand van zaken kan men dus alleen maar dromen Er zijn geen absoluut veilige lettertypen!

Sommige lettertypen kunnen met enig voorbehoud veilig worden genoemd.

De basis voor het definiëren van ‘veilige’ lettertypen waren de lettertypen van het meest voorkomende Windows-besturingssysteem, die ook in andere besturingssystemen worden gebruikt. Een voorbeeld van dergelijk gebruik zijn de reeds genoemde Core-lettertypen voor het Web-lettertypepakket, dat volgens de statistieken door veel Unix/Linux-gebruikers is gedownload.

Dit pakket bevat de volgende lettertypen: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Ze ondersteunen allemaal het Cyrillische alfabet, wat belangrijk is voor Runet.

De set lettertypen die standaard bij Mac OS X wordt geleverd (dit besturingssysteem wordt het meest gebruikt onder Mac OS-gebruikers) omvat alle lettertypen uit de set Core-lettertypen voor het web.

Op basis van Windows-lettertypen die in andere besturingssystemen worden gebruikt, werd dus de volgende lijst met zogenaamde “veilige” weblettertypen gevormd:

• Ariaal
• Arial zwart
• Komisch zonder MS
• Koerier Nieuw
• Georgië
• Invloed
• Times New Roman
• Trebuchet MS
• Verdana

Het Webdings-lettertype bevat pictogrammen en kan niet voor inhoud worden gebruikt. Andale Mono wordt niet veel gebruikt omdat het niet goed geschikt is voor dagelijks schermlezen en niet alle Windows-gebruikers het hebben.

Elke Windows-, Mac OS X-gebruiker en de overgrote meerderheid van Unix/Linux-gebruikers (dat wil zeggen, degenen die de Core-lettertypen voor het webpakket hebben geïnstalleerd) beschikken over al deze lettertypen.

Maar hoe zit het met de rest? Je wilt immers dat het plan van de ontwerper door zoveel mogelijk gebruikers gezien wordt!

Lees hierover in het tweede deel van de publicatie.