I use font-family: Myriad; font-size: 40px for some text. I can't believe IE displays the font in the best quality! Much better than Opera, Firefox and Chrome.
How can it be? How can I make text look as good in other browsers as in IE?
Here is a demo:
http://jsfiddle.net/55Ruh/3/
Try this link in all browsers. IE (the newest version, 9) shows the best and most quality text, doesn't it?
Simply put: this is because IE9 introduces a new font rendering engine that is based largely on that seen in WPF's ClearType implementation. Its enhanced engine does a better job at reducing jagged edges, making fonts look smoother and better, especially at large sizes.
Getting into the details — and I mean to get really technical — this breed of ClearType is different from the one seen in the rest of Windows, also known as GDI ClearType (for Windows' GDI graphics library). The old GDI ClearType is the one that Windows versions of most other browsers base their font rendering engines off, which is also the one that makes fonts look really jaggy in large sizes.
The following paragraph from the second link summarizes most of the rest of its content, that explains quite nicely why fonts look smoother in IE9's new engine:
A significant improvement over the previous version of ClearType is the use of sub-pixel positioning. Unlike the ClearType implementation found in GDI, the ClearType found in Windows Presentation Foundation (WPF) allows glyphs to start within the pixel and not just the beginning boundary of the pixel. Because of this extra resolution in positioning glyphs, the spacing and proportions of the glyphs is more precise and consistent.
See, especially, the section on Y-direction anti-aliasing with screenshots for comparison. Another quote:
ClearType in Windows Presentation Foundation (WPF) provides antialiasing on the y-direction level to smooth out any jagged edges.
To "make text so nice as in IE in other browsers", you could try text-shadow.
text-shadow:0 0 1px #eee;
Live demo: http://jsfiddle.net/simevidas/55Ruh/5/
Related
Hi when I using photoshop the fonts are so smooth and doesn't look pixelated. Now I have seen this on many different sites, how smooth the fonts are and don't look pixelated at all.
I was wondering if there was a property or something that i can use to get the text smooth in css.
For example ---> http://css-tricks.com/forums/discussion/10533/text-smoothing/p1
see where it says '[Solved] Text Smoothing', how do i get the text that smooth without having to make the font oo big, I'm using "Arial Black" font on my site.
As mentioned in the link you shared quite a large degree of font smoothness has to do with the browser or OS that the type is displayed on.
For example, Windows uses ClearType technology to help smooth fonts. And yet, on a Windows machine, the font will look slightly different in each browser. I have noticed this effect while testing various sites across the major browsers.
Another thing about 'Generic' fonts (those included in most machines by default), is that the base font might differ slightly OS to OS etc. So for that reason you may look into a custon CSS3 font on your site so that you know that users with support for custom fonts will have a very similar appearance.
If you are set on using one of the web safe fonts, I would recommend testing various font-weights and seeing if one renders particularly well in most browsers. As the font weight correlates directly with the approximate size on screen this will affect the pixels being used and it is possible that some weights perform poorly in ClearType and related font smoothing technologies.
I would try finding an Arial lookalike otherwise.
I'm trying to turn my icons into font glyphs.
Now, the problem is antialiasing of the font in Google Chrome on Windows 7 (it looks good on OS X). I took two shots, where on the first one you can see the desired behaviour, as seen on Firefox/Windows 7 and all the other browsers, except Google Chrome, which is the second shot. Is that problem in font itself? Or is it because of system settings? Is it in CSS settings?
Firefox 12 Windows 7
Google Chrome 18 Windows 7
The most problematic parts are highlighted with red.
Use CUFON instead of #font-face it's a better option as per the rendering font in windows because CUFON put the font in canvas & it's look smooth in windows.
Using text-shadow helps a little, try adding a little bit of shadow with 4-6 pixels of blur. Play around with it and you may find the "sweet spot." Some font sizes also seem to be more problematic than others, try taking it up or down a pixel or two and see if that helps. I'm tilting at this particular windmill with Google right now and hoping I can get someone's attention. In this image, the top example is IE9, the bottom example is Google Chrome (both Windows 7). https://twitter.com/#!/tacomamama/status/197397136470589440/photo/1
Is it normal that fonts I used to create site layout are pixelated? I use Georgia, and in photoshop I've smooth lines everything looks great. But when I tried to slice it up and code the css, Georgia font same size looks noticeably uglier!
What are your thoughts?
p.s. I use em to declare sizes in css.
That's because photoshop is using anti-alias technique on text.
Both OS and browser will impact the appearance of text in web page.For example, Mac OS has anti-alias text on all system UI. For windows, I believe they have an option called 'ClearType', once switched on all system UI will have smooth texts.
All fonts on the web will look a little pixellated unless you're on a Mac which renders type considerably better than PC.
The best way I have found to replicate how a font will look on the web is to set the Anitialiasing in Photoshop to 'sharp'.
It is conceivable that there will be CSS markup in the future that will allow antialiasing in the browser rather than OS based.
It is a common problem.
See this article
http://jontangerine.com/log/2007/10/smoothing-out-the-creases-in-web-fonts
The alternative is to use something like Cufon that generates images for your text. Best practice would be to only use it for headings.
http://cufon.shoqolate.com/generate/
I've found this too - each browser renders fonts differently. I often find fonts look much better in IE. Sometimes I opt to use images created in PS to get that smooth look, but for the most part I think people are used to how fonts are rendered in their browser of choice.
In photoshop, there's an option to "smooth" text.
See this image. Bottom right corner.
Remove this anti-alising to have a better view (but not exact) of how the font will look in browser.
It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8.
But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering?
I'd imagine it matters very little in these modern browsers you listed in your comment:
IE 8/9, and latest versions of
Firefox/Safari/Chome/Opera
However, I have heard of a bug in IE8 when it comes to an image of exactly the size 1px * 1px:
Internet Explorer 8 doesn't perform
the repeat of a 1x1 pixel
semi-transparent background image
correctly when any other element on
the page is using the "-ms-filter"
drective for the alpha transparency:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
and the demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/
So, 8x8 seems like a good enough size to use. I'd be surprised if anyone on the Internets has cared enough about this to rigorously benchmark it.
I did find this, which discusses the subject:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html
Make sure to also read the comments.
To sum it up, I'm going to quote myself from months ago:
I'd imagine it matters very little in [the] modern browsers [IE 8/9, and latest versions of Firefox/Safari/Chome/Opera] you listed
in your comment.
In some email clients the image won't repeat unless the background image is at least 25X25 so I've settled on that as my default size.
I don't think there is an "optimum size," but the general opinion is that larger dimensions are better than small: see this question, and this one too.
When creating web pages how do we achieve a consistent font size across browsers. I have used something like "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" in my CSS, but the text looks different in Firefox, IE, Google Chrome and Safari (and this is not even on different platforms). Basically on the same machine, that is running Windows Vista, I get a different look and feel under different browsers.
How can this be fixed so that the size of text appears same on all the different browsers.
You will want to use a CSS Reset to attempt to get consistent behavior across all browsers.
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.
Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.
When creating web pages how do we achieve a consistent font size across browsers
For main body text, you don't. Some people want bigger text so they can read it more easily; get in their way at your peril. Use relative font sizes in units such as ‘em’ or ‘%’.
For small amounts of presentational text where you need text size to match pixel-sized on-screen elements, use the ‘px’ unit. Don't use ‘pt’ - that only makes sense for printing, it'll resize more-or-less randomly when viewed on-screen.
You can still never get the text exactly the same size because fonts differ across platforms—and Lucida Grande and Helvetica look very different of course.
With these two settings, you can reach exact same font appearance:
font-size: 70%; // better than px
line-height: 110%; // required to make line heights the same
Tested: IE9, Firefox, Google Chrome
This is a non-answer, as there are ways to achieve what you need, but i'm not too well-versed in them. Start with the "reset" that frameworks like blueprint usually provide and go from there.
It is usually much easier and smarter to have designs be flexible enough so that the small differences across browsers don't play too big a role.