Site-lettertype- dit is een van de belangrijkste ontwerpproblemen voor uw site. De juiste grootte, kleur en type lettertype kunnen de problemen van leesbaarheid, schoonheid en efficiëntie van de bron als geheel oplossen.

TOP 10 van de beste en meest gebruikte lettertypen

Alle onderstaande lettertypen worden als standaard beschouwd, dus ze kunnen op de site worden gebruikt, zelfs zonder het lettertypebestand (* .ttf) naar de map met de site te uploaden

1. Tahoma

2. Verdana

3. Arial / Arial Zwart / Arial Smal

4. Times New Roman

5. Palatino Linotypie / Palatino

6. Gevolg

7. eeuwse gotiek

8. Helvetica

9. Georgië

10. Gill zonder mt

Aanvullend:

11. Koerier nieuw

12. Calibri

13. Trebuchet MS

14. Lucida Sans Unicode

Verschillende regels voor het gebruik van lettertypen op de site

1. De basis van leesbare tekst zijn kopjes. Ze fungeren als een soort bakens waarmee de lezer de aandacht kan vestigen op het gewenste deel of de gewenste passage, zonder hem te irriteren met de stroom van algemene informatie. Probeer ook uw zoekwoorden te benadrukken!

rubriek

Eerste paragraaf

Tweede paragraaf paragraaf

2. De site moet een algemeen concept hebben, dus probeer niet meer dan 2-3 lettertypen per site te gebruiken. Hieronder staat de CSS-code:

Tekst (lettertype: 14px / 100% Tahoma, Verdana, schreefloos)
14px lettertypegrootte, 100% inspringing tussen regels, Tahoma lettertype gebruikt
3. Na het ontwerp moet de tekst leesbaar zijn - let op het contrast (zwarte tekst op een witte achtergrond, wit op blauw, enz.). Probeer voor beide geen felle kleuren te gebruiken. Er zijn uitzonderingen, maar het valt niet onder de standaardpraktijken.

4. Probeer bij het ontwerpen van je tekst niet meer dan 2-3 kleuren te gebruiken. Merk op dat de beste ontwerpen maximaal 2-3 kleuren vasthouden. Volg deze regel en jij

5. De tekst moet leesbaar zijn! Probeer paragrafen, inspringingen voor subparagrafen of referentie-informatie te maken.

De tekst van de eerste alinea. Lang en interessant.

Maar de tekst van de tweede alinea zal niet samenvloeien met de tweede, omdat er een streepje tussen zal staan.

Bedankt voor de aandacht! En veel succes met projectontwerp!)

Zeker, velen hadden een situatie waarin het nodig was om een ​​onbekend lettertype te bepalen.

Het zal helpen om dit probleem op een vrij eenvoudige en originele manier op te lossen. U downloadt (van uw computer of door een link te geven) een afbeelding of een logo dat de tekst bevat, en de site geeft een lijst met lettertypen weer. Bestanden met een grootte van maximaal 360 x 275 pixels en de volgende formaten zijn geschikt om te uploaden: GIF, JPEG, TIFF, BMP. Soms kan het nodig zijn om de overeenkomstige tekens in de afbeelding in te voeren, omdat het systeem zelf ze niet altijd nauwkeurig kan identificeren.

Voor een betere herkenning van individuele karakters door het systeem, raden de ontwikkelaars aan om de volgende aanbevelingen op te volgen. Houd er rekening mee dat hoe kleiner het lettertype, hoe groter de kans op foutieve identificatie van de tekst. Optimaal voor het systeem is de grootte van een individueel teken binnen 100 pixels (een groter formaat verhoogt de zoektijd voor overeenkomsten). Natuurlijk, verwijzend naar de beperking van de afbeelding door de breedte, zal de afbeelding slechts 3-4 tekens bevatten, maar dit is voldoende om vergelijkbare lettertypen te definiëren. De service werkt met succes met kleurenafbeeldingen, maar een hoge nauwkeurigheid kan alleen worden bereikt op zwart-witafbeeldingen.

Na het laden van de afbeelding herkent de analysator de karakters.

Als je het lettertype nog steeds niet kunt bepalen, kun je de afbeelding naar het forum sturen, waar ze je altijd zullen helpen.

Er is één nadeel: er is geen ondersteuning voor Cyrillische lettertypen.

Er is nog een geweldige online service voor lettertypeherkenning - (Wat is lettertype)

Door een afbeelding naar deze site te uploaden, kunt u achterhalen met welk lettertype de tekst erop is geschreven. De database bevat voldoende Latijnse lettertypen, maar er zijn nog niet veel Cyrillische. De site biedt ook aan om een ​​aantal lettertypen gratis te downloaden.

Op de Whatfontis-service zijn er 3 manieren om erachter te komen welk lettertype is:

Pad 1

Laad in het eerste venster een grafische afbeelding met de inscriptie, klik op de knop Doorgaan. Er verschijnt een venster om uw afbeelding te herkennen en een veld voor het invoeren van een letter die de server kon herkennen. Hoe meer letters je invoert, hoe groter de kans dat je het gewenste lettertype vindt.

Helemaal aan het einde van de pagina zijn er drie zoekopties:

• Geef alleen gratis lettertypen of gratis alternatieve lettertypen weer
  (Toon alleen gratis lettertypen of alternatieve gratis lettertypen)
• Alleen commerciële lettertypen of commerciële alternatieve lettertypen weergeven
  (Toon alleen betaalde lettertypen of alternatieve commerciële lettertypen)
