Tweakers vernieuwt UI

07-07-2026 • 13:52

De vernieuwde styling die we eerder als bèta beschikbaar maakten, staat vanaf vandaag aan voor alle gebruikers. In deze .plan leggen we uit wat we veranderd hebben, waarom en hoe we tot deze veranderingen zijn gekomen.

Waarom we hieraan begonnen

We kregen de afgelopen jaren van trouwe bezoekers, incidentele gebruikers en collega's steeds vaker te horen dat Tweakers er verouderd uitziet. Zelf vonden we dat ook. Vooral op mobiel bleef de gebruikerservaring achter en voldeden we niet aan moderne richtlijnen zoals de Web Content Accessibility Guidelines (WCAG). Omdat het gebruik op mobiel sterk is toegenomen, was het belangrijk om dit aan te pakken.

We zijn daarom begonnen met onze designprincipes opnieuw vaststellen. Dit zijn uitgangspunten zoals streven naar eenvoud, zorgen voor consistentie en voorspelbaarheid, en cognitieve overbelasting voorkomen. We werken mobile first en passen de toegankelijkheidsrichtlijnen toe.

De eerste stap: typografie en opmaak

De vernieuwing is een langlopend project dat we in fases opleveren. Deze eerste stap richt zich op de styling: typografie, witruimte en uitlijning. De zichtbaarste verandering is de aangepaste typografie. We gebruiken een nieuw lettertype voor koppen en hebben broodteksten vergroot van 13 à 14px naar 16px.

In de keuze voor de lettergrootte hebben we jarenlang sterk rekening gehouden met onze meest techsavvy gebruikers, die de voorkeur geven aan een hoge informatiedichtheid. Daardoor voldeden we echter niet meer aan algemeen geaccepteerde richtlijnen voor leesbare typografie. Ook is de pixeldichtheid van beeldschermen sinds onze vorige keuze toegenomen met 10 tot 20 procent, zonder dat we daarvoor compenseerden. Veel schermen geven een 14px-letter tegenwoordig fysiek kleiner weer dan in 2012.

Na veel lettertypes proberen en testen met de crew kozen we aanvankelijk voor Roboto Flex als lettertype voor de broodteksten. Roboto Flex is een variabel font dat we in een wat bredere variant gebruikten om de uitstraling van een monospace te benaderen. We maakten deze variant toegankelijk in een publieke bèta, samen met een voorjaarsopruiming van de lay-outs. Pagina's kregen een wat ruimere opzet, strakkere uitlijning en talloze aanpassingen om de grotere letters goed te laten passen.

Wat we aanpasten na jullie feedback

We hebben de vernieuwing bewust eerst uitgerold als bèta, zodat we konden bijsturen voordat we de wijzigingen definitief doorvoerden. De bèta was ingeschakeld bij ruim 5700 tweakers en we hebben dus getest met een grote groep gebruikers. In een speciaal hiervoor opgetuigd feedbacktopic in Mooie Features konden jullie je feedback achterlaten en veel gebruikers hebben dat uitgebreid gedaan. We bedanken iedereen voor alle input in het topic en onder de .plans. Naar aanleiding van de feedback hebben we op diverse punten onze keuzes heroverwogen.

Broodteksten

De keuze voor Roboto Flex leverde veel feedback op. Dat was deels omdat de stijl (de wat bredere weergave) niet beviel, maar vooral vanwege een verminderde leesbaarheid. De leesbaarheid van een lettertype is geen absolute waarheid: er zijn verschillen in rendering per besturingssysteem en uiteraard speelt de pixeldichtheid van het beeldscherm een belangrijke rol.

Om beter inzicht te krijgen in hoe gebruikers de lettertypes ervaren, maakten we een vergelijkingspagina waar Arial, het systeemlettertype en Roboto Flex naast elkaar stonden. We vroegen jullie via een formulier in het feedbacktopic om de verschillende lettertypes te beoordelen. Daaruit kwam een duidelijke voorkeur voor het systeemlettertype, gevolgd door Arial.

UI-vernieuwing font voorkeuren feedback

