Custom fonts in Webdesign

[jorrit91]

Hai, ik ben een 4e jaars Grafische Vormgeving-student, en loop momenteel stage bij een Webdevelopment bureau. Ik noem het expres webdevelopment aangezien het bedrijf zich meer specialiseert in voorraadsystemen, boekhoudsystemen en het eigen CMS dan in webDESIGN. Echter, ik ben hier verantwoordelijk voor praktisch alle designaangelegenheden, en ben al een paar keer tegen het volgende probleem aangelopen.
Iedereen die bekend is met Webdesign weet dat fonts cross-platform en cross-browser allesbehalve een consistente ervaring bieden, als designer is dit (schijt)vervelend, aangezien je gekozen font zeer belangrijk is in de uitstraling van de website. Nu bestaat er tegenwoordig Google fonts, hiermee kan je gebruik maken van een selectie fonts die door Google beheert wordt, en waardoor het font niet op elke computer of op de server hoeft te staan, ideaal zou je zeggen. Rendertechnisch is dit echter nog steeds verre van ideaal, en gek genoeg vooral Google's eigen browser Chrome heeft ontzettend veel moeite om de fonts fatsoenlijk te renderen.
Het compromis is nu dat ik een typerend font gebruik voor de navigatie, de koppen en de buttons (daar waar de fonts vaak groter zijn) en kies voor een standaard webfont voor de platte tekst (arial, verdana whatever). Nu vraag ik me af hoe andere webdesigners/webbureau's dit probleem aanpakken. Wordt er de keuze gemaakt dat het bijvoorbeeld op XP met Chrome er gewoon niet goed uit ziet, met daar tegenover dat het op Mac met Firefox bijvoorbeeld super gelikt is, of gaan jullie ook voor de standaard webfonts voor de platte tekst.

Ben benieuwd hoe jullie dit oplossen, intrigerende, maar ook frustrerende materie...

[Miyamoto]

Een webdesigner moet in mijn ogen het idee loslaten dat de website er op élk systeem hetzeflde uitziet.
Voor de basistekst leest een standaard font ook vriendelijker vind ik.

[jorrit91]

Ja, dat is obvious, hij gaat er nooit overal precies hetzelfde uitzien, dat accepteer ik. Desondanks ga je wel voor het maximaal haalbare, en voor de consistentie. Daarnaast zijn er genoeg niet-standaard fonts die uitstekend lezen. Ik heb het over de platte tekst dan ook niet over spetterende banner-fonts, maar over fonts die geschikt zijn voor platte tekst...

[hostler]

Wat vind je van Cufón? Wellicht is dat wat je zoekt.

[TheNephilim]

Daar is tot zover geen oplossing voor. Chrome heeft gewoon problemen met bepaalde fonts en niet alleen in Windows XP. Ook Windows 7 heeft hier last van, terwijl de fonts wél netjes in Firefox of IE10 (op hetzelfde systeem) gerendered worden.

Het lijkt een probleem van Chrome zelf, iets waar je als webdeveloper niks aan kan doen. Ik hoop dat er snel een update komt voor Chrome waarin dit probleem is opgelost. Je ziet overigens enkele developers aan de slag met antialiassing css tags op websites, maar dat haalt over het algemeen weinig uit.

Hieronder nog een screenshot van fonts in een aantal browsers op een (up-to-date) Windows 7 systeem.



--- Edit ---

Je kunt overigens ook nog eens met de Webfont generator van Font Squirrel aan de slag, geeft soms betere resultaten dan met Google Fonts.

[ Voor 12% gewijzigd door TheNephilim op 14-10-2013 11:22 ]

[Morphine]

font-face werkt volgens mij gewoon praktisch overal goed. let wel op: sommige fonts worden korreliger. dus gebruik bijv. Google fonts http://www.google.com/fonts die zijn altijd goed.

Test ook altijd op een Mac; daar zien fonts er binnen Safari meestal vetter uit en werken soms speciale karakters niet.

[jorrit91]

Klopt, het is basically Chrome, niet erg OS-afhankelijk. Overigens zit ik hier op een Mac met Chrome, en als ik daar -webkit-font-smoothing: antialiased toepas, wordt het echt een stúk beter. Echter is dit niet in elke browser supported. Overigens is Cufón ook verre van ideaal, het laadt traag, de tekst is niet te selecteren en ook de rendering is niet lekker.

