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 ?
'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.
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:
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)
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 ?
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:
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.
Ref: http://www.w3.org/TR/WD-font/#font-smooth-prop
@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
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.
You should not use images for text
try font-size: 12pt
-webkit-font-smoothing: antialiased; font-smoothing: antialiased;
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');
} }