We zijn daarom afgestapt van Roboto Flex en hebben gekozen voor platformafhankelijke broodteksten: Arial op Windows, Roboto op Android, SF Pro op Apple-platformen en Ubuntu op Ubuntu. Dit zijn allemaal neogroteske schreefloze lettertypes, die met hun stijl tot dezelfde familie behoren en die gebruikers al kennen van hun besturingssysteem. Deze lettertypes zijn ook allemaal specifiek geoptimaliseerd voor leesbaarheid op beeldschermen.

Naar aanleiding van de reacties op de update van 17 juni hebben we IBM Plex Sans en het opensource dyslexiefont OpenDyslexic beschikbaar gemaakt als webfont. Onder de .plan kwamen veel reacties van tweakers die het gebrek aan onderscheid tussen de hoofdletter i en de kleine letter l storend vonden. IBM Plex Sans lost dat probleem voor hen op. Je kunt de lettertypes aanzetten via custom-css-snippets voor IBMPlexSansVar font en OpenDyslexic font. We hebben ook een snippet om de oude lettergroottes terug te zetten.

Forumopmaak

De grotere letters zorgden ervoor dat forumtitels in lijstweergaven op desktop soms doorliepen op een tweede regel. Daarom hebben we de lettergrootte in forum- en topiclistings en forumberichten verlaagd van 16px naar 15px. Tegelijk hebben we de lay-outbreedte op desktop gelijkgetrokken met de driekolomsweergave van de frontpage. Dit leverde zo'n 80 pixels extra ruimte op in de breedte.

De alineabreedte in posts bleef gelijk, omdat die al aan de bovenkant van de aanbevolen leesbaarheidsrange zat. De kolom voor gebruikersnaam en avatar kreeg meer ruimte, waardoor we afbeeldingen en tabellen iets breder kunnen weergeven. Forumtitels lopen op desktop nu vrijwel niet meer door op een tweede regel.

UI-vernieuwing forumpost oud vs nieuw — Forumpost op desktop, oud versus nieuw

Koppen

In een parallel traject kozen we Clash Grotesk als nieuw lettertype voor koppen. Dat is een wat bredere letter. We hebben daarbij gelet op samenhang in stijl met de broodteksten en op leesbaarheid. Dit was mede de reden om op Android, macOS en bepaalde Linux-besturingssystemen te kiezen voor systeemeigen lettertypes. Deze passen beter bij het lettertype van de koppen dan Arial. Windows heeft geen goede alternatieven die de leesbaarheid van Arial evenaren.

Vervolgstappen

Met deze livegang is de eerste stap van een bredere vernieuwing afgerond. De volgende stap is de redactionele artikelen en frontpage herontwerpen. We gaan ook de zoekfunctie in de menubalk en de algehele merkuitstraling onder de loep nemen.

We begrijpen dat dit een zichtbare en voor sommigen ingrijpende verandering is. Daarom hopen we dat jullie de vernieuwing de tijd willen geven om te landen en om eraan te wennen. Tegelijk blijven we luisteren naar constructieve feedback, want die helpt ons om Tweakers verder te verbeteren. We bedanken iedereen die heeft deelgenomen aan de bèta nogmaals hartelijk voor de waardevolle input.

Wil je in de toekomst ook meedenken en nieuwe features eerder uitproberen? Meld je dan via je profielinstellingen aan voor toekomstige bètatests.

Vorige .plan

Lees meer

Nieuwe lettertypes voor bètatest UI-vernieuwing .Plan van 17 juni 2026

Bètatest UI-update .Plan van 7 april 2026

We gaan Tweakers toegankelijker maken .Plan van 19 februari 2026

Webdevelopment Websites en community's

IT-banen

Meer vacatures

Reacties (86)

-Moderatie-faq

Wijzig sortering

bumtroll 7 juli 2026 13:54

Sorry, maar ik vind de huidige UI-wijzigingen ook niet echt een verbetering. Neem bijvoorbeeld de zoekbalk: wat was er mis met direct typen?

Ook de specificatiepagina onder producten is nu minder overzichtelijk. Waarom moet ik tegenwoordig meerdere vlakken openen om alle informatie te zien?