I'm converting a Photoshop image to HTML, and I noticed that when I set the font size to 11px it gets blurry, but in Photoshop it still looks fine.
So after playing around I discovered that if I set the font type option to smooth instead of none, Photoshop also makes the font blurry.
So, how can I make the font sharper using CSS so that it mirrors Photoshop's font rendering? I'm using Arial as my font. Here's my CSS right now:
.user_status {
color: #666666;
font: Arial;
font-size: 11px;
display: block;
margin-top: 10px;
}
Thank you all for you awesome answers, it helped me a lot, i wish i could chose more then 1 answer as the correct one...
Most browsers use the system's font rendering libraries, so most fonts will render slightly different on different operating systems. However, you can try using the 2 css3 properties listed below:
-webkit-font-smoothing: [ auto | initial | none | antialiased | subpixel-antialiased ]
This property only works with webkit browsers, like Safari and Chrome. See http://maxvoltar.com/archive/-webkit-font-smoothing for more on this.
font-smooth: [ auto | never | always | <absolute-size> | <length> ]
This is part of the W3C's CSS Font module specification. You can view the whole thing at http://www.w3.org/TR/WD-font/#font-smooth-prop . I am not sure whether any browser supports this property, yet. YMMV.
Unfortunately, there isn't much you can do. Browsers don't have the advanced anti-aliasing settings that Photoshop does, where you can set the font smoothing mode to sharp, smooth or crisp (which I love). You would have to make the font bigger or smaller, and it depends mostly on the browser how the text is rendered.
Unfortunately, you don't usually have any control whatsoever over how fonts are rendered by the browser. A new CSS3 property, font-smooth, may afford some control, but not the kind you're looking for.
Some alternatives might be to use JavaScript and images, rendered manually or server-side, to achieve the effect you desire. You might also be able to use sIFR (Scripted1 Inline Flash Replacement) to substitute in a small Flash movie clip that allows you to anti-alias the font however you please, but Flash is hardly ubiquitous and it's not a very efficient nor elegant solution.
So, if you absolutely need this functionality, I would suggest making transparent PNGs with Photoshop and using background-image and text-indent: -9999px to replace the text with the image.
Another point you might want to think about is, should you really be using a font size of 11px? That's rather difficult to see and you might prefer simply choosing a larger font size.
1 I might be wrong on this acronym.
In webkit you can set:
-webkit-font-smoothing: none;
This would approximate your Photoshop antialiasing: none.
See a demo here: http://jsfiddle.net/jv5W8/
Related
I'm working on a web project and one of the fonts in particular (Rosewood Std Fill) is appearing chunky when rendered in the browser. See chunky version below rendered in Chrome and regular version rendered in Illustrator. I apologize they are different sizes.
In any case the font weight and style are both set to "normal". I'm not really sure what steps to take to try to resolve this situation.
Chrome has very poor default AA. Try adding the following CSS to your text.
-webkit-font-smoothing: antialiased;
or
-webkit-font-smoothing: subpixel-antialiased
They have different results depending on whether your background is light or dark. Try them both to see which looks better in your situation.
I have problems with the fonts on my website to have skarp fonts on both mac and pc. The fonts look sharp on Mac, but on PC the fonts are very dull and thin.
Is there something specific in CSS I can do to avoid the problem with PC?
Screenhshot from mac
Screenshot from PC
It is difficult to answer this question, because there are a lot of different factors which influence font rendering.
The font itself. Is it a screen font, by means of hinting and other special optimisation for pixel based display. The font you have showed in the image looks very thin, what is always problematic in small sizes.
Font rendering is done by the OS, not by the browser, so there are always differences in the final displayed rendering.
In my experience, 98% of such cases appear if one tries to use a print font in relatively small sizes. If the font is thin in cut, problems grow.
To overcome those issues, I recommend to use screen optimized fonts (aka webfonts), those can be provided for free from google fonts etc. or bought. If it still does not look good, try bigger sizes and if that is not option, it might be the wrong font of choice.
Use Font rendering (https://davidwalsh.name/font-smoothing):
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I downloaded fonts from google web fonts to use my psd project it's okey so far.but in my html my google web fonts look different as you see below images;
my psd
and my html
font-size
font-family
line-height
font-weight
all same as photoshop but fonts look different...
and I added body
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
but nothing change..
by the way my font is Hind Fonts
All browsers will render fonts slightly differently regardless, font rendering is also is dependent on your OS.
Another thing that can effect how your fonts look is how the designer has set the text anti-aliasing in Photoshop. Text anti-aliasing is controlled here on your top menu bar (with text tool selected):
Below is the Hind font set with 5 different anti-alias settings:
Note how, in particular, the strong anti-aliasing setting changes the look of the actual font glyphs. Without seeing your actual code it is difficult to compare and diagnose any issue beyond what could be caused outside of Photoshop
You must keep in mind that every browser renders font differently. Photoshop has a lot more font functionality than a web browser. Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.
You can fix font rendering slightly using text-rendering. This
property provides information to the rendering engine about what to
optimize for when rendering text.
It's not defined in any CSS standard - it's just an SVG property.
However, Gecko/WebKit/Blink browsers let you apply this property to
HTML elements.
Some font files contain additional information about how the font
should be rendered and optimizeLegibility makes use of this
information
so you can use:
.yourText {
text-rendering: optimizeLegibility;
}
You can try and use options like font-stretch: normal; or font-weight:normal; maybe they will help you atleast a little.
Are you sure that you just didn't set the browser's view zoom to somewhat below 100%? It seams like that.
I have a CSS declaration like this:
font-family: font1, font2, font3;
where font1 is an embedded eot/ttf font, but the problem is that this font is smaller than the other fonts so I want to have a different font-size (1.8em) for this font (font1). All other fonts (font2, font3) stay untouched.
The problem is, that I cannot verify if the user's browser uses font1, font2 or font3. Is there any css declaration which allows different font-sizes for different families?
Thanks.
There is a way to do this, but it's as of now very badly supported. The CSS property you are looking for is font-size-adjust - a new CSS3 property introduced specifically to address this problem. The specification says:
In situations where font fallback
occurs, fallback fonts may not share
the same aspect ratio as the desired
font family and will thus appear less
readable. The font-size-adjust
property is a way to preserve the
readability of text when font fallback
occurs. It does this by adjusting the
font-size so that the x-height is the
same irregardless of the font used.
However, it is only supported in Firefox as of now, so you might want to look for alternatives.
For examples of how to use it, see:
http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size-adjust.html
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro
I know it has been a while, but recently I stumbled upon the very same problem as described by the OP. As font-size-adjust is still very poorly supported, I'd like to share another solution that worked for me:
Note: The following solution does only work if the fonts are embedded using the #font-face-declaration.
In that case just include e.g.
size-adjust: 90%;
in your #font-face-declaration. The relevant font will appear at only 90% the size of the specified size.
Browser support
Browser support is currently at 74% with all major browsers supported except for Safari and IE. I know this is far from optimal. But as this problem is "just" about design and not about functionality, I suppose it is better than nothing.
I am having a font issue with Arial Narrow. Because of this project, I must use Arial Narrow.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari.
Could anyone help me fix the problem? Or is it just the way the browser renders the font and there is nothing I can do?
Firefox or Safari
Chrome
.content { font-family: 'Arial Narrow', Arial, sans-serif; font-size:13px; }
jsfiddle to see what I see.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari
That's just how the web is.
Consider yourself as someone who is suggesting the typography--but not dictating it. You're suggesting that a certain font be used at a certain size.
Beyond that, though, other factors come in to play...
how does this particular browser render fonts?
how does this particular OS render fonts?
does it obey the kerning pairs?
does it implement font smoothing?
how does it implement font smoothing?
what is the browser default sizes?
did the user change the default sizes?
did the user zoom in perhaps?
or zoom out?
or resize the browser?
or open on a different device?
etc.
Or is it just the way the browser renders the font and there is nothing I can do?
Well...you probably COULD do something...maybe run javascript to measure the line widths and then re-calculate the font size to adjust the width or letter-spacing but in the end, it's all going to be a lot of extra code that may or may not actually 'fix' anything, may make things worse, and is really fighting the nature of how type works on the web.
Don't drive yourself nuts. Convince yourself right now that it's never, ever going to be perfect. It's not going to be the same between different browsers, nor is it necessarily going to be the same on the same browser on different operating systems (i.e. Firefox on Windows 7 vs Firefox on Windows 8 vs Firefox on Ubuntu vs Firefox on Mac vs Firefox on Android). End-users are very quick to fixate on stuff like this ... they need educating, it's way over most of their heads.
The font selection is always subject to the browser and also the underlying font engine in the operating system. There's really no clean way around it unless you are rendering the font yourself somehow and pushing vector or bitmap graphics into the browser.
For your single-line conundrum, consider using the ellipsis features of CSS.
http://quirksmode.org/css/user-interface/textoverflow.html