font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:200
font-weight:300
font-weight:400
font-weight:500
font-weight:600
font-weight:700
font-weight:800
font-weight:900
I've only used font-weight:bold and sometimes font-weight:normal to override bold so far. What are the usages of the others?
I created this example page with all the values for the property, but there's not much difference in many of them.
http://jsbin.com/omaha3
If the font you are displaying has more weights like semi-bold, light, etc. the browser may be able to render those weights if you use one of the numeric values. Most end-user fonts come with two or three styles only, though, so I don't think this is much applicable to the real world. I would rely on normal (=400 I think) and bold (=700) only.
There's good additional info in the W3C reference on font-weight: bold as well.
Update: Here is an in-depth blog post on how the styles are rendered in modern browsers. It is titled "Font-weight is still broken in all but one browser" :)
2nd Update: As clagnut.com suffered a catastrophic dataloss here is the archived post
It depends on the browser/OS too. Firefox on the Mac tends to support more graduations (5 different weights for Myarid pro) and Firefox 3 on Windows will sometimes display a light font. The other browsers on Windoows or Mac only display two weights - bold or normal.
When I want cross-browser control of font-weight, I set my text color to a grey - say #777 and then my bold colors can be #444 and #000 and my lighter colors can be #aaa and #ddd. It doesn't change the thickness like font-weight does but it still gives the visual impact.
edited to add the IE6 craziness with font-weight
font-weight:600 in a print stylesheet causes IE6 to print out bold and italic but print preview shows only bold.
Depends on requirement, and can be useful when you are creating proportional font sizing for stylish textual looks.
Related
Sorts Mill Goudy is a great-looking font, and renders beautifully on Chrome.
However, it doesn't seem to have a native bold-face. (It does have italics, though.)
So, I suppose it is up to the browser to apply a "faux-bold" if the font-weight is set to bold.
It turns out that different browsers apply this "faux-bold" very differently. In the case of Chrome, it looks wonderful at 800 font-weight, but Safari and Chrome don't take the same approach. They are clearly trying to do something to make it bolder, but not doing what Chrome is. The result is reminiscent of pre-unicode foreign language encodings trying to typeset themselves... each letter seems a bit too wide, and it just feels "off", especially compared to how Chrome handles it.
What is going on here? Is there a way to export Chrome’s faux-bold as a font file (ttf or otherwise), and force other browsers to follow suit?
How can I achieve cross-browser consistency here?
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<style>
h1
{
font-family: "Sorts Mill Goudy";
font-weight:400;
font-size:3em;
text-align:center;
}
h1.b
{
font-weight:800;
}
</style>
<h1>Test Text: Font-weight 400</h1>
<h1 class="b">Test Text: Font-weight 800</h1>
Codepen: https://codepen.io/1bc25a/pen/oNWOQoL
Image: Side-by-side font renderings
I am afraid that what is going on here is actually every browser doing his own thing in font rendering. It may even get worse if you test in Edge. Every browser seems to take its own approach to rendering font weight and anti-aliasing. So since you don't find a native bold face somewhere, there might be little you can do :/
It might be comforting that you are not alone with this problem, as you can see here: https://blog.stephaniestimac.com/posts/2020/06/browser-fonts/
And it might be helpful remembering that Mr. Berners-Lee knew from the very beginning that those new kind of pages would be displayed on all kind of devices and therefore HTML and CSS are all about taking control away from the designer and giving it to the rendering device or user.
You might try and hack about a bit by detecting browsers and feeding them differen font weights, but I don't know if that will make things better, and I am pretty sure it might not be worth it.
Sorry, I fear this is not the kind of answer you wanted ...
in my web project I need to mix latin and cyrillic characters. Unfortunately the cyrillic characters are not part of the webfont, thus the fallback steps in.
As I use a bold webfont the latin characters are bold but the fallback would only be bold, if I set the whole paragraph as font-weight:bold or alike.
I remember discussions that this should be prevented as some browsers can't display them correctly, but during my tests I wasn't able to produce a really broken layout when bolding the webfonts.
What do you think? How can I solve this problem?
Thank you
Markus
Yes, most webfonts provide specific weights like 400 for Regular and 700 for bold. If these aren't provided and you bold/strong them, you are in essence using the font outside of its original intent.
Font weight values can be used, but I'd always stick with the ones provided with the webfont you're using.
Also, if a weight you declare is not available, it will not show on the page but simply default the "logically closest" (this from the CSS Tricks article below) weight.
See a little more basic description here: https://css-tricks.com/almanac/properties/f/font-weight/
Yes it's still recommended you don't do this.
By using font-weight:bold you're forcing the browser to try and create the bold version of this font itself, which can often look distorted / fuzzy. This is referred to as faux styling.
You should set different #font-face definitions with different font-weight values which make use of multiple font files.
Many fonts on Font-Squirrel (Afta Sans, etc) and Google Fonts don't include bold "specimens" of a given font set. Chrome doesn't seem to be able to estimate bold weights as Firefox, Safari, and even IE do. I've looked at this for quite a while, doubting that chrome, of all browsers, wouldn't have this capability. This seems to be quite limiting for the available fonts we can use, am I wrong?
This also seems to add unnecessary file size to font files when an estimated bold look would do.
Afta Sans, at least as distributed via Font Squirrel, does not have a bold typeface at all. That’s why there are no specimens of Afta Sans as bold.
If you still request, via HTML or CSS, a bold typeface, most browsers will synthesize bold glyphs from regular typeface glyphs by algorithmically bolding them. This is not a requirement, just what browsers tend to do. The CSS Fonts Module Level 3 CR says, in describing font-weight: “Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Authors can explicitly avoid this behavior by using the ‘font-synthesis’ property.”
If you mean that some browser version on some platform does not do synthetic bolding, then that’s a decision by the browser vendor. In theory you could use the font-synthesis property to explicitly request for synthesis, but in practice it hardly affects anything; the defined initial value of the property means that synthetic bolding is allowed and, besides, most browsers do not support this property at all.
But the current version (33) Chrome on Windows does synthetic bolding.
If you are referring to the quality of synthetic bolding, then that’s inevitably browser-dependent. The page Say No to Faux Bold says: “What your users see can be better or worse depending on their browser and the fonts you start with. Some browsers, like Firefox, smear their bolds more, making a mess of display type. Other browsers, such as Chrome, smear their bolds very little, so that the distinction between bold and normal can be lost. None of these faux faces come close to what you can get from a real font.”
Here is an example:
First - how it looks in Chrome, second -in Firefox (hardly readable).
CSS:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 13px;
Can you please provide an example, how I can make this element's font bold only if browser is Firefox?
When I test 13px Arial, it looks slighty lighter in Chrome than in Firefox, rather than the other way around as in your case. Stay tuned to variation across browser versions, platforms, and settings, as regards to font rendering.
Usual browser detection techniques could be used in JavaScript to check whether the browser claims to be Firefox and modify CSS code accordingly. But this would be a shot in the dark, partly due to the variation mentioned, partly because there is really nothing you can do to fix the assumed problem. Bolding tends to change the overall appearance of text, not just slighly thicken strokes, and bolding often reduces readability.
Ways to avoid creating problems like this: Do not set font size to something as small as 13px. Especially for small font sizes, use black (or something very dark) on white (or other very luminous) background, instead of the opposite, and in particular avoid making the color contrast too small.
it seems firefox can only take 2 background url in css... if it has a 3rd the font makes that blurry/pixelated effect. NEVER THE LESS.... i found that its true on a windows XP. the same firefox on a windows 8 works fine. (I was surprised) i might think it has something to do with the "use hardware if available" option in forefox.
Try removing a background "image" or "color" from one of the table's CSS.... if its solved then... firefox sucks.
I am having some problem with Google webfonts.
I am using Google Webfont called ‘Bitter’.
But in Firefox and Chrome it is being rendered differently. Chrome and Opera seem to render it in similar way. It’s not drastically different but it’s messing up the formatting and compositions of the paragraphs.
Here is the CSS:
.small-col h3{
color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;
}
And here is a screenshot of the issue I am talking about:
http://i49.tinypic.com/2u46mpi.png
Could anyone suggest how I can get consistent rendering in both Firefox, Chrome and Opera?
Thanks
Fonts are never going to render the same across all browsers. They use different rendering engines—trying to get websites to look identical on every browser is a lost cause.
For your specific problem, use a non-breaking space to prevent contact and us from being separated.
<p> ... contact us </p>
It looks like firefox is rendering the weight a little different, and the spacing a little differently too. Maybe try defining those numerically, as well, to override any browser defaults. Unfortunately, different browsers and especially OSs like to render fonts differently and by their own rules at times.
There can be differences in font rendering between browsers, though more often, differences exist between platforms.
However, here the difference seems to be caused by letter spacing. More exactly, Firefox correctly applies it, WebKit browsers don’t. For 16px font size, -0.06em should result in a little over one pixel, and if you use the inspection mode (F12, computed style), you will see that Firefox applies -1px whereas Chrome uses normal (i.e., zero) for letter-spacing. Chrome seems to have some threshold on the letter spacing value; making it just -0.065em changes things.
So especially if you prefer the Chrome rendering, just omit the letter-spacing. It is generally best to avoid letter spacing – the font designer should know better, and if you agree with her or his choices, use another font, instead of of trying to “fix” the font.
One of the differences between browsers is that Firefox applies kerning by default, other browsers don’t. But this is not relevant to the specific texts in the example, since the kerning table for Bitter has pairs of uppercase letters only (so “VA” would look different, for example).
I had the same problem with the serif font. If you write "serif" instead of serif (without ""), Chrome will render the same as Firefox.
Try adding the google webfonts code to the head of your website by using the provided javascript code, instead of css or #import.
This solved my problem on this topic.