@morphine,
die google fonts werken dus niet overal goed. Ja, ze verschijnen wel, maar op kleine grootte zijn ze vreselijk korrelig en slordig, niet in elke browser overigens, Firefox doet het vrij aardig over het algemeen, maar vooral Chrome maakt er een zooitje van.

[ Voor 31% gewijzigd door jorrit91 op 14-10-2013 11:28 ]

[MoietyMe]

Je kan nog wel wat tweaken in het gedrag van Chrome. Je kan met font-smoothing inderdaad al een end komen.

Verder zou je er voor kunnen kiezen om WebKit standaard de SVG te laten gebruiken, maar dat geld dan dus ook voor Safari, Opera, etc.

[Bosmonster]

Probleem zit hem voornamelijk in Chrome voor Windows zelf. Dat is inderdaad wel op te lossen met font-smoothing meestal.

Tweede is Windows XP, wat ook een drama is.

Zorg verder voor goed gehinte webfonts. Via font squirrel omzetten is leuk en grappig, maar de kwaliteit laat veel te wensen over. Goed hinten is handwerk namelijk.

Als je speciale webfonts aanschaft of gebruikt via diensten als Google Webfonts, dan weet je (meestal) zeker dat de fonts goed omgezet cq nabewerkt zijn.

Test ook altijd op een Mac; daar zien fonts er binnen Safari meestal vetter uit en werken soms speciale karakters niet.

Als je ergens geen font rendering issues tegen gaat komen is het op de Mac. Als er characters niet werken klopt er iets niet in de characters die je gebruikt of je encoding. UTF-8 is UTF-8.

[ Voor 25% gewijzigd door Bosmonster op 14-10-2013 12:36 ]

[TheNephilim]

Bosmonster schreef op maandag 14 oktober 2013 @ 12:30:

Zorg verder voor goed gehinte webfonts. Via font squirrel omzetten is leuk en grappig, maar de kwaliteit laat veel te wensen over. Goed hinten is handwerk namelijk.

Als je speciale webfonts aanschaft of gebruikt via diensten als Google Webfonts, dan weet je (meestal) zeker dat de fonts goed omgezet cq nabewerkt zijn.

Toch heb ik al fonts gezien die er prima uitzagen via Font Squirrel. Natuurlijk, gewoon Google Fonts gebruiken zal in veel gevallen beter zijn, maar soms is handmatig teveel werk.

Ook via Google Fonts, hoe goed ze ook omgezet zijn, zijn lang niet alle fonts zo geweldig. Bepaalde fonts doen het juist heel slecht via Google, terwijl andere fonts weer haarscherp zijn. Of dat duid op slecht gehint, geen idee, maar in de praktijk is het in ieder geval erg lastig.

[Rickets]

De rendering is afhankelijk van het platform, maar waar het font vandaan komt, is van grote invloed. Er zijn enkele leveranciers die extra veel moeite hebben genomen om alles op alle platformen goed weer te geven (zie bijvoorbeeld The Raster Tragedy at Low-Resolution Revisited: Opportunities and Challenges beyond “Delta-Hinting” over problemen die fontmakers tegen kunnen komen). Enkele voorbeelden zijn H&FJ en FontFont. In tegenstelling tot Google Fonts kost het geld, en over de prijsmodellen kan je discussiëren (een abonnement op een font, wtf), maar je krijgt er ontegenzeggelijk kwaliteit voor terug.

Moet het natuurlijk wel in je ontwerp passen. Als je vastzit aan een font dat alleen leverbaar is door Google, heb je niks aan mijn suggesties.

[jdemaat]

Morphine schreef op maandag 14 oktober 2013 @ 11:23:
font-face werkt volgens mij gewoon praktisch overal goed. let wel op: sommige fonts worden korreliger. dus gebruik bijv. Google fonts http://www.google.com/fonts die zijn altijd goed.

Google Webfonts zijn helaas niet altijd goed. Deze week nog hebben wij Titillium moeten schrappen en wisselen voor een ander (Typekit) font wat veel beter renderde. Overigens is het goedkoopste Typekit abbonement het geld al waard, vind ik: de fonts zijn vaak van veel hogere kwaliteit (veel minder vaak problemen zoals deze) en de library is groot en professioneel.

