Welk font voor website gebruiken?

[Verwijderd]

Ik kom hier even niet uit, gevalletje door de bomen het bos niet meer zien.

Welke font gebruiken jullie voor online content, bijv. fora of andere pagina's met veel tekst dat je moet doorlezen?

Inmiddels wel uitgekomen dat voor online je het beste een schreefloze font kunt gebruiken... maar dan nog zijn er tig fonts waaruit je kan kiezen. Wat gebruiken jullie?

Weet iemand welk font Tweakers eigenlijk gebruikt?

[Verwijderd]

Comic Sans.

[TERW_DAN]

Als ik 't zelf voor 't zeggen heb iets dat er ook nog fatsoenlijk uitziet als je Cleartype uit hebt staan. Veel websites zien er tegenwoordig echt poep uit met hun speciale fonts. Gewoon Verdana of iets dergelijks, werkt altijd, overal en ziet er prima uit, ook als je je fonts scherp wil renderen.

Als je wilt weten wat Tweakers gebruikt, kijk gewoon met je developer tools naar de elementen. Ze gebruiken meerdere fonts namelijk. Voor de titels gebruiken ze 't uberlelijke Roboto (wazige meuk), voor de tekst gelukkig gewoon Arial of Helvetica.

[ Voor 29% gewijzigd door TERW_DAN op 13-05-2017 10:08 ]

[McKaamos]

En als je wil weten wat iemand anders gebruikt: de meeste browsers hebben zogeheten Development Tools.
Even met je rechter muisknop op de betreffende tekst en dan kiezen voor 'Element Inspecteren'.
Dan krijg je ook een kolommetje met alle CSS properties die van toepassing zijn op dat deel van de pagina, en dat includeert het gebruikte font.

Hier op het forum is de reguliere tekst één van deze, in orde van beschikbaarheid in de betreffende browser:
font-family: "arial","helvetica","Liberation Sans",sans-serif;
Dus bij voorkeur Arial, indien die niet beschikbaar is wordt er gekeken of Helvetica er is, en dan Liberation Sans. Is geen van allen beschikbaar, dan wordt de standaard 'zonder-schreef' font van de browser gebruikt (welke dat ook mag zijn, die er dan standaard ingesteld is in jouw browser)

[ Voor 40% gewijzigd door McKaamos op 13-05-2017 10:11 ]

[DJMaze]

Cascading Stylesheet:

font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;

Niet iedereen heeft (gelukkig) Windows OS.....

En vergeet niet dat de meeste fonts niet gratis te gebruiken zijn.

[ Voor 17% gewijzigd door DJMaze op 13-05-2017 10:18 ]

[Verwijderd]

TERW_DAN schreef op zaterdag 13 mei 2017 @ 10:07:
Als ik 't zelf voor 't zeggen heb iets dat er ook nog fatsoenlijk uitziet als je Cleartype uit hebt staan. Veel websites zien er tegenwoordig echt poep uit met hun speciale fonts. Gewoon Verdana of iets dergelijks, werkt altijd, overal en ziet er prima uit, ook als je je fonts scherp wil renderen.

Als je wilt weten wat Tweakers gebruikt, kijk gewoon met je developer tools naar de elementen. Ze gebruiken meerdere fonts namelijk. Voor de titels gebruiken ze 't uberlelijke Roboto (wazige meuk), voor de tekst gelukkig gewoon Arial of Helvetica.

Ik neem aan dat men gewoon voor lappen tekst een ''core font'' gebruikt. Dan heb je nog keuze uit talloze schreef en schreefloze fonts. Van Verdana lees ik dat men deze te breed vind en dat het niet lekker leest, terwijl Arial de letters weer te dicht op elkaar zouden zitten.

[McKaamos]

Verwijderd schreef op zaterdag 13 mei 2017 @ 10:21:
[...]
Ik neem aan dat men gewoon voor lappen tekst een ''core font'' gebruikt. Dan heb je nog keuze uit talloze schreef en schreefloze fonts. Van Verdana lees ik dat men deze te breed vind en dat het niet lekker leest, terwijl Arial de letters weer te dicht op elkaar zouden zitten.

Dat kan je allemaal beinvloeden met CSS.
Ook een font wat standaard niet lekker leest, kan je beter leesbaar maken.

B.v. met de letter-spacing of font-stretch properties.
https://www.w3schools.com/cssref/pr_text_letter-spacing.asp
https://www.w3schools.com/cssref/css3_pr_font-stretch.asp

[TommieW]

DJMaze schreef op zaterdag 13 mei 2017 @ 10:17:

Cascading Stylesheet:

font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;

Niet iedereen heeft (gelukkig) Windows OS.....

