← Back to context

Comment by mikekchar

11 years ago

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.

    • Well you're responding to a different person, and my font rendering is fine (and I would fix it if it weren't). I'm just pointing out that if a lot of people are having problems reading a site for whatever reason, the site should probably be doing more testing on different configurations, and not be doing such fancy things with font weights. Another common complaint I have is sites using gray text on darker gray backgrounds, which can turn into an unreadable mess on lower contrast or lower brightness displays (like a mobile phone with the screen brightness set lower to save battery).

      And FWIW, I'm on a stock MBP, and I just revisited this site and disabled the font-weight: 300 rule on the body text, and everything became a lot more readable for me (if less "stylish"). I think the site might simply need a slight design tweak for readability.

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.