Hoe web fonts webdesign veranderden

Web fonts, waar moet je opletten

En hoe web fonts webdesign op zijn kop zetten

Web fonts, waar moet je opletten

En hoe web fonts webdesign op zijn kop zetten

Web fonts?

In de beginjaren van de websites had je weinig keuze in het lettertype dat je op je website wilde gebruiken. Het moest een systeem font (lettertype dat op het systeem van de bezoeker geïnstalleerd was) zijn, dan kwam je uit op Arial, Sans Serif en Helvetica. Ook had je weinig tot geen invloed op de kleur en grootte van de letters. Je kon titels aanduiden met speciale codes waarmee de browser deze teksten in vette letters met een bepaalde grote weergaven.

Vandaag de dag is de techniek gelukkig een heel stuk verder en kunnen we webfonts gebruiken. Google starten in 2010 zijn online lettertype bibliotheek Google fonts waar inmiddels honderden fonts (lettertypes) vrij te gebruiken zijn. Ook de kleur, grootte, dikte etc. kunnen we nu zelf bepalen. Je kunt nu titels bijvoorbeeld ook in een slanke vorm van een lettertype gebruiken, de kleur aanpassen en hem schuin zetten (italic).

Door webfonts is de wereld van websites dus echt op zijn kop gezet en kun je jouw website eruit laten springen door een niet standaard lettertype te gebruiken.

Waar moet je op letten

Dat er zoveel keuze is, wil niet zeggen dan elk lettertype geschikt is om te gebruiken. Let vooral bij de lopende teksten erop dat er ook bezoekers zijn die niet goed kunnen zien of lezen. Gebruik daarom altijd lettertypes die goed te lezen zijn, dus geen schrijfletters. Arial is bijvoorbeeld speciaal ontworpen zodat mensen met dyslectie deze goed kunnen lezen. Dit soort lettertypes wordt aangeduid met Sans Serif of Serif, als je binnen Google fonts hiernaar zoekt krijg je allemaal goed leesbare lettertypes.

Voor titles kun je wel “minder” goed leesbare lettertypes gebruiken, deze zijn vaak kort en groter dan de lopende teksten. Hierdoor zijn ze al makkelijker te lezen en is het niet erg, maar neem geen lettertype waarbij je zelf al goed moet kijken wat er staat! En probeer zo dicht mogelijk, het liefst helemaal, bij je eigen huisstijl te blijven.

Voorbeeld van een slecht web font voor lopende tekst:

Dit is een schrijfletter en is voor veel mensen niet goed en makkelijk te lezen, het lezen op een scherm is voor ogen sowieso al lastiger dan het lezen op papier.

Vertaling:
Dit is een schrijfletter en is voor veel mensen niet goed en makkelijk te lezen, het lezen op een scherm is voor ogen sowieso al lastiger dan het lezen op papier.

Hebben Webfonts ook nadelen?

Ja, natuurlijk. Bijvoorbeeld zal het bestandje van een web font naar het apparaat gedownload moeten worden voor de gebruiker hem kan lezen. Dit zijn vaak kleine bestanden die met de snelheid van het tegenwoordige internet geen probleem moeten zijn. Bezoekers kunnen ervoor gekozen hebben deze web fonts te blokkeren, dan krijgen ze de teksten in een standaard lettertype te zien. Hier doe je uiteraard niets aan en de bezoeker zal ook een goede reden hebben om webfonts te blokkeren. Bijvoorbeeld iemand die blind of slechtziend is heeft er niets aan, die laat de tekst voorlezen door de browser, en hoe de tekst eruit ziet maakt voor hun niets uit.

Gebruiksrechten

Na de begin jaren kon je ook zelf bepalen welke lettertypes je gebruikte. Je kon een bestand van een lettertype uploaden bij je website en in de code aangeven dat de browser dat lettertype moest gebruiken. Nadeel hiervan was dat veel mensen lettertypes gingen uploaden waar een licentie op zit. Die licenties zijn niet voor het online gebruik en er zitten dus wat regels aan. Maar doordat het wel werd gedaan konden ontwerpers deze lettertypes ook gaan gebruiken, ze staan immers op een server en met de juiste kennis kunnen ze dus gedownload worden.

Web fonts en WebBloxz

De web fonts die je in Google fonts tegenkomt zijn allemaal rechtenvrij en vrij te gebruiken op je website. Maar ook ontwerpers mogen ze gebruiken bij het ontwerpen van logo’s of andere zaken. Vroeger kosten het ontwerpen van een lettertype veel tijd en dus veel geld, tegenwoordig is het veel makkelijk om een lettertype te maken. Je ziet nu dat alleen hele grote bedrijven een eigen lettertype laten ontwerpen om onderscheidend te zijn.

