Typografie in webdesign; de 7 mooiste voorbeelden

Grafisch ontwerp Geplaatst op: 24 februari 2019, aangepast op: 22 mei 2024

In dit artikel een aantal voorbeelden waarbij de typografie prachtig is verwerkt in de website.

Websites typography header 15837

Typografie is de kunst van het vormgeven van tekst. Uiteraard is het heel belangrijk om de tekst op je website goed leesbaar te maken, maar het kan ook prima gebruikt worden om je website te laten op vallen of de typografie als verlengde van je branding in te zetten. In dit artikel zeven prachtige voorbeelden van hoe typografie op een prachtige manier wordt ingezet.

Nick sigler 27998

Nick Sigler

Nick Sigler is een designer welke het liefst werkt aan mobiele (web)applicaties en probeert hiermee eenvoudige ervaringen aan te bieden.

Ook zijn website doet minimalistisch aan: de homepage bestaat uit twee kolommen met weinig poespas. Het gekozen lettertype valt wel direct op, dit is een klassiek lettertype met grote serifs en ornamenten.

Deze past goed bij het lettertype wat over de gehele website wordt gebruikt als body text: een strak, minimalistisch font. Dit lettertype wordt in verschillende groottes en diktes gebruikt om hiërarchie aan te geven. De website van Nick laat direct zien dat voor een mooie website weinig nodig is!

The black sheep agency 15444

The Black Sheep Agency

The Black Sheep Agency is een webbureau dat zich voornamelijk bezig houdt met PR en marketing. Dit doen ze vooral voor non-profitorganisaties en overheden. Tot de klanten van The Black Sheep Agency behoren bijvoorbeeld het Witte Huis en de stad Houston in Texas.

De levensgrote letters vallen direct in het oog. De dikke, hoekige hoofdletters hebben een stoere uitstraling. De ruige look wordt afgemaakt door het donkere kleurenpalet van zwart, donkergrijs en bruin en de grungy details.

Bureau of works 8492

Bureau of Works

Bureau of Works is een onafhankelijk productiebedrijf dat kunstenaars ondersteunt met strategische kansen. Zo helpen ze kunstenaars met het maken van nieuw werk en faciliteren ze samenwerking.

Ook op deze website zijn er gigantisch grote letters gebruikt: dit keer in een monospace-lettertype, waarvan alle tekens even breed zijn. Dit lettertype geeft de website een moderne uitstraling, die bijna futuristisch aandoet.

In combinatie met het beperkte aantal kleuren (er wordt alleen maar rood en wit gebruikt) en het vele witruimte doet de website heel erg minimalistisch aan.

De zwart-wit foto's die met een rood filter zijn bewerkt helpen mee aan de eenvoudige uitstraling. De grote teksten die buiten het grid worden geplaatst geven de website de nodige afwisseling.

Du haihang 96546

Du Haihang

Du Haihang is een designer en developer die nu in California woont en 8 jaar in Shanghai heeft gewoond.

Zijn website laat zien dat typografie niet altijd in dienst hoeft te zijn van goede leesbaarheid. Achter de tekst is namelijk een animatie te zien welke de website een mysterieuze, bijna hypnotiserende, uitstraling geeft. Ook vervormt de tekst als er gescrollt wordt, hierdoor lijkt het net of deze af het scherm afdruipt.

Het kleurenpalet wat slechts uit tinten grijs bestaat voegt toe aan het mysterieuze karakter. De tekst is door de eerdergenoemde effecten wel minder goed leesbaar, maar ze geven de website net dat beetje extra.

Amazee labs 53002

Amazee Labs

Die tekst in de headerafbeelding is gewoonweg fantastisch. Hij lijkt wel met de hand uit tape opgebouwd en met de hand gemaakt.

De letters komen iets later op de homepage nog eens terug in het geel. Ook het logo van het webbureau is met aandacht vormgegeven.

Sally bliumis dunn 72139

Sally Bliumis-Dunn

Sally geeft les in moderne poëzie en creatief schrijven aan Manhattanville College, een vrije-kunst universiteit in New York. Haar website is een verzameling van haar werk, en op de homepage is prominent een stuk uit één van haar gedichten te zien. Haar persoonlijke portfolio leent zich hier perfect voor, en toont naast haar werk, niets anders.

Typografie website storytel 54138

Storytel

Met Storytel kun je onbeperkt luisterboeken en ebooks beluisteren en lezen. Met de app kan er eenvoudig door de titels gebladerd worden.

Op de website worden twee lettertypes gebruikt in verschillende diktes. Het dikgedrukte, serif lettertype heeft een klassieke uitstraling en past goed bij de dunnere, moderne variant.

De combinatie met de donkere foto op de achtergrond van de header en het oranje en veel witruimte geeft de website een simpele maar effectieve uistraling.

Meer typografie voorbeelden

In dit artikel hebben we zeven prachtige voorbeelden laten zien van typografie op websites. Wil je meer zien? Bekijk dan ook eens onze typografische websites.

Meer artikelen