CSS font semi-shorthand property#44387
Conversation
Updated the 'font' property documentation to clarify usage, values, and examples. elaborated on system fonts as a value
font semi-shorthand propertyfont semi-shorthand property
|
Preview URLs (1 page) External URLs (1)URL:
(comment last updated: 2026-06-09 12:50:18) |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
@estelle, removing myself as reviewer for now. Give me another ping when it is undrafted and ready. |
font semi-shorthand propertyfont semi-shorthand property
chrisdavidmills
left a comment
There was a problem hiding this comment.
Nice work, @estelle. A few comments and suggestions for you.
|
|
||
| - {{cssxref("font-family")}} | ||
| - {{cssxref("font-size")}} | ||
| - {{cssxref("font-stretch")}} |
There was a problem hiding this comment.
Should font-stretch be deleted? It is listed here: https://drafts.csswg.org/css-fonts/#font-variant-css21-values:~:text=Set%20Explicitly
There was a problem hiding this comment.
It is a legacy term, and now just an alias. I could add (or it's legacy alias font-stretch) to the width, but i prefer not to. i'll add it as a suggestion which you can merge if you think it necessary.
| - `<'font-weight'>` | ||
| - : See the {{cssxref("font-weight")}} CSS property. Defaults to `normal`. | ||
| - `<font-width-css3>` | ||
| - : The keywords supported by the legacy `font-stretch` property. See the {{cssxref("font-width")}} CSS property. Defaults to `normal`. |
There was a problem hiding this comment.
I can see why you've done this, but it is confusing. Linking to font-width looks like a typo or a mistake. Since the keywords are exactly the same, and font-stretch is kept as an alias of font-width, could you just say "The keywords supported by the {{cssxref("font-width")}} CSS property. Defaults to normal."
If you don't feel that this is a viable solution, I think you'll need to explain their relationship in some way.
Also, font-stretch/font-width accepts a percentage as well as keywords. Are these not supported in the font shorthand?
There was a problem hiding this comment.
percents are not supported, explained in detail below, but why it says "keywords" here.
There was a problem hiding this comment.
Ah, yes, I saw the explanation later on. We are all good on that particular point.
| - `<font-width-css3>` | ||
| - : The keywords supported by the legacy `font-stretch` property. See the {{cssxref("font-width")}} CSS property. Defaults to `normal`. | ||
| - `<'font-size'>` | ||
| - : See the {{cssxref("font-size")}} CSS property. Required value. |
There was a problem hiding this comment.
In other parts of MDN, we mark optional values with the appropriate macro, and not required values.
| - `<system-font-family-name>` | ||
| - : A single keyword representing a system font, including: | ||
| - `caption` | ||
| - : The system font used for captioned controls (e.g., buttons, drop-downs, etc.). |
There was a problem hiding this comment.
| - : The system font used for captioned controls (e.g., buttons, drop-downs, etc.). | |
| - : The system font used for captioned controls (e.g., buttons and drop-downs). |
There was a problem hiding this comment.
This was kept from the original. I didn't change it b/c i am not sure it's only those two.
There was a problem hiding this comment.
I appreciate that, but it looks a bit weird to include both "e.g." and "etc."; you only need one.
Maybe "(buttons, drop-downs, etc.)" would serve the purpose better.
Either way, not that important.
| - `status-bar` | ||
| - : The system font used in window status bars. | ||
|
|
||
| There are several non-standard values are implemented with prefixes. |
There was a problem hiding this comment.
| There are several non-standard values are implemented with prefixes. | |
| There are several non-standard values implemented with prefixes. |
| - `font-stretch` may only be a single keyword value. | ||
| - `line-height` must immediately follow `font-size`, preceded by "/", like this: `16px/3`. | ||
| - `font-family` must be the last value specified. | ||
| As with any shorthand property, any of the longhand component properties not value that is not specified is set to its initial value, possibly overriding values previously set using non-shorthand properties. In addition, the shorthand resets the following properties to their initial values that can not be set by the shorthand: |
There was a problem hiding this comment.
| As with any shorthand property, any of the longhand component properties not value that is not specified is set to its initial value, possibly overriding values previously set using non-shorthand properties. In addition, the shorthand resets the following properties to their initial values that can not be set by the shorthand: | |
| As with any shorthand property, any of the longhand component properties not specified are set to their initial values, possibly overriding values previously set using non-shorthand properties. In addition, the shorthand resets the following properties to their initial values. The shorthand cannot explicitly set them: |
| - : Browsers often implement several more, prefixed, keywords: Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`. | ||
| ### Shorthand property order | ||
|
|
||
| The order of some of the longhand values within the shorthand `font` declaration is partially important and must therefore follow a few rules: |
There was a problem hiding this comment.
| The order of some of the longhand values within the shorthand `font` declaration is partially important and must therefore follow a few rules: | |
| The order of some of the longhand values within the shorthand `font` declaration must follow a few rules: |
|
|
||
| For backward compatibility, the valid values of the `font-variant` and `font-width` components do not include all the valid values or the longhand equivalents. | ||
|
|
||
| - The valid values for the `font-variant` component are limited `normal` or `small-caps`. |
There was a problem hiding this comment.
This is an odd way to structure these bits, with the DL, and it is a bit confusing. It looks like a copy-paste error or something.
How about just using regular bullets, and saying something like:
The valid values for the
font-variantcomponent are limited to the two values specified in CSS 2.1:normalorsmall-caps...
And then carry on from there.
I'm not convinced that you need to mention the spec component at all, but if you are determined to do so, you could say
The valid values for the
font-variantcomponent (specified as<font-variant-css2>) are limited to the two values specified in CSS 2.1:normalorsmall-caps...
Same suggestion for both.
There was a problem hiding this comment.
changed to paragraphs and removes spec mentions
| ### Setting font properties | ||
| ### Basic usage | ||
|
|
||
| This example defines the `font` for all {{htmlelement("p")}} elements. We set the `font-size` to `12px` and the `line-height` to `14px`, separating them with a forward slash (`/`). We know which {{cssxref("length")}} refers to each component because of the rule: "If present, the `line-height` must immediately follow the `font-size`, with the two values separated by a forward slash (`/`)". The declaration also sets the `font-family` to `sans-serif`. |
There was a problem hiding this comment.
| This example defines the `font` for all {{htmlelement("p")}} elements. We set the `font-size` to `12px` and the `line-height` to `14px`, separating them with a forward slash (`/`). We know which {{cssxref("length")}} refers to each component because of the rule: "If present, the `line-height` must immediately follow the `font-size`, with the two values separated by a forward slash (`/`)". The declaration also sets the `font-family` to `sans-serif`. | |
| This example defines the `font` for all {{htmlelement("p")}} elements. We set the `font-size` to `12px` and the `line-height` to `14px`, separating them with a forward slash (`/`). The declaration also sets the `font-family` to `sans-serif`. |
I don't think you need to repeat that here. You said it in the description above.
|
|
||
| ### System font | ||
|
|
||
| This example demonstrates using the `font` property to set a system font. We set the paragraph's font to have the same `font-family`, `line-height`, `font-size`, etc., as the status bar of the window, then we set the `line-height` to `1.6`. |
There was a problem hiding this comment.
It might not be immediately obvious to all readers what the status bar of the window is. When I saw the example, I immediately thought, "Oh, why is it a link instead of a paragraph?" why has it got a weird URL?
It might be good to clarify beforehand what the intention is here, or try to do something a bit less convoluted.
There was a problem hiding this comment.
Fair! I rewrote the text around all the example components to explain the link being bad so we disabled it with javascript
| Chromium implements `-webkit-control`, `-webkit-small-control`, and `-webkit-mini-control`. | ||
| Webkit includes the Chromium values, and adds `-webkit-body`, `-webkit-pictograph`, and `-webkit-ruby-text`, along with several `-apple-system-*` prefixed system font names. | ||
| Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`. |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| Chromium implements `-webkit-control`, `-webkit-small-control`, and `-webkit-mini-control`. | |
| Webkit includes the Chromium values, and adds `-webkit-body`, `-webkit-pictograph`, and `-webkit-ruby-text`, along with several `-apple-system-*` prefixed system font names. | |
| Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`. | |
| Chromium implements `-webkit-control`, `-webkit-small-control`, and `-webkit-mini-control`. | |
| Webkit includes the Chromium values, and adds `-webkit-body`, `-webkit-pictograph`, and `-webkit-ruby-text`, along with several `-apple-system-*` prefixed system font names. | |
| Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`. |
estelle
left a comment
There was a problem hiding this comment.
Thanks @chrisdavidmills. I think i addressed everything
| - {{cssxref("font-family")}} | ||
| - {{cssxref("font-size")}} | ||
| - {{cssxref("font-stretch")}} | ||
| - {{cssxref("font-width")}} |
There was a problem hiding this comment.
Feel free to commit this if you think it's necessary.
| - {{cssxref("font-width")}} | |
| - {{cssxref("font-width")}} (or it's legacy alias {{cssxref("font-stretch")}}) |
| - `<system-font-family-name>` | ||
| - : A single keyword representing a system font, including: | ||
| - `caption` | ||
| - : The system font used for captioned controls (e.g., buttons, drop-downs, etc.). |
There was a problem hiding this comment.
This was kept from the original. I didn't change it b/c i am not sure it's only those two.
|
|
||
| If `font` is specified as a `<system-font-family-name>` keyword, the full property value must be set to that single, case-insensitive keyword. Valid values include `caption`, `icon`, `menu`, `message-box`, `small-caption` or `status-bar`. | ||
|
|
||
| Browsers also support non-standard prefixed values. Chromium implements `-webkit-control`, `-webkit-small-control`, and `-webkit-mini-control`. Webkit includes these, and adds `-webkit-body`, `-webkit-pictograph`, and `-webkit-ruby-text`, along with several `-apple-system-*` prefixed system font names. Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`. |
|
|
||
| ### System font | ||
|
|
||
| This example demonstrates using the `font` property to set a system font. We set the paragraph's font to have the same `font-family`, `line-height`, `font-size`, etc., as the status bar of the window, then we set the `line-height` to `1.6`. |
There was a problem hiding this comment.
Fair! I rewrote the text around all the example components to explain the link being bad so we disabled it with javascript
|
|
||
| For backward compatibility, the valid values of the `font-variant` and `font-width` components do not include all the valid values or the longhand equivalents. | ||
|
|
||
| - The valid values for the `font-variant` component are limited `normal` or `small-caps`. |
There was a problem hiding this comment.
changed to paragraphs and removes spec mentions
chrisdavidmills
left a comment
There was a problem hiding this comment.
@estelle, I've read it through again and made a few more comments, but only a few typo fixes and suggestions this time around. This is looking great, so I'll approve, and you can merge when you've looked at the new comments.
|
|
||
| For backward compatibility, the valid values of the `font-variant` and `font-width` components do not include all the valid values or the longhand equivalents. | ||
|
|
||
| The valid values for the `font-variant` component are limited `normal` or `small-caps`. While no other values are supported, the shorthand `font` declaration resets all the `font-variant-*` longhand properties to `normal`, including {{cssxref("font-variation-settings")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-emoji")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-east-asian")}}, and {{cssxref("font-variant-alternates")}}. |
There was a problem hiding this comment.
| The valid values for the `font-variant` component are limited `normal` or `small-caps`. While no other values are supported, the shorthand `font` declaration resets all the `font-variant-*` longhand properties to `normal`, including {{cssxref("font-variation-settings")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-emoji")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-east-asian")}}, and {{cssxref("font-variant-alternates")}}. | |
| The valid values for the `font-variant` component are limited to `normal` or `small-caps`. While no other values are supported, the shorthand `font` declaration resets all the `font-variant-*` longhand properties to `normal`, including {{cssxref("font-variation-settings")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-emoji")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-east-asian")}}, and {{cssxref("font-variant-alternates")}}. |
|
|
||
| The valid values for the `font-variant` component are limited `normal` or `small-caps`. While no other values are supported, the shorthand `font` declaration resets all the `font-variant-*` longhand properties to `normal`, including {{cssxref("font-variation-settings")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-emoji")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-east-asian")}}, and {{cssxref("font-variant-alternates")}}. | ||
|
|
||
| The valid values for the `font-width` component are limited to keyword values: `normal`, `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`. The {{cssxref("font-width")}} longhand property also supports {{cssxref("percentage")}} values, which are not valid within the shorthand. |
There was a problem hiding this comment.
| The valid values for the `font-width` component are limited to keyword values: `normal`, `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`. The {{cssxref("font-width")}} longhand property also supports {{cssxref("percentage")}} values, which are not valid within the shorthand. | |
| The valid values for the `font-width` component are limited to keyword values: `normal`, `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`. The {{cssxref("font-width")}} longhand property also supports {{cssxref("percentage")}} values, but they are not valid within the shorthand. |
I thought a "but" might make it sound slightly more definite/conclusive.
| ### Live sample | ||
| #### HTML | ||
|
|
||
| Our HTML includes a paragraph ({{htmlelement("p")}}) containing a link ({{htmlelement("a")}}) with a convoluted [`href`](/en-US/docs/Web/HTML/Reference/Elements/a#href) attribute value. When you hover over or focus on the rendered link, your browser's status bar should display the value of this `href` attribute. |
There was a problem hiding this comment.
| Our HTML includes a paragraph ({{htmlelement("p")}}) containing a link ({{htmlelement("a")}}) with a convoluted [`href`](/en-US/docs/Web/HTML/Reference/Elements/a#href) attribute value. When you hover over or focus on the rendered link, your browser's status bar should display the value of this `href` attribute. | |
| Our HTML includes a paragraph ({{htmlelement("p")}}) containing a link ({{htmlelement("a")}}) with a convoluted [`href`](/en-US/docs/Web/HTML/Reference/Elements/a#href) attribute value. When you hover or focus the rendered link, your browser's status bar should display the value of the `href` attribute. |
| As the URL in our HTML link is not good practice, we include a script that prevents the document from redirecting to a non-existent page when the link is clicked. | ||
|
|
||
| ```js | ||
| const a = document.querySelector("a"); |
There was a problem hiding this comment.
Maybe change a to something like aElem so that it is easier to distinguish it from e at a glance.
|
|
||
| {{EmbedLiveSample('System font','100%', '100')}} | ||
|
|
||
| Hover or focus the link, then look at your status bar. The font should be the same family and size and the text in your status bar at the bottom of your browser window.. |
There was a problem hiding this comment.
| Hover or focus the link, then look at your status bar. The font should be the same family and size and the text in your status bar at the bottom of your browser window.. | |
| Hover or focus the link. The font should be the same family and size as the text in your status bar at the bottom of your browser window. |
Fixing a couple of typos, plus I don't think we need the "status bar" repetition. This is pretty clear now.
Updated the 'font' property documentation to clarify usage, values, and examples.
elaborated on system fonts as a value
updated the examples to make them look a little more like exmples (didn't completely do this part). The system font one is a bit hokey, but it shows the effect.
updated the live sample to a jane eyre charlotte bronte quote.