[Webdesign] Font kiezen. Waar op letten?

[PdeBie]

Ik ben bezig met een (grafisch) ontwerp voor mijn eigen website.
Qua layout ben ik er aardig uit wat ik in gedachten heb. Lekker clean en simpel. Geen poespas.

Maar dan het ergste. Een font uitkiezen.
Honderden zijn er beschikbaar via Google Fonts en ik kan maar geen keuze maken. Niks lijkt bij elkaar te passen.

Dus hier een vraag aan de grafische ontwerpers onder ons. Wat is jullie manier om een font voor een website te bepalen? Welke zaken denken jullie aan en waar letten jullie allemaal op?

[P0L]

Denk dat uniformiteit vooral van belang is. Ik zou gewoon verschillende lettertypes uitproberen die passen bij de stijl van je pagina.

[TERW_DAN]

Iets dat er altijd goed uitziet, ongeacht hoe je fonts rendert. De hoeveelheid sites die er gewoon ultiem ruk uitzien omdat ze gare fonts gebruiken die er lelijk uitzien zonder anti-aliasing is echt dramatisch.

[_Thanatos_]

Kijk ook naar de glyphs die je nodig denkt te gaan hebben. Veel fonts hebben maar een handjevol glyphs, en soms niet eens accenten. Met OpenType-features is dat nog wel een soort van fixbaar, maar dat is minder compatible.

Kijk ook vooral naar een default font. Als je je font via een externe dienst inlaadt (wat overigens technisch complete bullshit is), loop je het risico dat om een aantal mogelijke redenen het font niet geladen wordt bij iemand. Dit betekent dus vooral dat je geen vaste hoogtes en breedtes op elementen moet zetten die afhangen van je font.

Dat gezegd hebbende, je hebt het over "geen poespas". Wat is er dan mis met een default font?

[Whatson]

Helvetica (neue)

http://www.theguardian.co...one-font-to-rule-them-all
https://www.quora.com/Why...fect-font-in-some-circles

[PdeBie]

_Thanatos_ schreef op woensdag 27 januari 2016 @ 23:45:
Dat gezegd hebbende, je hebt het over "geen poespas". Wat is er dan mis met een default font?

Er is niks mis met een default font, maar ik ben gewoon even benieuwd naar de gedachtengang achter het selecteren van een font.

Whatson schreef op woensdag 27 januari 2016 @ 23:55:
Helvetica (neue)

http://www.theguardian.co...one-font-to-rule-them-all
https://www.quora.com/Why...fect-font-in-some-circles

Dat is leuk en aardig, maar dat font heb ik zelf al niet op mijn pc. Dus hele grote kans dat meerdere mensen dit niet hebben.


Hoe staan jullie tegenover het gebruik van Google Fonts?

[Whatson]

Helvetica heeft iedereen, helvetica neue alleen OSX

[ Voor 36% gewijzigd door Whatson op 28-01-2016 14:02 ]

[PdeBie]

Whatson schreef op donderdag 28 januari 2016 @ 14:02:
Helvetica heeft iedereen, helvetica neue alleen OSX

Ow?

[Skyaero]

PdeBie schreef op donderdag 28 januari 2016 @ 09:48:
[...]
Hoe staan jullie tegenover het gebruik van Google Fonts?

Ik gebruik altijd http://www.fontsquirrel.com/ om vervolgens de font vanaf de eigen server te hosten.

[MsG]

Microsoft heeft enkel Arial als Helvetica-kloon:

Omdat Microsoft het gebruik van Helvetica te duur vond, liet het bedrijf een eigen variant van dit lettertype, genaamd Arial, ontwikkelen, dat op het eerste gezicht dezelfde eigenschappen bezit als Helvetica. Een nadere inspectie onthult echter een aantal kleine verschillen, onder andere in de kapitale R en de bovenkant van de t. Dit is een reden dat veel ontwerpers Arial zien als een inferieur lettertype.[3] Bij Apple-software als Pages, Numbers en Keynote is Helvetica al jaren het standaardlettertype.

[Ultimation]

OpenSans is een goed alternatief vind ik; https://www.google.com/fonts/specimen/Open+Sans

[Whatson]

PdeBie schreef op donderdag 28 januari 2016 @ 15:32:
[...]


Ow?

[afbeelding]