• Alle lettertypen weergeven
  (Toon alle lettertypen)

Pad 2
U kunt uw afbeelding met de tekst met het gewenste lettertype niet uploaden, maar het webadres van de afbeelding met het lettertype opgeven.

Pad 3
Zoek op naam. U kunt de naam van het lettertype invoeren en naar de tegenhangers zoeken.

Als je de basis van typografie al hebt geleerd en weet waar je de juiste lettertypen kunt vinden, dan is het tijd om vertrouwd te raken met de classificatie van lettertypen en hun typen. Tegenwoordig is er een vrij groot aantal van een grote verscheidenheid aan lettertypen. Ze kunnen zowel betaald als gratis zijn.

Basislettertypegroepen

Er zijn nu zoveel verschillende lettertypen. Ze hebben allemaal specifieke kenmerken, waardoor ze in groepen kunnen worden verdeeld:

schreef (geschreven)

Dergelijke lettertypen worden vaak gebruikt bij het afdrukken. De reden hiervoor is hun leesbaarheid, waardoor ze erg populair zijn. Dit type lettertype is aantrekkelijk vanwege de kleine lijntjes aan de uiteinden van de letters. Hij kreeg zijn aanvraag in boeken, verschillende tijdschriften en kranten. Op hun beurt helpen serif-lettertypen uw website een zekere elegantie te krijgen en het uiterlijk van uw webontwerp verfijnder te maken.

Slab serif (rechthoekige schreef)

Als u dit type lettertypen gebruikt, krijgt uw site een unieke look en voelt het heel stijlvol aan. Rechthoekige schreven zijn moeilijk te lezen en worden daarom niet aanbevolen voor gebruik in de tekst die u in de hoofdtekst van de site invult. Ze kunnen het best worden gebruikt bij het opmaken van koppen, waardoor ze een interessanter uiterlijk krijgen en ze visueel worden gescheiden van de hoofdtekst van de tekst.

Script

Deze lettertypen kunnen het beste worden gebruikt om de decoratieve elementen van uw ontwerpen aan te vullen. Wanneer u lettertypen in woorden gebruikt, wees dan extra voorzichtig wanneer u ze zowel in uw koppen als in de hoofdtekst van de site gebruikt, aangezien ze voor bezoekers vrij moeilijk te lezen zijn.

Blackletter (Gotisch)

Dit lettertype heeft een decoratief gevoel. Als je iets vintage aan je webdesign wilt toevoegen, is dit het lettertype dat je moet gebruiken. Vaak worden deze lettertypen door verschillende restaurants op hun borden gebruikt.

Sans serif (sans serif)

De letters zullen geen schreven hebben. Ze lijken veel op serif-lettertypen en zien er geweldig uit in de tekst van elke website of in koppen. Meestal worden ze op een computer gebruikt, omdat ze veel gemakkelijker te lezen zijn als het lettertype klein is. Met deze lettertypen kunt u uw project eenvoudiger en minimalistischer maken. San serif is verreweg het populairste lettertype dat ontwerpers gebruiken voor de tekst van artikelen die op hun websites worden geplaatst.

Handschrift (handgeschreven lettertype)

Met dit type lettertype ziet uw tekst eruit alsof iemand deze met zijn eigen handen heeft geschreven. Het kan dienen als een goede decoratieve toevoeging voor een webproject, wat het op zijn beurt uniek en onnavolgbaar maakt. Het is het beste om het lettertype alleen te gebruiken om de informatie te markeren waarop u de aandacht van de lezer wilt vestigen.

Decoratief (decoratief)

Deze lettertypen bevatten elk type leuk personage dat er is en zijn behoorlijk origineel. Een klein nadeel is dat ze erg moeilijk te lezen zijn. Als u wilt dat uw webproject een ongebruikelijk tekstontwerp heeft, kunt u ze veilig gebruiken.

Selectie en uitlijning van lettertypen

De verscheidenheid aan lettertypen is enorm, wat betekent dat er nog meer combinaties van hun combinaties zijn. Daarom duurt het kiezen van de juiste lettertypen erg lang. Dit is een nogal ingewikkeld proces waarbij je altijd moet uitgaan van de stijl van je internetproject en de voorkeuren van je bezoekers.

Eerst moet u aan het begin van dit proces beslissen over de keuze van het lettertype dat u in de tekst van de hoofdtekst van de site gaat gebruiken, het wordt ook het belangrijkste voor uw hele project. Vaak kiezen ze voor de hoofdtekst van de site een lettertype met of zonder schreef. Dit geeft u het vertrouwen dat uw site leesbaar zal zijn, en daarom moeten zoekopdrachten naar lettertypen direct in deze twee groepen worden gedaan.

Let erop dat het lettertype dat u kiest verschillende stijlen heeft. Hierdoor kunt u flexibeler zijn bij het gebruik ervan in uw webproject. Een goede manier om erachter te komen of een bepaald lettertype geschikt voor u is, is door het te testen op grote blokken zoals koppen, alinea's, enz.

Ten tweede moet u beslist een ander lettertype definiëren dat u in sommige van uw koppen zult gebruiken. Er zijn geen duidelijke regels voor een dergelijke keuze, maar ervaren ontwerpers raden aan een lettertype te kiezen dat zal verschillen van het hoofdlettertype dat u voor de hoofdtekst van de site gebruikt. Op deze manier kunt u de titels op uw site aantrekkelijker maken voor gebruikers. Het is beter om een ​​licht gewijzigd lettertype te gebruiken voor de hoofdtekst van de site, bijvoorbeeld door het vetgedrukt te maken.