Het is in mijn ervaring juist wel een OS afhankelijk probleem. Op Macs zien fonts er goed uit in zowel Firefox, Safari als Chrome. Wisselend qua anti-aliasing verwerking, maar overal acceptabel of gewoon goed. Ook altijd op iDevices. Op Windows zit je goed met Firefox en IE, maar Chrome gooit de hele anti-aliasing er gewoon uit. Waarom is voor mij altijd nog een raadsel.

Opvallend is dat dit altijd alleen is voor font-sizes onder de 49 pixels. Zie ook deze webkit bug. Hierboven kickt de anti-aliasing in (probeer het maar eens op Google Webfonts bijvoorbeeld... resultaat is verbazingwekkend).

Dingen die je kunt doen zijn inderdaad:

1. Spelen met -webkit-font-smoothing, wat meestal helemaal niks tot erg weinig uithaalt voor Chrome op Windows.
2. Proberen het een en ander te fixen met een text-shadow: 0 0 1px rgba(0,0,0,.3) bijvoorbeeld, maar dat is ook niet aan te raden. Slecht te onderhouden en het effect is veel vaker lelijk dan optimaal.
3. Als je beschikking hebt over een svg font (zoals vaak bij Google fonts), zet je die eerder in de CSS dan andere formaten. Hierdoor wordt het svg font als eerste aangeroepen en gebruikt, wat vaak aanzienlijke betere anti-aliasing oplevert. Maar soms wel overdreven veel. Je moet dit per font checken of het er echt beter van wordt, of juist onleesbaarder.
4. Je tekst groter maken dan 48 pixels.

Mijn tips

[TheNephilim]

jdemaat schreef op maandag 14 oktober 2013 @ 23:45:
[...]


Google Webfonts zijn helaas niet altijd goed. Deze week nog hebben wij Titillium moeten schrappen en wisselen voor een ander (Typekit) font wat veel beter renderde. Overigens is het goedkoopste Typekit abbonement het geld al waard, vind ik: de fonts zijn vaak van veel hogere kwaliteit (veel minder vaak problemen zoals deze) en de library is groot en professioneel.

Titillium is inderdaad een ramp

[R4gnax]

jdemaat schreef op maandag 14 oktober 2013 @ 23:45:
Het is in mijn ervaring juist wel een OS afhankelijk probleem. Op Macs zien fonts er goed uit in zowel Firefox, Safari als Chrome. Wisselend qua anti-aliasing verwerking, maar overal acceptabel of gewoon goed. Ook altijd op iDevices. Op Windows zit je goed met Firefox en IE, maar Chrome gooit de hele anti-aliasing er gewoon uit. Waarom is voor mij altijd nog een raadsel.

Opvallend is dat dit altijd alleen is voor font-sizes onder de 49 pixels. Zie ook deze webkit bug. Hierboven kickt de anti-aliasing in (probeer het maar eens op Google Webfonts bijvoorbeeld... resultaat is verbazingwekkend).

De reden dat het onder MacOS wel overal goed er uit ziet, is vrij simpel. Tenminste; wanneer je wat van de internals af weet. Hier is de dirty little secret van MacOS: de Quartz font-rendering engine van Apple negeert de hinting tables in een font op kleinere punt-groottes en herbouwt ze zelf dynamisch om zo goed mogelijk op de eigen anti-aliasing methodiek aan te sluiten.

Als auteurs dus rukwerk afleveren m.b.t. hinting — Inderdaad bijvoorbeeld een probleem bij Titilium; laat Font Squirrel maar eens de hinting tables herbouwen en zie het verschil… —, dan zal MacOS daar relatief weinig last van hebben. Pas vanaf een vrij groot formaat tekst zul je er daar iets van gaan merken, omdat dan pas de ingebouwde hinting tables gebruikt gaan worden.

Daarentegen houdt Microsoft's ClearType rendering zich wèl correct aan wat er in de hinting tables opgegeven staat, en daar ga je broddelwerk dus vrijwel meteen merken.