En vergeet niet dat de meeste fonts niet gratis te gebruiken zijn.

Google's fonts heeft een aardige verzameling die - voor zover ik weet - vrij te gebruiken zijn.

[Ofyles2]

Noto Sans
Noto Serif

[TERW_DAN]

Ofyles2 schreef op zaterdag 13 mei 2017 @ 23:35:
Noto Sans
Noto Serif

Dat ziet er toch niet uit?


Ik snap echt niet waarom de ene letter dikker is dan de andere, zie het verschil maar eens tussen de t en de h. Of de e en de l. Deze lettertypes zou ik echt zo snel mogelijk zien verdwijnen, leest echt rete-irritant met die verschillende diktes van letters.

[Ofyles2]

Ondanks die vormfouten die jij opnoemt vind ik Noto toch iets hebben.

Als ik het geld had, zou ik DIN, Futura of Frutiger overwegen. Arial en Helvetica vind ik daarentegen dé lettertype die je gemiddelde klasgenoot/collega gebruikt (en dan ben ik negatief).

[Verwijderd]

Open Sans

https://fonts.google.com/specimen/Open+Sans

[Ofyles2]

TERW_DAN schreef op zaterdag 13 mei 2017 @ 23:45:
[...]

Dat ziet er toch niet uit?
[afbeelding]

Ik snap echt niet waarom de ene letter dikker is dan de andere, zie het verschil maar eens tussen de t en de h. Of de e en de l. Deze lettertypes zou ik echt zo snel mogelijk zien verdwijnen, leest echt rete-irritant met die verschillende diktes van letters.

Inmiddels naar je feedback geluisterd, zelf ook achter gekomen dat mijn voorgedragen keuzes een beetje onleesbaar werden.

[Erulezz]

Gebruik tegenwoordig voor veel CMS-en Raleway;

Cascading Stylesheet:

font-family: 'Raleway', sans-serif;

Ook gratis beschikbaar via Google Fonts. Persoonlijk leest het erg fijn

[Loadichus]

Verwijderd schreef op maandag 15 mei 2017 @ 12:10:
Open Sans - https://fonts.google.com/specimen/Open+Sans

Hier ook een Open Sans fan.

[Robbbbbbbb]

Loadichus schreef op woensdag 31 mei 2017 @ 17:23:
[...]

Hier ook een Open Sans fan.

Hier nog een, Gebruik zelf vaak 2 verschillende voor titels en (lange stukken) tekst

[Verwijderd]

Erulezz schreef op maandag 22 mei 2017 @ 08:17:
Gebruik tegenwoordig voor veel CMS-en Raleway;

Die heb ik een tijdje geleden ook ontdekt - fijn font inderdaad!

[Creepy]

TERW_DAN schreef op zaterdag 13 mei 2017 @ 23:45:
[...]

Dat ziet er toch niet uit?
[afbeelding]

Ik snap echt niet waarom de ene letter dikker is dan de andere, zie het verschil maar eens tussen de t en de h. Of de e en de l. Deze lettertypes zou ik echt zo snel mogelijk zien verdwijnen, leest echt rete-irritant met die verschillende diktes van letters.

Als ik het zo zie heb je inderdaad geen cleartype, maar ook geen antialiasing en geen hinting aan staan. Normaal gesproken met hinting aan zul je zien dat de font diktes beter uitkomen en met antialiasing ben je van het blokkerige af. Jouw screenshot is echt een enorm verschil met wat ik hier zie, en dat is ook zonder de "dikke" fonts die je krijgt met cleartype. Ik heb dan ook het idee dat het aan jouw font render instellingen ligt, dan direct aan het font.

[ Voor 5% gewijzigd door Creepy op 31-05-2017 22:03 ]

[TERW_DAN]

Creepy schreef op woensdag 31 mei 2017 @ 22:02:
[...]

Als ik het zo zie heb je inderdaad geen cleartype, maar ook geen antialiasing en geen hinting aan staan.

Klopt. Dat staat uiteraard allemaal uit. Als ik dat aan ga zetten wordt 't een wazige zooi en is het gegarandeerd koppijn als ik een uurtje achter m'n scherm zit. Het jammere is dat er veel fonts gebruikt worden die er crap uitzien als je gewoon standaard fontrendering gebruikt. Terwijl dat 't enige is dat tenminste gewoon scherp is.

[Verwijderd]

Ofyles2 schreef op zaterdag 13 mei 2017 @ 23:59:
Arial en Helvetica vind ik daarentegen dé lettertype die je gemiddelde klasgenoot/collega gebruikt (en dan ben ik negatief).

Helvetica en Verdana zijn behoorlijk standaard, maar dat is niet voor niets