Een goede manier om uw tekst op te maken, is door een groep serif-koplettertypen te mixen en matchen met de hoofdtekst van uw site, die schreefloos zal zijn. Doe dit experiment en je zult zien dat deze twee groepen heel harmonieus samenwerken om prachtige typografische ontwerpen te maken.

Ten derde, als u de aandacht van uw gebruikers wilt vestigen op enkele specifieke elementen van de tekst en deze beter zichtbaar wilt maken, moet u een ander lettertype aan het ontwerp toevoegen. Als dit het geval is, experimenteer dan met handgeschreven en decoratieve lettertypen, want dit zijn degenen die de aandacht trekken van uw websitebezoekers.

Lettertypen in tekst mixen en gebruiken

Laten we eens kijken naar verschillende principes van het combineren van lettertypen waarmee u een prachtig tekstontwerp kunt maken.

De site moet leesbaar zijn

Wanneer u een lettertype kiest voor de tekst van de hoofdtekst van de site of de kop, moet u er rekening mee houden dat het gemakkelijk te lezen moet zijn door de gebruiker. Natuurlijk hangt de leesbaarheid van sommige lettertypen rechtstreeks af van hun juiste instellingen: u moet ervoor zorgen dat de juiste lettergrootte, regelhoogte, kleur is geselecteerd. Voordat u lettertypen in uw webontwerp gebruikt, moet u testen hoe ze eruit zullen zien in verschillende kleuren. Zo weet je of een bepaalde kleur bij je past.

Er zijn een paar uitzonderingen op deze regel die u altijd in gedachten moet houden. Stel dat u bijvoorbeeld een webdesign ontwikkelt voor een internetproject voor kinderen en dat u een decoratief lettertype wilt gebruiken waar kinderen dol op zullen zijn. Probeer in dit geval een schreefloos en schreefloos lettertype te gebruiken. Deze regel moet worden gevolgd omdat uit onderzoek is gebleken dat deze lettertypen veel gemakkelijker te lezen zijn, dus het kiezen van decoratieve lettertypen zou in dit geval niet de beste optie zijn.

Gebruik niet veel verschillende lettertypen

Probeer bij het ontwerpen van een project niet een groot aantal lettertypen te gebruiken. De optimale hoeveelheid om te gebruiken is drie lettertypen. Hier zijn verschillende redenen voor:

Als u lettertypeservices gebruikt, helpt elk lettertype dat u toevoegt, de laadsnelheid van de pagina's van uw site te verhogen.

De aanwezigheid van meer lettertypen op sitepagina's leidt bezoekers af, waardoor ze moeilijker hun aandacht kunnen richten op het lezen van de inhoud.

Door niet meer dan drie lettertypen te gebruiken, bespaar je tijd, maar ziet de website er prima uit.

Gebruik geen ongepaste combinaties

Het combineren van meerdere lettertypen bij het schrijven van sitekoppen of het combineren van veel verschillende lettertypen is een heel slecht idee. Deze combinaties zijn riskant en kunnen u in veel problemen brengen.

Door de lettertypen op de Typekit-webservice te bekijken, kunt u de filters instellen die u nodig hebt om erachter te komen welke lettertypen het beste zijn voor koppen of alinea's, wat een zeer handig hulpmiddel zal zijn tijdens de ontwikkeling van het ontwerp.

Voorbeelden van het combineren van lettertypen

Neem als voorbeeld de pagina's van verschillende sites waar de lettertypen goed zijn gekozen.

Kopteksten:
Sentinel (serif plaat)

alinea's:
Gotham smal (sans-serif)

In deze voorbeelden kunnen we zien dat de koppen en subkoppen in serif-lettertype zijn. Het vormt een contrast met de hoofdtekst van de site en is een eenvoudig en gemakkelijk te lezen lettertype. Dit ontwerp is consistent. Je kunt er alleen veel mee bereiken door de kleur en de stijl te veranderen.

Koppen en alinea's:
Vrachttekst Pro (serif)

Rest:
Vracht Sans Pro (geschreven)

In dit voorbeeld kunnen we zien hoe slechts één lettertype wordt gebruikt voor koppen en alinea's. Het ziet er best cool uit omdat de koppen vet en groter zijn.

Hier zien we ook een schreefloos lettertype, dat de auteur gebruikt op de knoppen van de site en informatie over berichten.

Kopteksten:
PMN Caecilia (slab serif).

alinea's:
Gill Sans (sans-serif)

De ontwerpers van deze site hebben een zeer geavanceerd en mooi ontwerp voor hun webbron gemaakt. Er zijn hier geen irriterende stoffen en vetgedrukte lettertypen. Ze kozen voor een dun lettertype voor de koppen en een eenvoudig lettertype voor de hoofdtekst van de site.

Beide lettertypefamilies die op deze bron aanwezig zijn, hebben een uitstekende combinatie, waardoor de bezoeker alle tekst gemakkelijk kan lezen.

Koppen en alinea's:
Skolar (geschreven)

De ontwerpers van deze site gebruiken slechts één serif-lettertype. Maar ondanks zo'n buitengewone beslissing van specialisten, hebben kopjes en alinea's een zichtbaar verschil tussen hen. Dit komt allemaal doordat hier specifieke stijlen, kleuren en lettergroottes worden gebruikt.

Hallo, Haber!

