CODEWITHSUNDEEP
htmlcssfonts
BlackHatSamurai
BlackHatSamurai

Reputation: 23513

Font rendering inconsistently on PC

I'm using the bodonixt font for a website, and if the font size is set to less than 24.5px, the font is uneven. If I view the site on a Mac, the font is okay, on PC it isn't. It looks weird on all browsers too. Is there any way I can fix this with css?

You can see what I mean here: www.fredgranados.com

Upvotes: 1

Views: 240

Answers (2)

GolezTrol
GolezTrol

Reputation: 116190

It depends on how the font is hinted (optimized). A font is a series of vector images. The vector shape doesn't necessarily fit to exact pixels, so the browser/OS/renderer should determine whether a pixel should become black or white (or a shade of grey, in case of anti-aliasing). To do this right, the font can contain Hinting information, which helps the renderer making the right choices when drawing the font. Often, fonts are only optimized (hinted) for specific font sizes, and specific targets, because this process is expensive and hard, and also makes the font file larger.

I've downloaded the Bodoni XT font on DaFont, and I wasn't really impressed by the quality of the smaller sizes when opening it in the font previewer in Windows. For instance, the serifs of some letters were completely missing in smaller sizes.

In general, it looks like this font just isn't made too well, or it is only optimized for printing and/or displaying in large font sizes.

Maybe the font is better optimized for Mac, or the Mac is better at displaying fonts like these. Anyway, if you would like this to work on other OSes as well, you'll need a better version, or a different font altogether. I've inspected some other fonts by Manfred Klein, and most of his serif fonts seem to have similar issues when displayed in smaller sizes.

Upvotes: 1

DA.
DA.

Reputation: 40697

Is it a webfont? Meaning you're loading it via CSS? If so, that's just how it is. Every browser, every OS, every user set of system and/or user preferences may cause the font to render slightly differently.

If it's not a webfont, the same issues as above apply, but you have the added issue that not everyone will necessarily have that font installed, or if they do, they may have a different version of the font.

Upvotes: 1

Related Questions