Het zal mij ook helemaal niet verbazen als het exacte omslagpunt zo ongeveer bij de 49px ligt; waar Chrome er weer degelijk uit begint te zien op non-Mac systemen. Chrome draait immers op Webkit en Webkit is door Apple gebouwd om mooi te renderen met Apple's technology stack. Dat wil zeggen dat het qua fonts gerust zo kan zijn dat Webkit's font rendering ook nog op andere manieren bewust inspeelt op het automatisch re-hinten van fonts door Quartz, wat zo zijn weerslag zou kunnen hebben op de gemiddelde kwaliteit van de font rendering voor web fonts onder Windows.

[ Voor 11% gewijzigd door R4gnax op 15-10-2013 20:48 ]

[jdemaat]

R4gnax schreef op dinsdag 15 oktober 2013 @ 20:42:
[...] Hier is de dirty little secret van MacOS: de Quartz font-rendering engine van Apple negeert de hinting tables in een font op kleinere punt-groottes en herbouwt ze zelf dynamisch om zo goed mogelijk op de eigen anti-aliasing methodiek aan te sluiten. Als auteurs dus rukwerk afleveren m.b.t. hinting — Inderdaad bijvoorbeeld een probleem bij Titilium; laat Font Squirrel maar eens de hinting tables herbouwen en zie het verschil… —, dan zal MacOS daar relatief weinig last van hebben. Pas vanaf een vrij groot formaat tekst zul je er daar iets van gaan merken, omdat dan pas de ingebouwde hinting tables gebruikt gaan worden. [...] Het zal mij ook helemaal niet verbazen als het exacte omslagpunt zo ongeveer bij de 49px ligt; waar Chrome er weer degelijk uit begint te zien op non-Mac systemen. Chrome draait immers op Webkit en Webkit is door Apple gebouwd om mooi te renderen met Apple's technology stack.

Interessant. Is er dan nog een specifieke (wiskundige?) reden voor die 49px?
Ik begrijp dus dat Apple dus de kleinere font-sizes zelf wil aanpakken, maar 49px lijkt me dan wel weer een erg hoge grens.

Toevallig heb ik vandaag met ClearType zitten testen; daar werd ik helaas niet vrolijk van. Hele Windows UI ziet er dan uitgeveegd uit, en voor websites merkte ik geen verschil.

Dat wil zeggen dat het qua fonts gerust zo kan zijn dat Webkit's font rendering ook nog op andere manieren bewust inspeelt op het automatisch re-hinten van fonts door Quartz, wat zo zijn weerslag zou kunnen hebben op de gemiddelde kwaliteit van de font rendering voor web fonts onder Windows.

Zou je hier nog iets meer over kunnen zeggen misschien?

[jdemaat]

TheNephilim schreef op dinsdag 15 oktober 2013 @ 15:08:
[...]Titillium is inderdaad een ramp

En we hebben Exo ook nog geprobeerd... ook om te huilen.

http://d.pr/i/tE9m

[TheNephilim]

R4gnax schreef op dinsdag 15 oktober 2013 @ 20:42:
[...]

Als auteurs dus rukwerk afleveren m.b.t. hinting — Inderdaad bijvoorbeeld een probleem bij Titilium; laat Font Squirrel maar eens de hinting tables herbouwen en zie het verschil… —, dan zal MacOS daar relatief weinig last van hebben. Pas vanaf een vrij groot formaat tekst zul je er daar iets van gaan merken, omdat dan pas de ingebouwde hinting tables gebruikt gaan worden.

Interessant, bedankt voor de achtergrond informatie! ^^ Eens zien of Titillium er beter uit ziet met Font Squirrel.

jdemaat schreef op dinsdag 15 oktober 2013 @ 22:10:
[...]


En we hebben Exo ook nog geprobeerd... ook om te huilen.

http://d.pr/i/tE9m

Haha, nee dat is niet echt een grote verbetering nee

Persoonlijk denk ik altijd maar, het word met een nieuwe browserversie misschien beter ... maarja.

--- Edit ---

Het verschil tussen 48 pixels en 49 pixels Titillium, het is er inderdaad!



Boven zie je 48px en onder 49px. De onderste is opmerkelijk beter anti-aliased!

[ Voor 11% gewijzigd door TheNephilim op 16-10-2013 11:14 ]

[jdemaat]

Het verschil tussen 48 pixels en 49 pixels Titillium, het is er inderdaad!

Ja, het is echt zo.

Het is voor mij ook onbegrijpelijk waarom ze bij Chrome zo'n overduidelijk en groot probleem (gezien het aantal Windows/Chrome users) nog niet hebben opgelost. En ja, het kan blijkbaar wel; kijk maar naar IE en Firefox.

