I have a fairly standards compliant XHTML+CSS site that looks great on all browsers on PC and Mac. The other day I saw it on FF3 on Linux and the letter spacing was slightly larger, throwing everything out of whack and causing unwanted wrapping and clipping of text. The CSS in question has
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
I know it's going with the generic sans-serif, whatever that maps to. If I add the following, the text scrunches up enough to be close to what I get on the other platforms:
letter-spacing: -1.5px;
but this would involve some nasty server-side OS sniffing. If there's a pure CSS solution to this I'd love to hear it.
The system in question is Ubuntu 7.04 but that is irrelevant as I'm looking to fix it for at least the majority of, if not all, Linux users. Of course asking the user to install a font is not an option!
A List Apart has a pretty comprehensive article on sizing fonts in CSS. Their conclusion is to use "ems" to size text, since it generally gives the most consistent sizing across browsers. They make no direct mention of different OSes, but you should try using ems. It might solve your problem.
Have you tried it in FF3 on windows?
Personally, I find a good CSS Reset goes a long way in making your page look the same in all browsers.
Sizing/spacing differences are usually difficult to catch. What you can do is create a Linux-specific CSS file that will contain these values adjusted for Linux, then do a simple JS-based detect to inject that CSS if the User agent is a Linux one.
This is probably not the cleanest approach, but it will work, and with the least intrusion into your otherwise clean HTML/CSS.
I find the easiest way to solve font sizing problems between browsers is to simply leave room for error. Make divs slightly larger or fonts slightly smaller so that platform variation doesn't change wrapping or clipping considerably.
Unless your site is expecting an above-normal amount of Linux-based traffic, you're probably going to adversely affect more people if you "sacrifice the user’s ability to adjust his or her reading environment" as opposed to just not caring about the Linux experience.
Having said that, if you do want a nice Linux experience, you should address the reasons behind why your design breaks under small variations in font spacing, given that these issues are difficult to control under current CSS implementations.
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'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):
I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:
a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".
b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".
I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.
How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?
From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.
In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.
It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.
There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.
To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.
Check these links out if you wish to read more, hopefully they can be helpful:
Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?
How to do font antialiasing in web page?
Webfont Smoothing and Antialiasing in Firefox and Opera
http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
"The #font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, #font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The #font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
https://developer.mozilla.org/en-US/docs/CSS/#font-face
Its not a perfect solution, but it may get you closer to where you want to be.
We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.
On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.
When you're using a webfonts service you're at the mercy of how that service handles font embedding.
However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.
Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.
Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.
Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.
From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.
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/
I don't like Microsoft's font rendering.
I've created a site for a client and the last unticked box on my debugging list is the biggest. (it's not 'live' yet btw so please ignore any other bugs - http://baked-beans.tv/bb)
I'm using font-family to import a non standard web font. It renders fine on Mac, but it looks like sick old man on its last legs on PC.
The biggest irony is that the font is actually ok to read in internet explorer 8. This is the first time I've EVER seen IE beat other browsers in anything. But anyway, the font doesn't look good in FF, Chrome, or Opera, on a PC.
So my solution is to serve different fonts to PC users. There are a lot of css hacks for different browsers, but not for different OS. the php OS detections are really really complex. I'm just looking for something simple like if(PC) do this; else do that;
Any advice would be immensely helpful
Just one other thing... Just wondering if there is a way I could prevent Windows from anti-aliasing type on the Internet? The reason why it looks so bad is because it's trying to anti-alias it, maybe if it left the poor font alone it wouldn't look so bad.
The CSS Browser Selector can target different OS's. :)
No, you can't "kill" anti-aliasing.
But, you could use http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/ for detection.
From what I saw only the headlines are crap so you could as well use http://cufon.shoqolate.com/generate/ for those and make your life easier.
My favorite article on this topic is here:
http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems
There is a lot of good discussion including TypeKit developers on the reasoning behind that, and it has a link to an interesting article about using JavaScript to detect whether font smoothing is in use (you definitely can't do it with CSS alone).
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
Good luck.