Oh ik dacht echt dat Helvetica een standaard font was, net als Arial en Times New Roman

tweakers gebruikt: font-family:arial,helvetica,"Liberation Sans",sans-serif
(in die volgorde, dus eerst Arial, als niet beschikbaar dan Helvetica, etc.)

[ Voor 20% gewijzigd door Whatson op 28-01-2016 20:35 ]

[posttoast]

Je kunt een font natuurlijk ook gewoon kopen he Helvetica Neue kost bij MyFonts 50 dollar per gewicht.

[Whatson]

posttoast schreef op donderdag 28 januari 2016 @ 20:35:
Je kunt een font natuurlijk ook gewoon kopen he Helvetica Neue kost bij MyFonts 50 dollar per gewicht.

Maar dan moet je het nog steeds apart inladen omdat het geen default font is op Windows en Linux.

[posttoast]

Whatson schreef op donderdag 28 januari 2016 @ 20:36:
[...]

Maar dan moet je het nog steeds apart inladen omdat het geen default font is op Windows en Linux.

Klopt, maar dat is tegenwoordig toch niet meer zo'n issue?

[PdeBie]

posttoast schreef op donderdag 28 januari 2016 @ 20:39:
[...]

Klopt, maar dat is tegenwoordig toch niet meer zo'n issue?

Het is wel weer een extra request en extra data die je tussen client en server uitwisselt. Beetje zonde.

Zeker als je x duizend bezoekers hebt per dag die het font niet hebben.

[posttoast]

Volgens die logica kun je stylesheets en afbeeldingen ook beter achterwege laten

[Dennis013]

PdeBie schreef op dinsdag 26 januari 2016 @ 21:00:
Ik ben bezig met een (grafisch) ontwerp voor mijn eigen website.
Qua layout ben ik er aardig uit wat ik in gedachten heb. Lekker clean en simpel. Geen poespas.

Maar dan het ergste. Een font uitkiezen.
Honderden zijn er beschikbaar via Google Fonts en ik kan maar geen keuze maken. Niks lijkt bij elkaar te passen.

Dus hier een vraag aan de grafische ontwerpers onder ons. Wat is jullie manier om een font voor een website te bepalen? Welke zaken denken jullie aan en waar letten jullie allemaal op?

Ik kies eigenlijk altijd een schreefloze (sans-serif) letter als leesfont, voor de titel hangt het er vanaf, maar voor webpagina is sans-serif meestal wel het fijnste.

PdeBie schreef op donderdag 28 januari 2016 @ 09:48:
[...]


Er is niks mis met een default font, maar ik ben gewoon even benieuwd naar de gedachtengang achter het selecteren van een font.


[...]


Dat is leuk en aardig, maar dat font heb ik zelf al niet op mijn pc. Dus hele grote kans dat meerdere mensen dit niet hebben.


Hoe staan jullie tegenover het gebruik van Google Fonts?

Ik gebruik het heel vaak, werkt prima.

[ Voor 24% gewijzigd door Dennis013 op 29-01-2016 09:26 ]

[PdeBie]

posttoast schreef op vrijdag 29 januari 2016 @ 09:18:
Volgens die logica kun je stylesheets en afbeeldingen ook beter achterwege laten

Waarom denk je dat stylesheets ge-minified worden? Scheelt dataverkeer.

Waarom bestaan er CDN's? Omdat als iemand op site A via een CDN een bestand heeft gedownload en hij komt op site B, die dezelfde CDN gebruikt, hij hetzelfde bestand niet nogmaals hoeft te downloaden, omdat het al in zijn cache staat.

Dit kan voor grote partijen heel veel dataverkeer schelen. En daarmee een serieuze geld besparing.

[ Voor 9% gewijzigd door PdeBie op 29-01-2016 09:50 . Reden: interpunctie ]

[handige_harrie]

Wellicht is deze nuttig?

[Ramon]

PdeBie schreef op vrijdag 29 januari 2016 @ 09:48:
[...]


Waarom denk je dat stylesheets ge-minified worden? Scheelt dataverkeer.

Waarom bestaan er CDN's? Omdat als iemand op site A via een CDN een bestand heeft gedownload en hij komt op site B, die dezelfde CDN gebruikt, hij hetzelfde bestand niet nogmaals hoeft te downloaden, omdat het al in zijn cache staat.