[Bosmonster]

Nou, die 49px versie ziet er anders ook niet uit, maar daar kan Chrome niks aan doen

Maar vooral nu ze hun eigen fork hebben inderdaad, mag het toch niet zo zijn dat er dat soort rare bugs in zitten.

[ Voor 70% gewijzigd door Bosmonster op 17-10-2013 13:20 ]

[Bigs]

Naast Typekit is ok Typography.com aan te raden. Kleinere selectie, maar wel allemaal met goeie hinting zodat ze op je scherm goed ogen, waar Typekit ook heel veel algemene (voor drukwerk ontworpen) lettertypen aanbiedt.

[Rawit]

hostler schreef op maandag 14 oktober 2013 @ 11:19:
Wat vind je van Cufón? Wellicht is dat wat je zoekt.

Dit. Ziet er mooi uit op alle platformen. Nadeel; het wordt een afbeelding. Tekst selecteren is er niet meer bij...

[jdemaat]

Rawit schreef op donderdag 17 oktober 2013 @ 15:59:
[...]
Dit. Ziet er mooi uit op alle platformen. Nadeel; het wordt een afbeelding. Tekst selecteren is er niet meer bij...

Cufon is naar mijn mening een totale no-go. Het kan anno 2013 gewoon niet meer zo zijn dat je plaatjes (of zelfs Flash met sIFR) nodig hebt voor custom web fonts. Cufon is in deze tijd een ongebruiksvriendelijk lapmiddel. Gebruik @font-face. Dan help je het web zelf ook verder door goede technologie te gebruiken en promoten.

[dev10]

Rawit schreef op donderdag 17 oktober 2013 @ 15:59:
[...]

Dit. Ziet er mooi uit op alle platformen. Nadeel; het wordt een afbeelding. Tekst selecteren is er niet meer bij...

Nope. Cufon ziet er niet uit op een Retina Macbook. En wat jdemaat boven mij zegt kan ik alleen maar beamen.

[ Voor 8% gewijzigd door dev10 op 17-10-2013 23:56 ]

[Bosmonster]

Rawit schreef op donderdag 17 oktober 2013 @ 15:59:
[...]

Dit. Ziet er mooi uit op alle platformen. Nadeel; het wordt een afbeelding. Tekst selecteren is er niet meer bij...

Cufon wordt al jaren niet meer onderhouden en geeft zelfs zelf font embedding als beter alternatief...

Dat gaan gebruiken anno 2013 lijkt me geen goed plan.

[geert1]

Ik heb me ook wel gestoord aan de niet optimale rendering van fonts in browsers, maar meestal leg ik me erbij neer zolang het niet al te erg is. Het gaat vooral om het kiezen van het juiste font uit een goede bron zoals hierboven besproken. Met de Font Squirrel generator heb ik zowel goede als mindere resultaten gehad; dat ding zou ik dus niet bij voorbaat afschrijven. Het verschilt behoorlijk per font én waar de fonts vandaan komen, dus voor mij is het gewoon een kwestie van zoeken en kiezen wat werkt.

Trucs om slechte fonts mooi te renderen zijn meestal hooguit deels effectief en zijn de moeite meestal niet waard. Soms zie ik op een bestaande website een font die heel mooi uitkomt (op Chrome, wat mijn standaardbrowser is). Die kun je dan zelf ook kopen / je erop abonneren. Verder eens met hierboven dat Chrome best eens flink wat aandacht zou mogen steken in hun font rendering; dat moet gewoon beter kunnen. Tot die tijd is het zoeken, proberen en deels accepteren dat browsers niet perfect zijn.

En ik wil nog even een duit in het zakje doen wat betreft Cufon: Nooit doen. Cufon is een techniek uit de tijd dat veel webdesigners nog dachten in vormgeving alleen, terwijl we inmiddels weten dat webdesign een gebalanceerde combi is van accessibility, usability, webstandaarden, vormgeving, informatiestructuur, laadsnelheid, semantiek en andere factoren. Cufon past niet in modern webdesign, en al helemaal niet met het oog op retina / high-dpi schermen.

[ Voor 10% gewijzigd door geert1 op 19-10-2013 19:29 ]