[Tom]

Anti-aliasing staat standaard aan, maar een enkeling zal het uitzetten. Ik houd daar geen rekening mee. Mede door de steeds maar hogere DPI van schermen is het gebruik van niet-systeemfonts tegenwoordig prima bruikbaar.

[nickyvandijk]

Ik ben zelf ook een voorstander van Open Sans. Ik werk veel met material design en daar word vaak Open Sans met Roboto gecombineerd.

[Ed Vertijsment]

Je stelt een design vraag op een forum voor techneuten. Wellicht dat hier ook designers rondhangen maar je wilt in iedervev advies van een designer hierover (ben ik ook niet)

Vaak wordt een combinatie van fonts gebruikt voor koppen en gewone teksten. Op het internet staan ook wel artikelen over welke fonts op wat voor content goed samengaan.

Typografie is zeer belangrijk en als je geld investeert in een website kan het zeker geld waard zijn om een premium font te licensen. Open Sans kan mooi uitkomen maar op andere content werkt een andere weer beter.

Hoe je moet kiezen kan ik je niet vertellen. Wel is het vaak te beargumenteren waarom welke fonts gebruikt worden. Wellicht ken je een designer die je kan aanspreken?

[SgtElPotato]

Arial wordt heel veel gebruikt. Persoonlijk zou ik voor Verdana gaan vanwege het rustige uiterlijk en de spacing.

Het ligt natuurlijk ook aan je publiek en je content. Ik zou je ook adviseren om met een designer in gesprek te gaan als je geen standaard wilt gebruiken.

[Verwijderd]

Vooral niet teveel tijd besteden aan fonts, en gewoon de standaard fonts pakken. Alleen amateurs gaan met allemaal speciale fonts aan de slag, vertragen zo hun website, vergroten de kans op problemen, zonder dat het iets oplevert. Het is vergelijkbaar met wat vroeger de marquee tag was.

Enige geldige uitzondering is als je opdrachtgever een bedrijf is, met een stijlgids en huisstijl etc, en je dwingt een specifiek font te gebruiken. In alle andere gevallen: niet aan beginnen.

[ Voor 6% gewijzigd door Verwijderd op 03-06-2017 23:18 ]

[Verwijderd]

Verwijderd schreef op zaterdag 3 juni 2017 @ 23:17:
Vooral niet teveel tijd besteden aan fonts, en gewoon de standaard fonts pakken. Alleen amateurs gaan met allemaal speciale fonts aan de slag, vertragen zo hun website, vergroten de kans op problemen, zonder dat het iets oplevert. Het is vergelijkbaar met wat vroeger de marquee tag was.

Amateurs en mensen die goed weten wat ze doen.

[Verwijderd]

Verwijderd schreef op zaterdag 3 juni 2017 @ 23:21:
Amateurs en mensen die goed weten wat ze doen.

Moet ik je gelijk in geven. Helaas weten niet veel mensen wat ze doen, en dan is het verstandiger om gewoon bij allemaal aparte fonts uit de buurt te blijven.

En als je wél goed weet wat je doet, hoef je het hier niet te komen vragen

[Ed Vertijsment]

TD;DR; http://design.codeschool.com/levels/1

Eigenlijk moet je, je nog voor deze vraag stelt jezelf de vragen stellen wat je aan het bouwen ben en of vormgeving daarvoor belangrijk is. Voor een simpel webbased tooltje is minder designliefde nodig dan voor een webshop die veel moet converteren. Een bedrijf wil bepaalde waardes uitstralen, daar zijn bepaalde fonts goed in maar een persoonlijk blogje kan wellicht zonder.

SgtElPotato schreef op zaterdag 3 juni 2017 @ 23:14:
Arial wordt heel veel gebruikt. Persoonlijk zou ik voor Verdana gaan vanwege het rustige uiterlijk en de spacing.

Voor defaults zeker, bedenk wel dat deze fonts nooit zijn ontworpen voor de huidige generatie (hi dpi) displays en dus soms niet zo "slick" kunnen uitkomen.

Typografie is een van de belangrijkste design elementen. Even een random design blogje begint gelijk over typografie, dus wellicht toch echt even wat tijd instoppen.

Verwijderd schreef op zaterdag 3 juni 2017 @ 23:17:Vooral niet teveel tijd besteden aan fonts, en gewoon de standaard fonts pakken. Alleen amateurs gaan met allemaal speciale fonts aan de slag, vertragen zo hun website, vergroten de kans op problemen, zonder dat het iets oplevert.