Er zijn al bergen artikelen geschreven waarin verschillende aspecten van het werken met weblettertypen worden beschreven, er zijn veel werkvoorbeelden verzameld, maar elke dag worden we geconfronteerd met een elementair misverstand over wat weblettertypen zijn. Niet iedereen heeft tijd om materiaal over dit onderwerp te googlen, dus ik heb geprobeerd antwoorden te geven op veelgestelde vragen. Dit materiaal zal vooral interessant zijn voor diegenen die zich nog niet hebben verdiept in de fijne kneepjes van lettertypetechnologieën.

01. Waarom hebben we weblettertypen nodig, waarom geen standaardlettertypen?

Het eerste dat in je opkomt, is dat standaardlettertypen vreselijk saai zijn en dat het met hun hulp moeilijk is om iets origineels te doen. In de regel brengen de meeste van hen verdriet en ontmoediging, niet alleen voor gebruikers, maar ook voor webontwerpers. In dit geval zijn niet-standaard lettertypen expressiever en bovendien zijn er een orde van grootte meer, dus er is genoeg om uit te kiezen. En ook het lettertype is een integraal onderdeel van het merk, dus elk bedrijf streeft ernaar het actiever te gebruiken, aangezien zo'n technische mogelijkheid zich heeft voorgedaan.

En het zou mogelijk zijn om standaardlettertypen volledig te verlaten, vooral omdat veel mobiele besturingssystemen ze niet ondersteunen (bijvoorbeeld Arial, Taһoma, Verdana en Georgia). Maar helaas bleek de industrie, die zich al vele jaren aanpast aan 96 DPI-schermen en Georgia Verdans, nog niet helemaal klaar voor snelle veranderingen, en op oude Windows-besturingssystemen zijn er nog steeds problemen met het weergeven van niet-standaard lettertypen vanwege tot de eigenaardigheden van het rasteringsmechanisme.

02. Hoe kies ik een goed weblettertype?

Een lettertype is niet alleen een gedigitaliseerde set letters gemaakt met een penseel op papier of in een illustrator, het is ook 98% van het afwerken en polijsten, hinten en testen op verschillende media en in verschillende formaten. Zo'n lettertype ziet er goed uit, de stijl is geperfectioneerd, er zullen geen problemen mee zijn op de printer of op het scherm, het straalt een goede kwaliteit uit.

Bij het kiezen van een lettertype is het echter niet eens dat veel belangrijker, maar de geschiktheid en overeenstemming van het lettertype met de manier van gebruik en de taken die eraan zijn toegewezen. Als u met lettertypen werkt, je moet begrijpen hoe het allemaal werkt welke technologieën worden gebruikt. Dit zal je helpen om niet een heleboel onbegrijpelijke, uit het hoofd geleerde regels in je hoofd te houden, gevangen in flarden. Elke zichzelf respecterende drukker weet bijvoorbeeld waarom het onwenselijk is om TrueType-lettertypen in offsetdruk te gebruiken, welke lettertypen kunnen worden gebruikt als tekstlettertypen en welke alleen voor koppen of indexen. Als hij dit niet weet, zal hij een enorme oplage moeten herdrukken en op het werk zal hij voortdurend voor verrassingen en problemen staan. Het is verbazingwekkend waarom niemand eisen stelt aan webdesigners.

03. Hoe renderen browsers lettertypen?

Ik heb heel vaak gehoord dat browsers lettertypen zelf renderen, zodat ze er overal anders uitzien. Maar in feite is een speciaal grafisch subsysteem van het besturingssysteem betrokken bij het renderen van lettertypen: in Windows is dat zo GDI of DirectWrite, en op OS X en iOS - Kerntekst(en voorheen QuickDraw). In totaal zijn er 3 veelvoorkomende mechanismen voor lettertyperastering (rendering): tweekleurige (zwart-wit) pixel, monochrome pixel (het wordt ook vaak anti-aliasing of reguliere anti-aliasing genoemd) en subpixel. Subpixel gebruikt een functie van LCD- en plasmaschermen waarbij elke pixel is verdeeld in 3 delen (rood, groen en blauw) om de horizontale resolutie van het gerenderde beeld te verhogen en de helderheid te verbeteren.

Browsers kiezen echter wel hun eigen weergavemethode uit die van het besturingssysteem. GDI heeft bijvoorbeeld 3 weergave-opties: z / w, reguliere anti-aliasing en subpixel Neutraal type... De bijzonderheid van de laatste is dat anti-aliasing alleen horizontaal plaatsvindt, in overeenstemming met de locatie van de subpixels. Dit is de reden waarom we vaak vreselijke rafels in horizontale en diagonale lijnen zien bij gebruik. Gelukkig begon Microsoft het mechanisme langzaam te verbeteren en kwam de DirectWrite-technologie in de plaats van GDI, waar verticale anti-aliasing verscheen. Vergelijken:

04. TTF of OTF?

TrueType en PostScript waren oorspronkelijk verschillende lettertype-indelingen. TrueType gebruikt kwadratische Bézier-curven, terwijl PostScript kubische curven gebruikt die bekend zijn bij ontwerpers die in Illustrator en Photoshop werken. Tegenwoordig worden beide manieren om curven te beschrijven gebruikt als onderdeel van hetzelfde OpenType-formaat, met het enige verschil dat bestanden met TrueType de TTF-extensie hebben, en met PostScript - OTF. Elk van de technologieën heeft zijn eigen hintkenmerken en specifieke toepassing.

