I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
Related
I have an – character that becomes invisible when the text is rendered at a smaller font size (the applicable font-size rule is 14px, at which it is invisible; if I zoom in one level in Firefox, it becomes visible.) I have only seen this behavior on Firefox on Windows. With Firefox on Linux, I see the character at all sizes. I believe that what happens is that at smaller sizes, the dash is allowed to render as a line of zero width. So the question is, how can I remedy this? Here's what I can think of -
Try a different dash character and hope for the best
wrap the dash in a span and force it to be bigger - seems clunky
maybe my font definition is broken - this is embedded Open Sans
any other approach I'm overlooking?
Don't use any of the legacy 90's Microsoft core fonts in Windows (Arial, Verdana, etc). They have very aggressive hints intended to prevent "fat" or "blurry" stems at all costs, that result in some of those stems disappearing at small sizes. Perpetuating the pixelated look Windows users were accustomed to was the only thing Microsoft cared about at the time (there are built-in workarounds in the Microsoft rendering stack to hide the bugs of those fonts, but they don't exist in third-party apps).
Have you tried a different font-family to see if it's showing the same problem?
This is a problem of fonts, not browser support. Try to use another font like "Times New Roman" to verify.
In the case of the small icons, the most reliable solution is to use the CSS #font-face rule to ask the browser to download a particular font. Then you'll know for sure that the user has an appropriate font installed. There are even some fonts designed specifically for this use, with extra icons built in: "Font Awesome" is a well-known example.
Please look here for more information: Does every browser support all unicode?
I've got text on a website that is styled with the CSS rule:
font-weight:normal;
When viewing it through Chrome version 25.0.1364.99 on my local machine that is running MacOS 10.7.5 the font looks normal, but when viewing it from a different computer with the same OS version, same Chrome version, and same font set the text looks abnormally thin.
Is there something other than styling and font that could be affecting how the font is rendered in the browser??
Make sure they both have LCD font smoothing set. This can make a difference in how a font looks visually. This can affect some fonts more than others, so the system font may look the same between the two, while the one you're using may look different. Also, if one screen is much higher quality, this setting can have a more profound effect, but they still may look different (e.g. retina vs non-retina).
On 10.8 this setting is under System Preferences, General.
Check this one:
font-smoothing:antialiased;
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
It is possible that one of the operating systems has different accessibility or display options. Check out the font options under the display settings. That could be your culprit.
I'm no designer, I can't understand it, I love code and code has been my life.
For a non designer, typography is a huge 7 head serpent, and I would like to know, if there is something I can do to make my typography on the web better.
This is what I can do:
witch is nothing more than Blueprint CSS and
h1 {
font-size: 2em;
}
But I'm hating the Aliasing on the Arial font, below it's a portion of the image above at 300% zooming
From a developer side, what can I do to make my web pages look better?
I have tried font-smooth: always; but without any luck.
Font rendering varies from browser to browser and OS to OS. You can adjust the letter spacing and sizes and things like that, but there's nothing you can do, in CSS or JS code, to change how the edges are rendered or how jaggy they are.
maybe change another font? http://www.google.com/webfonts
The rendering of the font depends on how the web browser is implemented. Either the browser handles the rendering with its own implementation, or the browser uses the operating system's native text rendering.
You'll notice that the text is rendered differently on Mac OS X, Ubuntu (Linux) as well as on Windows.
Here is a collection of links about font rendering on different OS's, if you wish to know more about it:
Windows uses something they call ClearType.
Font rasterization
Comparison between different OSs
Jeff Atwood has written about this as well, here too.
You should check out these resources:
http://2011.sf.wordcamp.org/session/web-fonts-for-developers/
http://speakerdeck.com/u/maratz/p/typography-for-developers
http://aceinfowayindia.com/blog/2010/02/10-useful-typography-tools-for-designers/
Please check this screenshot!
alt text http://img267.imageshack.us/img267/1391/difference.png
This is the same page in Linux FF (on the left) and Windows FF (on the right, also it's displayed in the same way in IEs). I love how it looks in Linux FF and want to have the same look in Windows. However after playing with all CSS properties I know of, I didn't manage to change its look in Windows. Do you by chance know any solution for this issue?
Just in case: as a webdesigner you can't control pixel per pixel how your site will display on your user's browsers. Print and PDF are great for that purpose, not the web :)
Is Cleartype activated on Windows? This changes the display a lot and it's the user decision to activate or not this feature: if he doesn't like antialiasing you'd piss him off by forcing the rendering we can see on the left!
You can also change your stack of fonts in font-family and add other fonts than Arial.
You don't get to decide how the user's fonts look. The exact choice of font and whether it is anti-aliased is a client-side setting. Some (terrible luddites, IMO) prefer the pixellated look. In any case, Linux is likely to be using a lookalike fallback font (eg. ‘Sans’) rather than Arial itself, so it's never going to look exactly the same.
To turn anti-aliasing on in Windows for most fonts (in all applications, not just web browsers), you need to enable ClearType. Without ClearType, Windows's anti-aliasing is the old broken ‘font smoothing’ option, which for most fonts is so poor that Windows prefers not to use it. ClearType rendering isn't quite the same as the anti-aliasing Linux will be using; usually it only anti-aliases in the horizontal direction. So again it won't quite look the same, but it's generally considered pretty good at least for the Latin alphabet.
If you're really desperate to push it from the server side, you could use a #font-face rule to embed a font that has the GASP table hacked to always use anti-aliasing (using a ttfgasp.exe or a font editor). However doing this to Arial (or indeed most fonts without an open licence) would not be technically legal.
You can easily get the same look (or at least similar) by activating font smoothing in Windows. You can not, however, activate it using CSS.
Font smoothing is on by default in newer versions of Windows, so a lot of visitors will see it as you see it on your Linux system.
This is a user setting, and that is as it should be. Each user should be able to choose the smoothing setting that works best for him/her on his/her monitor.
If you absolutely want the text to look like on your Linux system for every user, your only option is to make it an image.
Different versions of Windows and Linux, and even different settings of their font rendering systems, yield different results in font rendering; in the first case antialiasing with subpixel optimizations for LCDs is clearly activated, while in the second case not even antialiasing is enabled.
To get nicer looking font rendering on Windows you should enable ClearType. In any case, it's all a client-side settings, and AFAIK you can't do anything for them from HTML - and you mustn't, if the user don't like antialiasing you shouldn't mess with his settings.
I'm not sure if this has anything to do with the recent Safari update, but I'm beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts.
for instance, I took screenshots of what I am seeing here on stackoverflow...
http://twitpic.com/q43eh
I have verified that this is a trend via my co-workers machines.
has anyone noticed this or have any thoughts on non-hack solutions?
Font rendering isn't specified anywhere in the standards and therefore may (and will) vary between browsers and platforms.
In particular, Safari on Windows renders fonts like OS X does which tends to look weird to Windows users as Windows has quite a different take on how to render fonts than OS X.
You can definitely notice this, especially if you use Expression Web SuperPreview. This is just a general problem of the web, just like folks can hit Ctrl-+ and make your text bigger. Try not to use many absolute coordinates in CSS and the layout engine will ensure it's still readable
I first noticed this in OSX in October 2010. It is especially noticeable with Helvetica Neue. I suspect that an OSX update broke font anti-aliasing in font sizes above 12 pixels. I've posted an Apple Support message here.