Bepaalde fonts setups converteren meer dan anderen. Maar dat betekent niet per se custom fonts. Je kan prima een standaard font gebruiken en die goed uit laten komen in bepaald situaties (zie link). Toch wil je dat je font een goede uitstraling heeft naar je doelgroep. Vergeet echter net simpele (wellicht belangrijkere) zaken zoals font-size, font-weight en line-height.

Het is vergelijkbaar met wat vroeger de marquee tag was.

Ik denk dat je dat beter kan vergelijken met carousels. Het probleem is namelijk niet de techniek maar het feit dat je tekst pretty much onleesbaar/verborgen wordt. Natuurlijk introduceert het risico's en daarvoor heb je fallbacks en ja performance is zeker een belangrijk punt die je mee wilt wegen maar een font hoeft echt niet zwaar te zijn. Afbeeldingen zijn vaak ook niet "nodig" maar kunnen de ervaring verbeteren, dat is hetzelfde voor fonts.

En als je wél goed weet wat je doet, hoef je het hier niet te komen vragen

Dat gebeurt volgens mij ook eigenlijk niet, volgens mij maken we hier met zn allen (inclusief mijzelf) een design vraag een technische vraag. *Rabbit Hole alert* * Dus terug on topic:

- Welke waarde straalt je "klant" uit (serieus, informeel etc...), kies daarop een base font.
- Kiel een complementeer font dat, daar goed mee samengaat
- Kijk verder dan font-family, maar ook naar font-size, font-weight en line-height.

Voor het specifieke probleem wat hier gevraagd wordt heeft volgens mij code school een les gemaakt, heeft pretty much niets met code te maken maar is wellicht het meest relevante antwoord dat ik je kan geven: http://design.codeschool.com/levels/1.

[lucasvm]

Persoonlijk ben ik erg fan van open sans (Google fonts) gebruik het ook op mijn website vanwege de moderne look.

[MsG]

TERW_DAN schreef op woensdag 31 mei 2017 @ 22:16:
[...]

Klopt. Dat staat uiteraard allemaal uit. Als ik dat aan ga zetten wordt 't een wazige zooi en is het gegarandeerd koppijn als ik een uurtje achter m'n scherm zit. Het jammere is dat er veel fonts gebruikt worden die er crap uitzien als je gewoon standaard fontrendering gebruikt. Terwijl dat 't enige is dat tenminste gewoon scherp is.

Moet je dan niet de instellingen eens doornemen? Juist in een tijd waar de DPI steeds hoger wordt is mijn desktop-scherm een van de laatste plekken waar je überhaupt nog individuele pixels kan spotten, en jij vergroot dat gedrag juist door alle vormen va subpixel smoothing en anti-aliasing ook nog eens uit te zetten? Waardoor je de exacte vierkante rasterige pixelheid van elke letter de hele tijd moet aanschouwen? ik wist dat Tweakers niet representatief zijn, maar ik mag hopen dat er alsnog een marginaal aantal dit uitzet :-P.

[Verwijderd]

Verwijderd schreef op zaterdag 3 juni 2017 @ 23:17:
Vooral niet teveel tijd besteden aan fonts, en gewoon de standaard fonts pakken. Alleen amateurs gaan met allemaal speciale fonts aan de slag, vertragen zo hun website, vergroten de kans op problemen, zonder dat het iets oplevert. Het is vergelijkbaar met wat vroeger de marquee tag was.

Enige geldige uitzondering is als je opdrachtgever een bedrijf is, met een stijlgids en huisstijl etc, en je dwingt een specifiek font te gebruiken. In alle andere gevallen: niet aan beginnen.

Alleen al als je je beperkt tot de standaard core web fonts heb je nog een enorme keuze aan sans of serif fonts. Eerlijk gezegd zie ik door de bomen het bos niet meer.

Ondanks het vele geklaag over Arial vind ik het best een aardig (en op scherm goed) leesbaar font.

Iemand die mij het verschil tussen Arial, Verdana en Tahoma kan uitleggen?

[TERW_DAN]

MsG schreef op donderdag 8 juni 2017 @ 12:47:
[...]


Moet je dan niet de instellingen eens doornemen?

Die heb ik juist doorgenomen en ingesteld zoals het nu is. Alles aan font smoothing zorgt gewoon voor hoofdpijn, dus staat het uit. Ook als dat betekent dat ik op een boel sites custom CSS moet laden om alle fonts te vervangen door leesbare varianten. Die wazige rotzooi trek ik gewoon heel slecht, en heb weinig zin om iedere dag met koppijn achter m'n systeem te zitten.

Een pixel is een pixel, en die moet je ook zo behandelen.

[Verwijderd]

Zelf gebruik ik Comic Sans.
Als je een andere wilt gebruiken kan je gewoon hier kijken.
https://fonts.google.com/