Kijk naar de foto. Als een TrueType-lettertype in klein formaat veel beter leesbaar is, maar bij een groot formaat we karakteristieke tanden zien, dan is bij een PostScript-lettertype alles precies het tegenovergestelde. Dit komt omdat browsers verschillende rastermethoden voor PS en TT kiezen. Voor PS paste de browser de gebruikelijke monochrome anti-aliasing toe en werd TT verwerkt door ClearType. Het blijkt dus dat TrueType de voorkeur heeft voor tekstlettertypen en PostScript beter is voor koppen en grote labels.

We zien ook dat nog niet alle browsers DirectWrite gebruiken. Het staat dus nog steeds niet in Google Chrome.

05. Wat heeft nog meer invloed op het display?

Soms is het beter om de rastermethode handmatig in te stellen. In browsers met de Webkit-engine kunt u bijvoorbeeld de CSS-eigenschap gebruiken - webkit-font-smoothing en handmatig normale anti-aliasing inschakelen in plaats van subpixel-anti-aliasing, en vice versa. Er zijn ook niet-triviale manieren om de browser de rasteringsmethode te laten wijzigen; Habré stelde ooit voor om een ​​hack met tekstschaduw te gebruiken.

Vergeet de lettergrootte niet. Omtrekvorm, lijncontrast en leesbaarheid kunnen sterk variëren van maat tot maat. Leg je grafische editor aan de kant en kijk hoe een weblettertype eruitziet in een browser, onder gevechtsomstandigheden.

Een andere manier om de onvolkomenheden van anti-aliasing glad te strijken, is met kleur- en contrastbeheer. Om het chromatische contoureffect te verminderen (gele en magenta contouren verschijnen rond de randen bij gebruik van ClearType), kunt u proberen het tooncontrast te verminderen door de achtergrondkleur dichter bij de tekstkleur te brengen. Laat je niet te veel meeslepen, denk aan de visueel gehandicapte gebruikers.

06. Hebben weblettertypen hints nodig?

Hints zijn speciale instructies die abstracte lettertypecurven strak binden aan pixels op de monitor. De overgrote meerderheid van lettertypen (inclusief commerciële) wordt niet gesuggereerd, omdat dit een nogal tijdrovende en gecompliceerde procedure is. Hints worden anders gedaan voor TrueType en PostScript. Als u een goedkoop lettertype neemt, is het OTF-formaat veiliger, omdat in TT de procedure onveranderd is gebleven sinds de dagen van zwart-witrastering en niet helemaal adequaat is, maar voor PS is de procedure eenvoudiger en heeft de auteur de mogelijkheid om automatische hints doen.

Lettertype zonder hints wordt wazig wanneer gerasterd, en de hoogte van letters kan verspringen.

Aan de ene kant is het hintende lettertype vrij duidelijk, contrasterend en gelijkmatig, en aan de andere kant zijn de lettervormen vervormd, afhankelijk van de grootte, en de spatiëring kan verschillen van de echte. De letters gehoorzamen strikt aan de pixels.

In Windows zien we misschien de meest radicale benadering: populaire lettertypen als Tahoma, Verdana, Arial en Georgia werden specifiek voor GDI ClearType gesuggereerd, en toen DirectWrite verscheen, moesten de belangrijkste lettertypen in de OS-set opnieuw worden gehint en bijgewerkt.

In tegenstelling tot Microsoft houdt Apple zich aan de tegenovergestelde benadering, daarom gebruiken zijn besturingssystemen algoritmen die min of meer hoogwaardige uitvoer van elk lettertype mogelijk maken, en er wordt helemaal geen rekening gehouden met hints.

De vraag beantwoorden: het tijdperk van 300 DPI-monitoren nadert snel en een groot aantal mobiele apparaten hebben al zo'n resolutie, en binnenkort is een hint helemaal niet nodig. Maar aangezien Windows nog steeds afhankelijk is van hints en gericht is op monitoren met een lage resolutie, moet u proberen hoogwaardige hints of standaardlettertypen als tekstlettertypen te kiezen, anders wordt de tekst onleesbaar en moeilijk leesbaar.

07. @ font-face of Cufon?

