Text Smoothing

[SmashDeveloper]

Hi guys,

I am developing a WP template for my friend and in the design there is a nice big text. On Photoshop it looks smooth. How can I make it like that in the browser ?

[clokey2k]

‘Smooth fonts’ are calculated mostly by the browser and operating system. Which means you’ll probably only get the look you want by using an image or messing with some CSS ‘text-shadow’ to give the smooth illusion.

[jamygolden]

You could set the opacity to like 0.9 and see if that solves it. I’ve smoothed text edges by editing the opacity before.

[Gupocca]

As said above, the smoothness of a font mostly depends on a user’s browser and OS. However, I think I’ve found a way to increase the chances for a smooth rendering using @font-face.

I “discovered” this purely out of experimentation, but I ultimately found something that seemed to work — at least, with the font I was using.

First, save your font file to the various formats supported by @font-face. I just used Font Squirrel’s nifty generator. If you use that, it will export a stylesheet and the converted files.

Next, rearrange the @font-face property so it looks something like this:

@font-face {

font-family: 'MyFont';

src: url('MyFont.eot');

src: url('MyFont.otf') format('opentype'), local('☺'), url('MyFont.woff') format('woff'), url('MyFont.ttf') format('truetype'), url('MyFont.svg#webfont') format('svg');

font-weight: normal;

font-style: normal;

}

With any luck, your font will now render more smoothly. There are other ways to accomplish this smoothness (such as Cufón), but this worked for me.

[clokey2k]

There is a CSS3 ‘font-smooth’ property, that as of yet appears to do absolutely nothing!!! (Win 7 Chrome, and FF 3.6)

Ref: http://www.w3.org/TR/WD-font/#font-smooth-prop

[SmashDeveloper]

Thanks guys ! :D

@jamy_za: I tryed it and it works perfect! Thank you!

@clokey2k: Well yes, that’s the first thing I found on Google and the first thing I tried out…

SmashDeveloper

[sujiths777]

I think this will help you now and in your future works.

Open photoshop (or similar software) and open image panel. Select “L” radio button. Now add the background color of your text in color code field. Now select a contrasting color from vertical color bar. Then add a border with a color in between both of these colors (back ground color and text color) again from the vertical color bar.

Eg: If backgrund color is #ccc , then text color should be #333 and text-shadow color should be #666. (#ccc < #666 < #333) Now it may look better. Sujith,
Web-designer,
Xeoscript Technologies.

[TT_Mark]

@sujiths777

You should not use images for text

[sujiths777]

@TT_Mark .. I told to use photoshop only to get color codes for text according to “luminosity (L)” values. Not to make and image for text. Fine??

[ameba]

using typographic points instead of pixels or em gives you better results

try font-size: 12pt

[bEx_x3d]

-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;

[eddwinpaz]

this is the real solution.

Try it!

@font-face {
font-family: ‘chunk-webfont’;
src: url(‘../../includes/fonts/chunk-webfont.eot’);
src: url(‘../../includes/fonts/chunk-webfont.eot?#iefix’) format(‘eot’),
url(‘../../includes/fonts/chunk-webfont.woff’) format(‘woff’),
url(‘../../includes/fonts/chunk-webfont.ttf’) format(‘truetype’),
url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘chunk-webfont’;
src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);

}
}

[Author]

Posts