In WebBloxz kun je heel makkelijk elke lettertype uit Google fonts gebruiken, je kan ook makkelijk zoeken en selecteren. Daarna de kleur, grootte of vetheid bepalen, onderstrepen of schuin zetten. WebBloxz past zijn code aan naar jouw wensen.

Zoals onze pay-off al zegt: Gemaakt voor jouw gemak.

Waarom ziet mijn website er niet op elke browser hetzelfde uit?

Logo's van verschillende browsers, Chrome, Safari, Firefox, Edge en Opera
22 mei 2019

Browsers werken niet allemaal op dezelfde manier en interpreteren de code soms net iets anders dan een andere browser. De basis geven ze allemaal hetzelfde weer, het zijn vaak de kleine dingen die anders kunnen zijn.

Web fonts, waar moet je opletten

Hoe web fonts webdesign veranderden
16 mei 2019

In de beginjaren van de websites had je weinig keuze in het lettertype dat je op je website wilde gebruiken. Het moest een systeem font zijn, dan kwam je uit op Arial, Sans Serif en Helvetica.

Wat is een SSL Certificaat en moet mijn website er een hebben?

Wat is een SSL Certificaat en waarom moet mijn website die hebben?
09 mei 2019

ls je het met ondernemers hebt over de veiligheid van hun website reageren ze vaak dat hun website toch niet interessant is voor hackers of er geen misbruik gemaakt wordt van hun website.

Webshop of winkelwagentje?

webshop of winkelmandje? Gestapelde dozen
02 mei 2019

Stel je bent een ondernemer, je hebt een mooie goede website maar je wilt een ook wat diensten of producten gaan verkopen via je website. Bijvoorbeeld een coach zou workshops willen verkopen.

Wat is een responsive website?

De website van Beljaars verzekeringen op verschillende apparaten
23 april 2019

Responsive website wil eigenlijk zeggen dat de website zich aanpast aan het scherm waarop hij bekeken wordt. Hierdoor heeft de bezoeker een betere ervaring op jouw website dit kan op een desktop, tablet of mobiele telefoon zijn.

Wat is een XML sitemap en wat doet het?

Afbeelding van hoe een XML sitemap werkt
19 april 2019

Een XML sitemap is bij zoekmachine optimalisatie een belangrijk hulpmiddel. Een xml-sitemap is een XML bestand dat speciaal gemaakt is voor de zoekmachines en ook alleen gebruikt wordt door de zoekmachines.

Cookies, hoe zit het daar nu mee?

Cookies, hoe zit het daar nu mee?
10 april 2019

Cookies, hoe zit het daar nu mee? Wanneer moet je toestemming vragen om cookies te mogen gebruiken en wanneer moet je een melding doen dat je cookies gebruikt?

Waarom is het belangrijk een titel en een alt tekst in te vullen bij afbeeldingen?

Waarom is het belangrijk een titel en een alt tekst in te vullen bij afbeeldingen (1)
04 april 2019

Om te beginnen is het voor zoekmachines en dus de vindbaarheid van je website belangrijk dat je de alt tekst en de titel van je afbeeldingen invult. Deze worden geïndexeerd ...

GIF, PNG, JPEG of SVG welke kun je hebt beste gebruiken?

GIF, PNG, JPEG of SVG welke kun je hebt beste gebruiken en wat is het verschil?
27 maart 2019

In de loop der jaren zijn er heel wat veranderingen geweest in de wereld van websites. Kon je vroeger alleen jpg en gif (die je dan ook nog kon animeren) bestanden gebruiken in je website, tegenwoordig zijn er ook PNG en SVG bestanden bij gekomen.

Wat als er updates van mijn website fout gaan?

Wat als er updates van mijn website fout gaan
19 maart 2019

Is jouw website gemaakt in een van de vele “Open source” systemen zoals Wordpress, Joombla of Drupal? Dan ben je bekend met de, met name bij Wordpress, vele updates. Deze moet je bij (laten) houden om de lekken voor hackers (link naar blog over hackers) te dichten en om nieuwe versies van je plugins te installeren.

Wat is hacken en wat doe je er tegen?

Wat is hacken?
14 maart 2019

Een hacker, ook wel kraker of cracker genoemd, is een persoon die binnendringt in een computernetwerk door de beveiliging te omzeilen. Niet altijd met de bedoeling om illegaal informatie toe te eigenen, maar veelal om aan te tonen dat het netwerk onvoldoende beveiligd is.

Logo WebBloxz

Gemaakt voor jouw gemak

Facebook logo
Instagram logo
Youtube logo
Google plus