Hoe vreemd het ook mag klinken, er zijn nog steeds mensen die zich deze vraag stellen. Het lijkt erop dat nadat browsers het attribuut @ font-face begonnen te ondersteunen, alle andere technologieën voor het insluiten van lettertypen (Cufon, sIFR, Flash) irrelevant zouden zijn geworden. Maar er blijft nog enige betekenis over, bijvoorbeeld een manier om het lettertype te vervangen door een afbeelding, wanneer er geen vectorcurven op de site worden weergegeven, maar alleen een afdruk, hoe een printer het op een vel afdrukt of Photoshop een niet-bewerkbare JPG weergeeft. Dit wordt toegestaan ​​door veel gangbare (desktop) fontlicenties. Sommige lettertypefabrikanten (bijv. Adobe) staan ​​het insluiten (in programma's en op de server) toe van een desktoplettertype als het beveiligd blijft en niet kan worden gedownload. Als u niet de mogelijkheid heeft om een ​​aparte weblicentie te kopen, kunt u een geschikte sIFR toepassen wanneer het lettertype is ingesloten met behulp van flash-objecten. Het nadeel is dat er gebruik wordt gemaakt van Flash, wat niet door alle apparaten wordt ondersteund. U kunt ook de Cufon-technologie gebruiken (Canvas wordt gebruikt), als de licentie dit toestaat. In dit geval zal het script natuurlijk omslachtig zijn en zal tekstselectie niet werken, maar in een hopeloze situatie zal het dat wel doen.

Maar het is het beste om @ font-face te gebruiken, het is zowel technologisch geavanceerder als handiger, bovendien is er voldoende ervaring opgedaan om ermee te werken. Het enige nadeel is dat niet alle fabrikanten toestaan ​​dat hun lettertypen op internet worden gebruikt.

08. Welke formaten moeten de lettertypebestanden hebben?

Lettertypen die zijn voorbereid voor insluiting (@ font-face) op een website van vandaag moeten in verschillende formaten tegelijk zijn:

TTF of OTF- een voor ons bekend lettertypebestand, maar gedownload van de server tijdens het browsen op de site;
WOFF- onbeschermd bronarchief OTF of TTF, misschien wel het belangrijkste formaat dat de meeste populaire browsers ondersteunen, en bestanden in WOFF zijn meestal 2-2,5 keer lichter dan het origineel;
EOT- het geïmplementeerde TT OpenType-archief met beveiligingsmechanismen is nodig om oude Internet Explorer-browsers te ondersteunen (vanaf IE8 wordt naast TrueType-curven ook PostScript ondersteund);
SVG- om de Safari-browser te ondersteunen.

09. Is het mogelijk om webfonts te converteren?

Wat je ook wordt verteld, je kunt het bestand niet zomaar converteren en de oorspronkelijke kwaliteit van het lettertype behouden, vooral als het oorspronkelijk in OpenType-indeling was. Tijdens het proces bestaat de kans dat sommige gegevens verloren gaan die zijn ingesloten in het lettertypebestand (gecompileerde instructies, extra tekens, statistieken). U zult dit merken wanneer het bestand onverwacht "dun" is bij het converteren, vooral niet-koosjer het converteren van TrueType naar PostScript en vice versa.

Bovendien is het conversieproces bijna altijd in tegenspraak met de voorwaarden van een licentie die wijziging verbiedt. Simpel gezegd - dit is dezelfde diefstal. Wanneer u bestanden uploadt naar de converter, zorg er dan voor dat deze ze niet zal missen en een waarschuwing zal geven, omdat het bestand de digitale handtekeningen van de fabrikant en de bijbehorende verbodsbepalingen bevat.

10. Hoeveel moeten weblettertypen wegen?

De browser moet de lettertypebestanden volledig downloaden voordat de pagina wordt weergegeven. Je hebt misschien het "font flash" (of FOUT) effect gezien, wanneer voor een kort moment, in plaats van exotische lettertypen, de standaard lettertypen van het systeem knipperen. Het is oké als TTF (OTF) in 100 kb past en WOFF (EOT) in 50 kb. Bedenk altijd of je überhaupt niet-standaard fonts moet gebruiken, ook als je het in 1 korte titel gebruikt moet je toch het hele fontbestand in zijn geheel downloaden.
Hoe meer perfectionisme in het ontwerp, hoe minder de lettertypebestanden kunnen wegen en probeer eenvoudige vormen te kiezen. In die zin is de ideale vorm een ​​open geometrische schreefloze letter met weinig contrast. Om het laden van een font te versnellen kan het ook handig zijn om het in de stylesheet op te nemen met data: uri.

11. Hoeveel lettertypen kun je op internet gebruiken?

Vanuit het oogpunt van een ontwerper zijn veel stijlen cool. Inderdaad, voor de kop - Vet, en daar, voor de invoeging - ExtraLight, zullen we over het algemeen onnodige teksten pushen en in Condensed Bold drukken. Hier is het - echte rijkdom en stilistische diversiteit. Maar wanneer al deze "rijkdom" naar de site wordt overgebracht, blijkt dat alles vreselijk traag is. En het is beter om niet eens te proberen zo'n site vanaf een mobiel apparaat te openen. En vergeet ook niet dat elk lettertype apart geld kost, en het is waarschijnlijk dat de klant u zal vragen om ofwel een synoniem voor een lettertype te zoeken, of om het aantal stijlen te verminderen, alleen om niet het hele dure lettertype te kopen. Het is normaal om maximaal 2-3 stijlen van hetzelfde of verschillende lettertypen te gebruiken.

12. Moet ik de tekenset beperken?

Het antwoord op deze vraag hangt af van wat voor soort site het is en hoe deze zal worden gebruikt. Limieten kunnen handig zijn omdat het mogelijk is om de grootte van de bestanden aanzienlijk te verkleinen. Soms, vanwege onwetendheid, uploaden ontwikkelaars zware lettertypebestanden met de volledige set tekens naar de site, en het is goed als er geen hiërogliefen zijn (let op, het Arial Unicode-lettertype met de meeste tekens uit de Unicode-tabel weegt 22 mb) .

Voor degenen die Engelstalige sites op de gemakkelijkste manier maken, hoeven ze helemaal geen extra tekens te laden, die in Basic Latin (of ASCII) zijn voldoende. Als u een lettertype alleen gebruikt voor koppen in het Russisch + afgewisseld met Engels, dan zijn de ASCII-sets (Basic Latin) en 64 tekens van het Russische alfabet voldoende voor u, het is helemaal niet nodig om de Cyrillic Extended-set van 420 te laden karakters. Het is een heel ander verhaal, als uw site meertalig is, in dit geval, om een ​​onjuiste weergave van tekens te voorkomen, moet u proberen alle gebruikte talen te dekken.

13. Kunnen lettertypeklonen worden gebruikt?

Het komt voor dat het te duur of onmogelijk is om een ​​origineel lettertype te kopen, dan is het aangewezen om een ​​lettertype-synoniem (kloon) te kiezen. Je moet natuurlijk geen geweldige kwaliteit van ze verwachten, ook al zijn ze bijvoorbeeld gemaakt door een gerenommeerd Russisch bedrijf. Het is allemaal erg als je het werk tegenkomt van een geletterde anonieme auteur die besloot zichzelf in een nieuw veld te testen, pas op voor dergelijke lettertypen. Hier zijn voorbeelden van klonen (het origineel staat tussen haakjes): FreeSet (Frutiger), Pragmatica en Helios (Helvetica). Houd er rekening mee dat de vorm van de letters kan variëren. Een groot aantal klonen bevindt zich in de map Paratype-lettertypesynoniemen.

14. Hoe test ik een lettertype?

Ontwerpers, wen er niet aan om lettertypen alleen via Photoshop-vensters te zien, afbeeldingseditors gebruiken hun eigen anti-aliasing-technieken en u kunt voor de gek worden gehouden door een mooie afbeelding. Het is veel nuttiger om te leren hoe u ze in browsers kunt testen en bekijken. Als je een demopagina hebt, zorg er dan voor dat er tijdens het renderen niet allerlei artefacten en pieken naar buiten komen. Er is ook zo'n tool als Typecast, waar je veel lettertypen kunt controleren en de pagina vervolgens aan de klant kunt laten zien. Voor degenen die een nieuw lettertype kiezen voor een kant-en-klare site - de onmisbare service voor u Web Fonts Previewer, u kunt elk lettertype testen op een live werkende site, alsof u het al hebt geïmplementeerd.

15. Ik heb een lettertype op mijn computer, kan ik dat op de site gebruiken?

Eerst iets over diefstal. Ik ken veel ontwerpers die duizenden lettertypen op hun computers hebben staan ​​waarvan de oorsprong onbekend is. In de regel zijn ze gewoon van internet gedownload. Maar om de een of andere reden denkt niemand dat het maken van goede lettertypen maanden en soms jaren serieus werk kost! Maar niet alleen om deze reden kunt u geen nep gebruiken, het is niet duidelijk waar de lettertypen vandaan komen, maar ook omdat u in de ontwikkelingsfase ernstige problemen kunt ondervinden.

Als u een lettertype dat bij het besturingssysteem wordt geleverd in de site wilt insluiten, kunt u dit alleen doen door het te rasteren of in afbeeldingen te gebruiken. Als je echt moet insluiten, moet je een aparte licentie kopen, net als gewone lettertypen (zowel Georgia als Tahoma zijn in de handel verkrijgbaar).

16. Hoe koop ik een weblettertype?

Wanneer u "een lettertype koopt", komt dit het dichtst in de buurt van het kopen van software, wanneer u een licentie krijgt om het te gebruiken, niet de rechten op het programmabestand zelf. Het blijkt dat het legaal gecompileerde fontbestand een programma is. Wijziging en wijziging, indien niet toegestaan ​​door de licentie, worden beschouwd als inbreuk op het auteursrecht.

Een handige manier om lettertypen te kopen is via lettertypecatalogi (Fonts.com, MyFonts, Ascender, Typekit). U kunt een van de beschikbare use-cases bekijken, vergelijken en kiezen, betalen met de kaart. Voor bedrijven is het het gemakkelijkst om rechtstreeks contact op te nemen met de productiestudio of de aankoop van lettertypen aan de klant te bezorgen.

Of is het misschien beter om helemaal geen geld uit te geven aan type? Er zijn talloze geweldige gratis lettertypen die net zo goed zijn als de betaalde!

17. Wat zijn de licenties?

Er zijn verschillende soorten lettertypelicenties en met de komst van weblettertypen is de variëteit alleen maar groter geworden. In het echte leven bepaalt elk bedrijf zelf de spelregels en een lettertypelicentie kan kenmerken van verschillende andere bevatten. We zullen geïnteresseerd zijn in het typische.

De algemene commerciële licentie beperkt het gebruik op een bepaald aantal apparaten en staat distributie toe van werken die met het lettertype zijn gemaakt. Dit kunnen tijdschriften, kranten, folders, visitekaartjes, gerasterde afbeeldingen van het lettertype zijn - samen kun je ze afdrukken noemen. Deze licentie is niet geschikt voor film, televisie, web en inbedding in applicaties en programma's, dergelijke rechten moeten apart worden ingewisseld.

Er zijn ook specifieke licenties, bijvoorbeeld: een exclusieve licentie. In dit geval koopt het bedrijf alle rechten van de ontwerpers van lettertypen, en zelfs de auteur van het lettertype heeft niet het recht om het overal te gebruiken. Het is vooral verrassend wanneer dergelijke lettertypen op torrents staan, of wanneer sommige externe ontwerpers ze gebruiken.

Gratis licenties (publiek domein) - de auteur van het lettertype staat gratis distributie toe, op voorwaarde dat zijn naam wordt vermeld (Creative Commons) of zonder (bijvoorbeeld OFL, GPL, Apache 2.0). Dit type licentie staat zelfs commercieel gebruik toe, behalve voor verkoop en betaalde distributie. Voorbeelden: PT Sans, Opensans, Droid. Het wijzigen van lettertypen (GPL) is soms toegestaan, maar de wijziging die u maakt, erft automatisch dezelfde licentie (dat wil zeggen dat u ook een fork kunt worden). Freedom gaat ervan uit dat het op alle media kan worden gebruikt, incl. en internet.
Gratis voor niet-commercieel gebruik - dat wil zeggen, u kunt het gebruiken wanneer u er geen geld mee verdient. Laten we zeggen voor opleiding, hobby's en gemeenschapsprojecten. Af en toe staan ​​fabrikanten het gebruik ervan toe aan ontwerpers in de hoop dat de tevreden klant van de ontwerper dan een commerciële versie van het lettertype zal kopen.

18. Wat is het verschil tussen weblettertypelicenties?

De weblicenties zijn onze favorieten, ze zijn ofwel een aanvulling op de hoofdlicentie of worden apart gegeven. Regelt een speciaal geval - het gebruik van lettertypen op sites. Meestal is de belangrijkste beperking het aantal paginaweergaven. Bijvoorbeeld 10 duizend per maand, 100 duizend of 1 miljoen. Dat wil zeggen, hoe meer mensen uw site bezoeken, hoe meer u betaalt voor een licentie. Er zijn ook onbeperkte mogelijkheden wanneer je 1 keer voor een font betaalt, maar die zijn vele malen duurder. Waarschijnlijk vroeg je je af of iemand het aantal views in de gaten houdt? Vaker wel dan niet, nee. Maar vergeet niet dat een groot aantal tellers het verkeer van uw site bijhoudt en dat u, door de argwaan van de verkoper te wekken, uw licentie kunt verliezen.

Ook staat de standalone weblicentie het gebruik op gewone computers niet toe. Soms wordt een weblicentie gratis verstrekt, dat wil zeggen dat u, samen met de aankoop van een desktoplettertype, het recht krijgt om de webversie ervan te gebruiken. Maar dit is nog steeds een zeldzaamheid, de overgrote meerderheid van fabrikanten vraagt ​​een extra vergoeding.

Na de aankoop ontvangt u speciale bestanden die u in de site insluit (TTF, OTF, WOFF, EOT), en sommige lettertypen staan ​​het niet toe deze bestanden in een onbeschermde vorm op de site te plaatsen, aangezien in theorie derden de lettertypebestanden zelf. De derde optie is om een ​​speciale webservice van een lettertypefabrikant te gebruiken, zoals Adobe's Typekit, en abonnementskosten te betalen.

19. Waar kan ik goede weblettertypen krijgen?

Directory met gratis lettertypen van Google
Fontsquirrel is een gerenommeerde weblettertypeconverter en directory
Myfonts is een enorme fontwinkel met een handig betalingssysteem
Fonts.com is de belangrijkste concurrent van MyFonts
Typekit - een service voor het huren van lettertypen van Adobe
Typecast is de bovengenoemde winkel met een testservice
PS Een andere nuttige bron die Ilyaerin adviseerde, WebFont.ru Functionaliteit is belangrijker dan vorm: ontwerpen voor de lezer
Maria Doreuli. Licentieverlening. Om het duidelijk te maken
Tim Bruin. Typ weergave op het web
Tim Bruin. CSS-eigenschappen die van invloed zijn op typerendering
Tim Bruin. Typeweergave: besturingssystemen
Tim Ahrens. Een nadere blik op lettertypeweergave
Tim Ahrens (Typekit). TrueType-hints nader bekeken
De voordelen van OpenType / CFF boven TrueType

Ildar Kinyabulatov, webdesigner ADV / web-engineering

Het lettertype is belangrijk. Als lucht die je niet opmerkt terwijl alles in orde is. De meeste mensen hebben geen idee hoe lettertypen heten of hoe ze van elkaar verschillen (wat prima is), maar ze hebben onmiskenbaar het gevoel dat er iets mis is met je site als het lettertype dat je gebruikt niet bij je project past.

Wat is lettergewicht

leesbaarheid van lettertype

Welk lettertype u ook kiest, het moet goed leesbaar zijn. Zeker als je een achtergrondfoto gebruikt. Als je op een foto met kleine details een dun lettertype aanbrengt, is de tekst niet leesbaar. Let hier altijd op.

Wat gedaan kan worden? Gebruik eerst een foto die geschikt is voor de achtergrond: met grote, uniforme elementen. Ten tweede, demp de foto met een filter, hij wordt vloeiender en de tekst leest beter. Ten derde is het mogelijk om de verzadiging van een bepaald blok te vergroten door de "inline stijl" toe te passen. Dit betekent dat je niet de instellingen voor de hele site instelt, maar alleen voor een deel van de tekst. U moet de tekst selecteren en de parameters instellen via de editor.

Een stijl die op deze manier wordt toegepast, bovenop de globale instellingen, heeft altijd voorrang. Daarom, als u plotseling de parameters in de site-instellingen wijzigt en de wijzigingen niet zichtbaar zijn, wordt de "inline-stijl" op deze plaats toegepast. Om het te verwijderen, moet u de tekst selecteren en op het pictogram "wissen" klikken.

Voorbeeld 1: De tekst is niet erg leesbaar

Voorbeeld 2: De tekst leest goed

Als het onderwerp van het kiezen van een lettertype u interesseert, zoek dan goede sites in de buurt van uw project en kijk welke lettertypen ze gebruiken. De browserextensie What Font helpt u dit te bepalen.

U kunt ook het Independent Typography Archive bekijken op http://fontsinuse.com/, een bron die voorbeelden van websites verzamelt en sorteert en afdrukt op het type lettertype dat wordt gebruikt.