Dit kan voor grote partijen heel veel dataverkeer schelen. En daarmee een serieuze geld besparing.

Maar wat wil je dan van ons horen?

Het bedrijf waar ik werk gebruikt voor iedere site die we maken wel een custom font, dit doen we zowel met google fonts, als eigen gehoste fonts als andere hosting diensten, afhankelijk van wat de designer ons aanlevert en dit levert eigenlijk nooit problemen op, ook niet met sites waar 100.000 bezoekers per maand komen. Maar wil je natuurlijk het laatste beetje performance uit je site wringen, dan moet je een font kiezen wat bij de gebruiker op de computer staat.

[8088]

PdeBie schreef op vrijdag 29 januari 2016 @ 09:48:
Waarom denk je dat stylesheets ge-minified worden? Scheelt dataverkeer.

Geen stylesheets meesturen scheelt nog meer dataverkeer. Fonts (met name woff2) kun je ook gecomprimeerd aanbieden. Ik snap je punt niet zo goed, geloof ik. Gaat de discussie over esthetiek, techniek of beide?

Waarom bestaan er CDN's? Omdat als iemand op site A via een CDN een bestand heeft gedownload en hij komt op site B, die dezelfde CDN gebruikt, hij hetzelfde bestand niet nogmaals hoeft te downloaden, omdat het al in zijn cache staat.

Dat is niet het enige bestaansrecht van CDNs: minstens zo belangrijk zijn high availability, geografische spreiding (lagere latentie) en DoS-bescherming. Hosting op CDNs is daarom ook niet beperkt tot veel voorkomende libraries of fonts.

[PdeBie]

We wijken nu inderdaad teveel af van de originele vraag. Dat is dus de gedachtengang achter het kiezen van een font. Een kijkje "achter de schermen" bij grafisch ontwerpers dus

[Guido1982]

Er is niet echt één regel voor het kiezen van een font. Maar ik houd er zelf altijd van serif koppen met sans serif (dus een helvetica achtig iets) met elkaar te combineren. Voor de rest is leesbaarheid iets dat voorop moet staan, ik verhoog hiervoor eigenlijk standaard de regelhoogte iets (maar ook dat is persoonlijk).

[jorrit91]

Ik check nog wel eens lijstje, check google en zoek met:
"beautiful google font combinations"

Dit is nice
Dit ook

Well, you get the idea.

[xs4me]

Het hangt natuurlijk geheel af van 't doel van de website.
Welke doelgroep spreek je aan? Wat probeer je te verkopen etc?

Dus je vraag is bijna alsof je vraagt: wat voor kleren trek jij vandaag aan?

Maargoed, als je de regels wilt volgen dan kies je niet voor speels geschreven fonts / symbolen voor een website voor een bank bijvoorbeeld.
Maak je een website voor een festival, ga lekker los.

Zo nu en dan heb ik schijt aan de regels.Ik ken ze wel, en ik volg ze ook vaak zat (ze zijn er niet voor niks), maar als iedereen altijd de regels volgt dan onderscheid je je ook nooit meer. Maar dat ligt dan weer geheel aan 't doel en de missie. Willen ze vernieuwen of gewoon een herkenbare uitstraling hebben?

Verder vind ik dat het primaire doel van een font nog steeds moet zijn: is het goed leesbaar.
Soms ziet 't er wel leuk uit, maar heb ik gewoon moeite om 't te lezen
Veilig is om 1 font te kiezen met verschillende sizes / weights voor headers. Matched altijd.
Of bijv. voor een redelijk neutraal font voor tekst met een wat speelsere font als header die meer als teaser dient en dus best mag opvallen. Zie hiervoor bijv jorrit91 z'n links. En zo zijn er nog 100 als je googled.

[SirSela]

Wellicht al bekend maar kijk ook eens op deze site:
http://www.typegenius.com

Hier kies je een basisfont en krijg je vervolgens suggesties voor fonts die hier goed bij passen. Ook krijg je een voorbeeldje te zien in de vorm van een afbeelding van een webpagina met deze fonts.

[Verwijderd]

Mijn tip zou zijn; check het main-overzicht van Google fonts:
https://www.google.com/fonts

Keuze genoeg! Ze bieden gegarandeerd een lettertype naar je smaak en het voordeel is dat het webdesign-technisch met iedere device compatible is (smartphone, ipad, desktop)