Fix 32619: clarify font-weight descriptor #32853
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs External URLs (2)URL:
(comment last updated: 2024-04-10 02:52:28) |
|
@bsmth , I know you care about the repo size, and this PR adds some sample fonts to the repo, and one of them at least is quite big (127K). There was some chat before about having a separate repo for assets that live samples could refer to. That still feels like the proper solution. Do you know what the status of this is? I see https://github.com/mdn/shared-assets exists, can it be referenced from live samples in mdn/content? |
Yes, that was the idea, indeed.
This can't be used yet, my hope was that it would be added to a GCP bucket that we could reference like |
|
Hey @wbamberg - quick update to get something going in the meantime: I've enabled gh-pages for the assets repo in mdn/shared-assets#8 This allows you to use the fonts from that repo and add your own if you need different ones. The examples cleanup work we'll be doing later in the year will likely consider this assets repo and have more robust deployment, but that should unblock you for now (although we may need a CSP entry for |
There was a problem hiding this comment.
Sorry it took so long to review. I was having issues getting the example to work locally, before realizing i had a typo!
font descriptors are rarely well covered. I've seen 9 different font-family names with 9 different font weights, with the font-family declared every single time a font-weight was included, adding about 800 lines to the CSS. In production! This entry can prevent that. I included a good deal of feedback via text suggestions. Please don't feel like you need to use my wording, but please do include the content I am trying to convey. Thank you for writing this.
|
|
||
| For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-weight` descriptor to explicitly specify the font face's weights. The values for the CSS descriptor is same as that of its corresponding font property. | ||
| Unless it contains a [variable font](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide), a single font file contains characters from a font family in a specific weight and style: for example, "Helvetica bold italic". Typically, a developer will want to use fonts from a single font family in a range of different weights. To accomplish this, you can define multiple {{cssxref("@font-face")}} at-rules for the same family, one for each weight, and set the `font-weight` descriptor to match the font's weight. Then CSS rules can select a font in the appropriate weight by setting the {{cssxref("font-weight")}} property or the {{cssxref("font")}} shorthand property. |
There was a problem hiding this comment.
| Unless it contains a [variable font](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide), a single font file contains characters from a font family in a specific weight and style: for example, "Helvetica bold italic". Typically, a developer will want to use fonts from a single font family in a range of different weights. To accomplish this, you can define multiple {{cssxref("@font-face")}} at-rules for the same family, one for each weight, and set the `font-weight` descriptor to match the font's weight. Then CSS rules can select a font in the appropriate weight by setting the {{cssxref("font-weight")}} property or the {{cssxref("font")}} shorthand property. | |
| Unless it contains a [variable font](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide), a single font file contains characters from a font family in a specific weight and style: for example, "Helvetica bold italic". Typically, a developer will want to use fonts from a single font family in a range of different weights. To accomplish this, you can define multiple {{cssxref("@font-face")}} at-rules for the same family, one for each weight, and set the `font-weight` descriptor to define the weight range for which that particular font file will be used. When CSS rules set a font weight by setting the {{cssxref("font-weight")}} property or the {{cssxref("font")}} shorthand property, the appropriate font will then be used. |
Made a suggestion which i think will help novice developers better understand the correlation between the descriptor and the CSS properties
|
|
||
| There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold typeface are often synthesized by the user agent. To prevent this, use the {{cssxref('font-synthesis')}} shorthand property. | ||
| If a font file contains a variable font, it may contain more than one weight. To reflect this, the `font-weight` descriptor can specify a range of weights, given as a space separated pair of weight values. |
There was a problem hiding this comment.
| If a font file contains a variable font, it may contain more than one weight. To reflect this, the `font-weight` descriptor can specify a range of weights, given as a space separated pair of weight values. | |
| If a font file contains a variable font, it may support a range of font weights. To reflect this, the `font-weight` descriptor can specify the range of font weights for which the font should be used as a space-separated pair of font-weight values. |
I wanted to write "numeric font-weight values", but the spec reads "<font-weight-absolute>", which includes normal and bold.
| } | ||
|
|
||
| p.two { | ||
| font-weight: bold; |
There was a problem hiding this comment.
This works, but it's the default action expected of "font-weight: bold;". Should we invert the font calls, so Karantina-Bold is displayed for normal and Karantina for bold? Or something similar to show this really makes a difference?
There was a problem hiding this comment.
I don't understand this comment.
it's the default action expected of "font-weight: bold;"
I'm not sure what "the default action" means here. Like, if you don't set the font-weight descriptor, like this:
@font-face {
font-family: "Karantina";
src: url("Karantina-Regular.woff2");
}
@font-face {
font-family: "Karantina";
src: url("Karantina-Bold.woff2");
}
body {
font-family: "Karantina", serif;
font-size: 3rem;
}
p.one {
font-weight: normal;
}
p.two {
font-weight: bold;
}...then both paras and the <strong> will select "Karantina-Bold" because that's matched last (I think). The browser will also apply synthetic boldification to para 2 and the <strong>:
It's only because we've set the font-weight descriptor that:
- para 1 selects "Karantina-Regular",
- para 2 and the
<strong>select "Karantina-Bold" don't apply synthetic boldification
... and we get proper typography:
That's what this example is showing: by setting the font-weight descriptor, you enable a rule to select the appropriate font file by setting the font-weight property.
At least such is my understanding.
There was a problem hiding this comment.
Everything you wrote is correct. The issue is that the user will not be able to see a difference between a synthetic bold and the use of the actual bold font.
I found this old example I wrote that barely works, but explains what I mean. At https://estelle.github.io/CSS/fonts/index.html#slide60 (slide 60 if the presentation doesn't actually move forward), if you change the font-weight in the p.fwd block to 700, you'll note the font family changes. The deck is old, and i had all the other fonts on my local machine when i did the presentation, so only the boldest font will work on your device. In that CSS, all the @font declarations are using the same font-family descriptor, but include different font-weight values and import complete different fonts. That was the user can see that a different font file is being used when the font-weight leads to different font-files used to render content. This is obviously not something one would do in production, but it enables the learner to really see what is going on.
In the current example on this page, the example will still be bold (or light) if the fonts don't even load. Yes, the second paragraph and the <strong> select "Karantina-Bold" and don't apply a synthetic a bold because we say so, but is it really just applying a synthetic bold? If we use drastically different fonts for normal v. bold in our @font src descriptor, the user will definitely see the effect. My suggestion was to invert bold and normal to show the difference, but drastically different fonts would be better (as it would be less confusing that "messing up" and explaining it)
There was a problem hiding this comment.
I think this example should show the actual proper common usage of the font-weight descriptor to support multiple fonts in the same family, which is what it currently does. It implies "this is a good-practice way to use font-weight, if you're not using variable fonts". That's why I don't think we should change it to show something unrealistic, even if it is more illustrative.
I do agree that the counterfactual is not that clear, and that font synthesis makes the story more complicated. It might help to:
(a) find a font family that has a clearer differentiation between bold and normal weight
(b) maybe talk about the counterfactual (and even show it in the example) to explain what is happening (and that it is in fact broken)
That would make the example quite complex. I think one underlying problem here is that a lot of this explanation would go into a guide page, and because we don't have one, it is having to go here instead.
But I do think it is important for the first example here to show an actual good practice usage. Otherwise people have to infer it from unrealistic examples, and that's also putting a burden on them.
There was a problem hiding this comment.
All valid points. We really do need a font guide!
We can leave as is, but I did think of other options. Sharing in case you want to include one of them:
-
Duplicating the first example as a second example, and just inverting the bold / normal descriptors, with something like "This example "accidentally" inverts the
font-weightdescriptors, leading to a bold font being rendered when thefont-weightproperty isnormaland a normal font is rendered when the property isbold. -
including 3 katerina fonts, serving 'light' up to 500, regular from 501 to 700, and bold 701 and above (though this would be for the numeric example after this one)
-
in the numeric example, leaving gaps, so fallback font-family is used below 200 and above 800 or something similar.
|
|
||
| The following finds a local Open Sans font or imports it, and allows using the font for normal font weights. | ||
| After this, CSS rules can select the normal or the bold font for the "Karantina" family just by setting the {{cssxref("font-weight")}} property. Note that the {{htmlelement("strong")}} HTML element also selects the bold font, because by default `<strong>` elements use a bold font. |
There was a problem hiding this comment.
| After this, CSS rules can select the normal or the bold font for the "Karantina" family just by setting the {{cssxref("font-weight")}} property. Note that the {{htmlelement("strong")}} HTML element also selects the bold font, because by default `<strong>` elements use a bold font. | |
| After this, CSS rules automatically select the normal or the bold font for the "Karantina" family based on an element's computed {{cssxref("font-weight")}} property value. Note that the {{htmlelement("strong")}} HTML element also selects the bold font, because user agents set `font-weight: bolder` on `<strong>` elements as the default. |
|
|
||
| ### Setting a range for a variable font | ||
|
|
||
| In this example we include a variable font, ["Montserrat"](https://fonts.google.com/specimen/Montserrat), using a single `@font-face` at-rule. We've used a `font-weight: 300 700` value to effectively limit the range of weights that are available. If a CSS rule uses our "Montserrat" font, then if it specifies a weight outside this range the weight it gets is clamped to the range. |
There was a problem hiding this comment.
| In this example we include a variable font, ["Montserrat"](https://fonts.google.com/specimen/Montserrat), using a single `@font-face` at-rule. We've used a `font-weight: 300 700` value to effectively limit the range of weights that are available. If a CSS rule uses our "Montserrat" font, then if it specifies a weight outside this range the weight it gets is clamped to the range. | |
| In this example we include a variable font, ["Montserrat"](https://fonts.google.com/specimen/Montserrat), using a single `@font-face` at-rule. We've used a `font-weight: 300 700` value to effectively limit the range of weights for which this font will be used. If a CSS rule includes "Montserrat" as its first declared `font-family`, but the `font-weight` property value is outside of the weight range specified by the `font-weight` descriptor, the next font in the `font-family` list will be used, as the `Monserrat` font is clamped to the limited range specified by the descriptor. |
this is what we want to say, though this might not be exactly how you want to say it.
|
|
||
| In this example we include a variable font, ["Montserrat"](https://fonts.google.com/specimen/Montserrat), using a single `@font-face` at-rule. We've used a `font-weight: 300 700` value to effectively limit the range of weights that are available. If a CSS rule uses our "Montserrat" font, then if it specifies a weight outside this range the weight it gets is clamped to the range. | ||
|
|
||
| To show the effect of this we've included another font using "Montserrat" that does not set the `font-weight` descriptor, and we've called this "Montserrat-complete". |
There was a problem hiding this comment.
do you want to change the value to auto?
| } | ||
|
|
||
| p { | ||
| font-size: 2rem; |
There was a problem hiding this comment.
| font-size: 2rem; | |
| font-size: 2rem; | |
| font-family: "Montserrat", "Montserrat-complete", serif; |
| <p class="one">Montserrat, font-weight 100</p> | ||
| <p class="two">Montserrat, font-weight 900</p> | ||
| <p class="three">Montserrat-complete, font-weight 100</p> | ||
| <p class="four">Montserrat-complete, font-weight 900</p> |
There was a problem hiding this comment.
| <p class="one">Montserrat, font-weight 100</p> | |
| <p class="two">Montserrat, font-weight 900</p> | |
| <p class="three">Montserrat-complete, font-weight 100</p> | |
| <p class="four">Montserrat-complete, font-weight 900</p> | |
| <p class="one">font-weight 200</p> | |
| <p class="two">font-weight 400</p> | |
| <p class="three">font-weight 600</p> | |
| <p class="four">font-weight 800</p> |
If we change to this, the two middle ones will be Monserrat and the first and list will be M-Complete. If we do this, however, we may want to use two very different fonts so the reader can quickly see that the middle two are different from the first and last. It is also how developers should be using @font; though most don't because font descriptors are rarely fully explained. In other words, I am super glad we are writing this!!!!!
| p.one { | ||
| font-family: "Montserrat", serif; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| p.two { | ||
| font-family: "Montserrat", serif; | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| p.three { | ||
| font-family: "Montserrat-complete", serif; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| p.four { | ||
| font-family: "Montserrat-complete", serif; | ||
| font-weight: 900; | ||
| } |
There was a problem hiding this comment.
| p.one { | |
| font-family: "Montserrat", serif; | |
| font-weight: 100; | |
| } | |
| p.two { | |
| font-family: "Montserrat", serif; | |
| font-weight: 900; | |
| } | |
| p.three { | |
| font-family: "Montserrat-complete", serif; | |
| font-weight: 100; | |
| } | |
| p.four { | |
| font-family: "Montserrat-complete", serif; | |
| font-weight: 900; | |
| } | |
| p.one { | |
| font-weight: 200; | |
| } | |
| p.two { | |
| font-weight: 400; | |
| } | |
| p.three { | |
| font-weight: 600; | |
| } | |
| p.four { | |
| font-weight: 800; | |
| } |
| - Setting the `font-weight` property to `100` for "Montserrat" gets a weight of 300. | ||
| - Setting the `font-weight` property to `900` for "Montserrat" gets a weight of 700. | ||
| - Setting the `font-weight` property to `100` for "Montserrat-complete" gets a weight of 100. | ||
| - Setting the `font-weight` property to `900` for "Montserrat-complete" gets a weight of 900. |
There was a problem hiding this comment.
| - Setting the `font-weight` property to `100` for "Montserrat" gets a weight of 300. | |
| - Setting the `font-weight` property to `900` for "Montserrat" gets a weight of 700. | |
| - Setting the `font-weight` property to `100` for "Montserrat-complete" gets a weight of 100. | |
| - Setting the `font-weight` property to `900` for "Montserrat-complete" gets a weight of 900. | |
| - Setting the `font-weight` property to `200` for "Montserrat-complete" gets a weight of 200. | |
| - Setting the `font-weight` property to `400` for "Montserrat" gets a weight of 400. | |
| - Setting the `font-weight` property to `600` for "Montserrat" gets a weight of 600. | |
| - Setting the `font-weight` property to `800` for "Montserrat-complete" gets a weight of 800. |
There was a problem hiding this comment.
Just a reminder you can use any of these instead of landing the assets in the content repo:
https://github.com/mdn/shared-assets/tree/main/fonts
i.e., https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2
There was a problem hiding this comment.
OK, now we're using Fira Sans and League Mono!
| p { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| p.one { | ||
| font-family: "League Mono", serif; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| p.two { | ||
| font-family: "League Mono", serif; | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| p.three { | ||
| font-family: "League Mono-complete", serif; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| p.four { | ||
| font-family: "League Mono-complete", serif; | ||
| font-weight: 900; | ||
| } |
There was a problem hiding this comment.
We want to show that you can use a series of fonts and the browser will select the most appropriate font for the job. We want users to see using a font family list, and not having to declare a font family every time a font-weight is changed. Hence, my recommendation is to change the example so all paragraphs use the same font-family declaration, demonstrating that when the font-weight property value is withing the range of font-weight descriptor, that font will be used. In this case, 2 and 3 will get league mono and 1 and 4 will get league mono complete.
| p { | |
| font-size: 1.5rem; | |
| } | |
| p.one { | |
| font-family: "League Mono", serif; | |
| font-weight: 100; | |
| } | |
| p.two { | |
| font-family: "League Mono", serif; | |
| font-weight: 900; | |
| } | |
| p.three { | |
| font-family: "League Mono-complete", serif; | |
| font-weight: 100; | |
| } | |
| p.four { | |
| font-family: "League Mono-complete", serif; | |
| font-weight: 900; | |
| } | |
| p { | |
| font-family: "League Mono", "League Mono-complete", serif; | |
| font-size: 1.5rem; | |
| } | |
| p.one { | |
| font-weight: 200; | |
| } | |
| p.two { | |
| font-weight: 400; | |
| } | |
| p.three { | |
| font-weight: 600; | |
| } | |
| p.four { | |
| font-weight: 800; | |
| } |
| <p class="one">League Mono, font-weight 100</p> | ||
| <p class="two">League Mono, font-weight 900</p> | ||
| <p class="three">League Mono-complete, font-weight 100</p> | ||
| <p class="four">League Mono-complete, font-weight 900</p> |
There was a problem hiding this comment.
| <p class="one">League Mono, font-weight 100</p> | |
| <p class="two">League Mono, font-weight 900</p> | |
| <p class="three">League Mono-complete, font-weight 100</p> | |
| <p class="four">League Mono-complete, font-weight 900</p> | |
| <p class="one">League Mono-complete, font-weight 200</p> | |
| <p class="two">League Mono, font-weight 400</p> | |
| <p class="three">League Mono, font-weight 600</p> | |
| <p class="four">League Mono-complete, font-weight 800</p> |
|
I am linking #10910 to this PR. Would be helpful if you could see if there's anything else to be done about the issue, but I think it already suffices as a fix. |
Fixes #32619.
Fixes #10910
This is an attempt to improve the page on the
font-weightdescriptor. I think #32619 was fundamentally caused by the fact that this page isn't very clear about what thefont-weightdescriptor is, how it relates to thefont-weightproperty, and how it is used. It includes stuff which is just wrong:...and stuff which makes it sound like this is the page for the property:
I've rewritten the description and syntax sections, more or less, and added two live samples that I hope show how this can actually be used.
I'm no expert here so might have mangled things. I do think though that this documentation could be improved. I think we should probably have glossary entries for font, font face, typeface, font family. We should probably have a proper guide to using
@font-face- this is the only thing I could find and it's very basic. And if these changes or something like them are good, we should probably do something similar with the other descriptors.Oh, the live samples don't work, maybe because preview is broken? Sorry, you might need to test this locally.