[CSS] Font verticale uitlijning verschil win/mac/android

[Wolf3D]

Zoals in de titel al te lezen is, ik heb problemen met de verticale uitlijning van een specifiek lettertype (Brandon Grotesque). Ik ben begonnen met het ontwikkelen van een website onder Windows en heb getest in alle browsers. Geen probleem.
Totdat de website werd geopend op een Mac en Android. Het viel meteen op dat buttons en invoervelden, en andere plekken waar de tekst verticaal gecentreerd stond in Windows, opeens veel hoger werden gepositioneerd op mac en android. Na het eerst gezocht te hebben in de CSS ben ik erachter gekomen dat het probleem in het font zelf moet zitten.

Via http://www.fontsquirrel.com/tools/webfont-generator heb ik geprobeerd het font te 'fixen'. De instelling 'Vertical Metrics' lijkt het probleem te fixen. Echter ontstaat er dan een nieuw probleem: de weergave van het lettertype wordt dan weer heel lelijk onder windows. Hoe kleiner het font wordt, des te lelijker wordt de weergave. Zie onder, font-size op 34.7333px.


Ook verschijnen er allerlei rare 'haakjes' aan letters:


Ik heb volgens mij alle combinaties gehad in http://www.fontsquirrel.com/tools/webfont-generator, waarbij veel verschillen zaten, maar geen enkele combinatie lijkt overal te werken.

Daarnaast heb ik ook geprobeerd het lettertype te fixen in FontForge, maar ook hier helaas niet verder mee gekomen.

Zie overigens https://typekit.com/fonts/brandon-grotesque/n4/wfs voor het originele font en hoe de weergave ervan.

Iemand een idee waar het aan ligt of wat ik fout doe?

[Wolf3D]

Helaas heb ik het na meerdere pogingen op moeten geven en besloten een combinatie te maken tussen Brandon Grotesque en Brandon Text. Brandon Text heeft geen problemen met de vertical metrics, waardoor deze gewoon goed wordt uitgelijnd.
Ik gebruik nu Brandon Grotesque voor de koppen (waar verticale centrale uitlijning niet belangrijk is), en Brandon Text voor de paragrafen en buttons en plekken waar de verticale uitlijning er wel toe doet.

Geen optimale oplossing, maar de minst slechte tot nu toe

[DJMaze]

Persoonlijk blijf ik zover mogelijk weg van @font-face
Probleem tegenwoordig is unicode, als je font bepaalde unicode karakters niet heeft krijg je een mix van fonts. Heb je dat getest op Mac, Linux, Windows, Android, iOS?
Nog maar te zwijgen over het moeten downloaden van een 4MB font via 3G

€²³»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

[ Voor 13% gewijzigd door DJMaze op 24-11-2015 12:43 ]

[Wolf3D]

Bedankt voor je lijst met tekens. Ze lijken allemaal in ieder geval te werken.
Linux moet ik inderdaad nog wel testen...

Wat betreft het aantal MB's daar ben ik het helemaal met je eens. Het lijkt tegenwoordig op veel sites allemaal niet meer uit te maken wat je allemaal moet binnenhalen, en een iets lichtere mobiele variant wordt vaak niet aangeboden.
Daar probeer ik wel rekening mee te houden, door o.a. een kleine selectie van lettertypes aan te bieden (regular/medium/bold). Overigens blijf ik daarmee (afhankelijk van browser en lettertype ondersteuning) meestal onder de 100KB. Lijkt me netjes... Alles boven de 1MB aan alleen lettertypes vind ik belachelijk.

[kaassouffle]

Heb je een officieel webfont, of heb je hem gegenereerd met Font Squirrel ?

[DJMaze]

Wolf3D schreef op dinsdag 24 november 2015 @ 15:50:
Daar probeer ik wel rekening mee te houden, door o.a. een kleine selectie van lettertypes aan te bieden (regular/medium/bold).

Ik gebruik altijd dit lijstje

Cascading Stylesheet:

.arial { font-family: "Nimbus Sans L", "Liberation sans", "Arial Unicode MS", Arial, Helvetica, Garuda, Utkal, FreeSans, sans-serif; }
.tahoma { font-family: "Luxi Sans", Tahoma, Loma, Geneva, Meera, sans-serif; }
.trebuchet { font-family: "DejaVu Sans Condensed", Trebuchet, "Trebuchet MS", sans-serif; }
.lucida { font-family: "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif; }
.verdana { font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif; }

.courier { font-family: "Nimbus Mono L", "Courier New", FreeMono, Courier, monospace; }
.lucida { font-family: "DejaVu Sans Mono", "DejaVu LGC Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", Monaco, monospace; }

.times { font-family: "Nimbus Roman No9 L", "Times New Roman", Times, FreeSerif, serif; }
.palatino { font-family: "Bitstream Charter", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Times, serif; }
.georgia { font-family: "URW Palladio L", Georgia, Times, serif; }

In volgorde van: Linux, Mac, Windows
Juist in die volgorde omdat, als men windows fonts installeerd op OSX/Linux ze erg lelijk zijn.
Op deze manier blijft het OS getrouw en de fonts zijn uigekozen op 95% compatibiliteit (karakter breedte en hoogte) zodat tekst voor 99% afbreekt naar de volgende regel bij het zelfde woord.

[R4gnax]

kaassouffle schreef op dinsdag 24 november 2015 @ 17:43:
Heb je een officieel webfont, of heb je hem gegenereerd met Font Squirrel ?

'Officieel webfont', heh...
Zo ongeveer de helft van alles wat op Google Fonts staat heeft problemen met slechte verticale metrics, incomplete (of totaal ontbrekende) hinting tables, corrupte ligatuur definities of degenerate paths in de glyphs van de fonts zelf. 'Officieel' betekent niet veel.


Wat betreft het probleem van Wolf3D: yup, dat is het font. Het probleem met de vertikale uitlijning heeft te maken met slecht gedefineerde ascender, descender, baseline of em-square.

De 'vreemde haakjes' die je ziet als je dit font laat aanpassen door font squirrel komen waarschijnlijk doordat font squirrel de hinting tables probeert te herbouwen a.d.h.v. de vorm van de glyphs. Als de vector outlines / paths slecht in elkaar steken, dan faalt dat algoritme en kun je dit soort troep krijgen.

[Wolf3D]

Bedankt voor jullie reacties.

@R4gnax: Ik was er al een beetje bang voor. Heb zelf ook (via Font Squirrel) de ascender en descender proberen te fixen, maar het hielp allemaal niets, of zorgde weer voor nieuwe problemen.

Het probleem is dat het font al binnen het gehele project waar ik aan werk is 'geïntegreerd'. Afstappen van dit lettertype willen we eigenlijk niet.

Inmiddels ben ik na wat onderzoek erachter gekomen dat veel sites die dit lettertype gebruiken en waarschijnlijk tegen hetzelfde probleem aanliepen, alle buttons en dergelijke in hoofdletters weergeven. Dan speelt het probleem niet...

Dus dit ga ik ook maar proberen.

[kaassouffle]

R4gnax schreef op woensdag 25 november 2015 @ 09:29:
[...]


'Officieel webfont', heh...
Zo ongeveer de helft van alles wat op Google Fonts staat heeft problemen met slechte verticale metrics, incomplete (of totaal ontbrekende) hinting tables, corrupte ligatuur definities of degenerate paths in de glyphs van de fonts zelf. 'Officieel' betekent niet veel.

Google Fonts is ook weer een verhaal apart evenals een desktop variant door een webfont generator halen, maar van een officiële fontmaker die een web-versie levert verwacht ik wel kwaliteit.

[R4gnax]

Wolf3D schreef op woensdag 25 november 2015 @ 14:26:
Het probleem is dat het font al binnen het gehele project waar ik aan werk is 'geïntegreerd'. Afstappen van dit lettertype willen we eigenlijk niet.

Inmiddels ben ik na wat onderzoek erachter gekomen dat veel sites die dit lettertype gebruiken en waarschijnlijk tegen hetzelfde probleem aanliepen, alle buttons en dergelijke in hoofdletters weergeven. Dan speelt het probleem niet...

Dus dit ga ik ook maar proberen.

Je hebt altijd nog diensten als Identifont, waarmee je snel side-by-side fonts kunt vergelijken en een getrouwe kloon kunt proberen te vinden: http://www.identifont.com/find?similar=brandon+grotesque

Als je trouwens Brandon Grotesque en Brandon Text naast elkaar legt, dan zie je dat er al nauwelijks verschil tussen die twee zit. Dus waarom dan, als er op plekken dan toch al Text gebruikt wordt, gebruikers opzadelen met de extra download voor Grotesque? En waarom jezelf opzadelen met de moeite om om de problemen met een font wat gewoon kapot is, heen te werken?

[Wolf3D]

Helaas is Brandon Text toch wel net iets TE anders. Echter heb ik het inmiddels een soort van opgelost. Verre van optimaal, maar het werkt.

Ik heb de inline OTF-code van het lettertype gebruikt (van een andere website) welke afkomstig is uit TypeKit. IE vind dit niet leuk en kan hier niet mee overweg, dus voor die browser een fall back naar het EOT font welke ik al had en voldoende werkt voor oudere browsers.

Zoals gezegd, verre van optimaal, maar voorlopig werkt het.