Comment by manigandham
11 years ago
Side note: Please STOP using tiny font weights. Text becomes ridiculously hard/painful to read.
There's no reason to use a font-weight of 200 (or anything less than 500) on body text, save that for the headlines.
11 years ago
Side note: Please STOP using tiny font weights. Text becomes ridiculously hard/painful to read.
There's no reason to use a font-weight of 200 (or anything less than 500) on body text, save that for the headlines.
There is something wrong with your rendering. What system are you using? It looks to me like the hinting and/or sub-pixel rendering is wrong. I had a lot of problems with this when I moved to Arch Linux because Debian had done some default setup that I needed to figure out in Arch. Here are my xresources for xft if you are using Linux (probably formatted badly, but you can get an idea):
Xft.autohint: 0 Xft.lcdfilter: lcddefault Xft.hintstyle: hintslight Xft.hinting: 1 Xft.antialias: 1 Xft.rgba: rgb Xft.dpi: 96
It will give you a place to start, anyway. Main things you will want to change are the rgba and dpi depending on your monitor. The filter and hintstyle depends on your preference. Just make sure to turn autohinting off.
If you are using something else, then I'm not sure how to fix it, but I can tell you for certain that it is broken ;-)
Enough other people (who can read other websites perfectly fine) are complaining about breakage that it's pretty clear this site is doing something wrong. "You had one job ..." applies here. Body text on a webpage should be readable on all platforms.
Well, it's up to you if you want horribly mangled text rendering ;-) I won't make a judgement call one way or another on the font weight on the site. I'm just telling you that your font rendering is misconfigured. This is why you can't read that text.
Even for higher font weights, the rendering in your example is atrocious. Compare the sibling post's thicker fonts to yours. Notice how yours are fuzzy on the outside? His are crisp. Now, pick a website with a font you like. Shrink the page down so the characters are really small. Look at the characters closely. Do you see how it looks smeared and how there are pixels of different colours (not just black and gray)? This is the result of the misconfiguration. Good hinting will allow you to shrink the font to a very small size and still have good anti-aliasing. Without playing with it, I don't know if it's just that you have the DPI set wrong, or if you have auto-hinting turned on (which you should never do now that the hinting algorithms are no longer patented), or possibly something else.
If you ever decide to look into it, probably the best keywords to search for is "anti-alias" and "hinting". It seems silly to me to put up with such awful rendering just because you are too stubborn to consider the possibility that you are wrong.
1 reply →
Nothing is broken with my rendering or system. This is a fresh Windows 10 on a normal 1900x1200 24" monitor.
The font used is a fancy font with thinner strokes and then using a font-weight of 200 makes it that much smaller, making it illegible. There's no reason to make body text so skinny and it's often better to stick with normal system fonts.
Headlines and occasional larger text can have more styling. This is just a failure of design/UX on this site.
I'd be curious to see how the screenshot below looks on your system.
http://i.imgur.com/xCWBCcB.png
I'm not sure what you're asking here... that text looks fine but it's also much larger than mine. Are you on a 4k/retina/high DPI monitor?
I'm viewing on a 1900x1200 24"
The problem is not so much the font weight as the font itself. Time to abandon 'Humbug' on that site which is translating to SourceSansPro-Light-webfont at font-weight: 300.