So I was under the assumption that for all possible values of font-weight, all fonts support them. However, this is wrong according to the specifications found here where it says "The nine font weights can not be relied on. These weights are dependent on weight subsets of a font being available." and exemplified in this doodle where there seems to be only normal and bold support (anything <=500 looks like normal) for font monospace. How can we tell, then, how many font-weight levels a given font supports?
In fact, the "nine font weights" are purely a CSS thing, not actually something that formally exists in any font specification. Also, any font can currently only model one weight (the OpenType specification only just got updated with variable dimensioning, and that's going to take a while to a) be refined as "this is the right way to do it" specification and b) make it into browsers), so if you want all nine supported weights you need nine fonts, and for each of those you need to tell CSS which weight it maps to because the font's internal weight value in no way has to match CSS's choice on what font weight numbers are.
If you rely on system fonts by name, or you rely on "not even fonts" by using category keywords like monospace then you're out of luck: there are almost no fonts that run the full CSS font width range.
So: if you want true control and all weights: use a webfont that you know has all nine weights, bound using some sensible #font-face rules. It's going to take a bit of effort to verify they do on your part, but once you do you are guaranteed it'll work in every (modernish) browser, on every operating system.
if you are using a google font, documentation clearly states the font weight available, for example:
https://fonts.google.com/specimen/Roboto
as for built in font, i'm not sure if there is a way. more info on how the browser handles a font-weight that is not supported can be found here:
https://css-tricks.com/almanac/properties/f/font-weight/
hope that helps :)
Related
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.
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
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.”
See images:
Firefox on Mac:
Firefox on Chrome:
On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it?
I am using a font with #font-face property.
Unfortunately, there isn't much you can do about the way each browser renders your chosen typeface. Check out this article, it explains how different browsers and operating systems render different type face files:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
In the meantime, you can do two things.
1.) There are many fonts that can be used that are effected by this rendering difference much less. Experiment with different fonts that hold the same esthetic value of the font that you are using, and try to find one that not only fits your typographic needs but also have a less distinctive difference between their individual renderings across different platforms.
2.) Create a script to sense the user's browser/OS and use that script to adjust your font-weight accordingly.
Best of luck.
You forgot to mention which of the two cases is the correct font rendering.
A few ideas that come to mind:
Since you mentioned using font-weight:600 I would try to replace it with normal/bold (depending which result you want) and check if it makes any difference. If the font file does not support a weight for 600 the browser will go on interpreting it by itself - sometimes it takes bold sometimes normal.
If the problematic browser is Chrome you can also try playing with font-smoothing - sometimes it helps improving the font rendering:
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
Also I'm not sure how you are implementing the #font-face - if you wrote it yourself I suggest generating your #font-face rule trough some service like Fontsquirell since it will generate a crossbrowser compatible code which often eliminates a few problems.
For more help you will need to expand your question with a bit more data - add the #font-face code, font name and specify which is the correct font rendering. Poor questions get poor answers.
I'm using Dreamweaver for many years which gives some suggestions to put font-families in CSS.
Is it not a font-stack? What is new in the term "CSS Font Stack"
What I know is, that one defines multiple font families to keep the typography consistent if any font is not available in system.
You are correct - You define multiple fonts and the browser will simply choose the first one in the list that you have on your system.
A font stack allows you to define multiple fonts to essentially provide a better experience for users.
Using the CSS font-family property, you can define multiple fonts, like so:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
This reads from left to right, if the user does not have Arial then font-family will fallback on Liberation all the way down to the most basic sans-serif (select any sans-serif font if the aforementioned fonts are not found).
font stack, is just a list of fonts (of font families), if the first is not available to the browser, then the second is used etc..
your picture shows 6 font stacks, you could choose from
there's nothing new, this has been the standard way to set fonts for some years now.
You are correct in your thinking. The pulldown menu has 'Web Safe' font stacks to choose from. If you use any of them your text should render fairly consistently on all devices and on all browsers.
The trend now is to use Google Fonts or some other imported or loaded fonts and thereby control what is rendered. Even then it is recommended to also include one or more alternative standard fonts in a font stack in case your visitors cannot load Google Fonts or the other choices you provide.