1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Font smoothing for Windows

Discussion in 'Off Topic' started by Dmitriy, Mar 26, 2013.

  1. Dmitriy

    Dmitriy Member

    About smoothing. I came into Windows, I opened Chrome and I came on kremen.ua
    Enormous difference in display of a font to Mac and to Windows!

    There are solutions of JS/CSS for font smoothing in the browser?
  2. Adam Howard

    Adam Howard Well-Known Member

    I like the way Apple does it. So much cleaner, clearer, and easier to read.

    Need to figure away to make Windows render like that.
  3. Dmitriy

    Dmitriy Member

    Mac OS ok. Many users are using Windows. We should do nicely for them.
  4. EQnoble

    EQnoble Well-Known Member

    You can set a shadow to the text and use an extremely low opacity, choose a color somewhere between the font color and the background-color in darkness.
    text-shadow: 0 0 1px rgba(0,0,0,0.1);

    Other options rely on @font-face...it really is up to you and what will work better in your situation and for the most people viewing your site.

    Searching for 'anti-aliasing', '@font', or 'smooth text' will get you headed in the right direction...
    Adam Howard and Dmitriy like this.
  5. Dmitriy

    Dmitriy Member

    thx. interestingly. but it is dirty. the ideal decision happens for Win? Not hack.

  6. SilverCircle

    SilverCircle Well-Known Member

    No matter what you try, you'll never get the font rendering quality of OS X in Windows. ClearType is total crap and DirectWrite (which, in theory could do it) is not mature/widespread enough.

    Just live with it - as a Windows user you'll sooner or later get used to ugly and typographically incorrect font rendering.
    Adam Howard and Dmitriy like this.
  7. Dmitriy

    Dmitriy Member

    Is similar for other browsers? It's tolerably for IE. But ugly in Chrome, Mozilla & Opera. this is how the shows:
  8. digitalpoint

    digitalpoint Well-Known Member

    It's really more of an underlying issue with how the operating system treats fonts. Specifically Windows tries to align things to the nearest whole pixel, while Mac OS X doesn't.

  9. Quillz

    Quillz Well-Known Member

    I believe in Win7 and beyond, you are now able to adjust ClearType settings so you can make fonts look a little more or less sharper. Making things a little bolder makes text look somewhat similar to Mac OS X, which uses Quartz Extreme for font smoothing and anti-aliasing.
  10. digitalpoint

    digitalpoint Well-Known Member

    Unfortunately, that doesn't really help the issue of wanting a website to look consistent for all users. :)
  11. Jason

    Jason Well-Known Member

    Basically, Windows heavily favors the pixel grid which improves readability and prevents blur, but at the cost of not being a true typeface. Apple chose the exact opposite approach for OS X, where fonts are rendered in such a way to preserve the typeface, but at the cost of sometimes appearing a bit blurry (years ago, this was more apparent -- OS X fonts were atrocious). Now that high resolution displays are becoming more common, ClearType isn't exactly needed to the extent it once was.

    For websites, the only great solution is to use a cross platform font (there's ~6 of them) and web fonts (but even browsers may render fonts slightly different), and fallback fonts for critical sections. Or, images if it really must look the same, but that's bad for your health!
  12. mistypants

    mistypants Well-Known Member

    It won't help you make your website look nice to everyone, but you can replace Cleartype with GDI++, which is what (if memory serves) Linux & OSX use for font smoothing.

    It's not a full blown program right now but it works alright.

    Again, this doesn't really fix the issue, though. At the end of the day it's really just up to the end user to configure their Cleartype settings properly... and some people really just could be arsed.
  13. Quillz

    Quillz Well-Known Member

    That's near impossible because a website is going to look slightly different for each user, based on their OS settings.
  14. Dmitriy

    Dmitriy Member

    most users will not set. smoothing to do for all users.

    screenshots in this topic of Arial. I do not know the concept of cross-platform may affect the quality of display.

    webfonts are not the solution. I tested http://www.google.com/fonts/#ChoosePlace:select in all browsers for Windows and it's ok only in IE. Safari for Windows not tested.
    fallback fonts its for symbols?

    I think something can be.
  15. SilverCircle

    SilverCircle Well-Known Member

    That's just an ugly hack. ClearType doesn't support true sub-pixel placement of glyphs and this is the single most important feature for proper (and typographically correct) font rendering. It has little to do with sharpness and a lot more with the x-placement of glyphs.

    Strict alignment on the pixel grid is not enough unless you have an extremely high resolution (about 200-300dpi, dependent on viewing distance, of course) pixel grid. Maybe, for retina displays, a simple pixel-alignment would work, but certainly not for the average display where sub-pixel placement is the only way to solve the issues.

    Another interesting article about font rendering in general can be found here.
  16. Biker

    Biker Well-Known Member

    Honestly? Who cares? Want to see a huge disparity on how fonts are rendered? Fire up Linux and hit a few sites. If you're OCD about how a font looks online, you'll go running back to Windows and never worry about font rendering again.

    Unless your site specializes in graphics and the preview of said graphics is critical, minor issues on how the various operating systems render fonts should be a non-issue. Seriously.
  17. Dmitriy

    Dmitriy Member

    I think the little things are important. It's like a Unibody and Magsafe for Apple. Even more important.
  18. Dmitriy

    Dmitriy Member

    Hm! It very interesting. Look that does Photoshop in Windows. It, of course, not Mac but how it does smoothings?
  19. Dmitriy

    Dmitriy Member

    May be possible to repeat the same actions that makes Photoshop on CSS +/- canvas?
  20. EQnoble

    EQnoble Well-Known Member

    in firefox you can try this as well

    navigate to about:config

    scroll down to: gfx.use_text_smoothing_setting and double click

Share This Page