Web fonts helped to breathe life into designs, helping us avoid the system defaults so widely used during the early days of web design. With so many options available today, we as have plenty of tricks up our sleeves in order to serve and style custom fonts. Level 4 of the CSS Fonts Module outlines more intriguing options you will love, including some exciting properties such as font-min/max-size. This article won’t uncover every last crumb of level 4, but will highlight the interesting parts still in their infancy. The adventure starts now!
The Status Quo
Currently we sit between two levels of specs. On one side we have level 3; a spec that has been at “Candidate Recommendation” since October 2013. Looking ahead we have level 4; a spec that has been resting at “Working Draft” since July 2017. If you’re in need of a reminder regarding the order of W3C specification stages, let’s take a moment to review them:
- Working Draft (WD): Published for review by the community, including W3C Members, the public, and other technical organizations. Does not represent a consensus of the Working Group nor imply any endorsement by W3C.
- Candidate Recommendation (CR): Widely reviewed and ready for implementation. Doesn’t imply endorsement by W3C. Signals to the wider community that it’s time to carry out a final review.
- Proposed Recommendation (PR): A mature technical report sent to the W3C Advisory Committee for final endorsement.
- W3C Recommendation (REC): Receives endorsement from W3C Members and the Director. Recommends wide deployment of specification guidelines.
Now that we understand the specification stages let’s dive into the guts of level 4 and bring to light some of the known and documented features new to this module.
Fonts Module Level 4
Parts of level 3 that become standardized will be ported into level 4, but level 4 will also include its own unique additions. Sections such as Font Variations, Font Rendering Controls, Color Font Support, Basic Font Properties and Font Resources will contain brand-new items many developers will find useful.
Basic Font Properties
The particular font face rendered is determined by the font-family and other font properties that apply to a given element, such as font-weight and font-style for example. This structure allows settings to vary independently of each other and what encompasses Basic Font Properties. So what’s planned for this group?
📌 font-min-size and font-max-size
1 |
.element { |
2 |
font-min-size: 0.875rem; |
3 |
font-max-size: 5rem; |
4 |
}
|
Out of everything outlined in level 4, these two properties are my favorite because both will permit an element’s font-size to become “clamped” between the values supplied. This is certainly super awesome news for responsive design fans. The values can be an absolute size, a relative size or length percentage.
There isn’t any documentation at this time that notes how the browser’s resize event triggers either property, and if you’re looking to experiment with this feature using the experimental web platform features flag in Chrome you’re out of luck.
Font Resources
The majority of items outlined in this section help to control aspects that pertain to fetching, referencing and displaying the font-family of your choosing.
📌 font-display
1 |
@font-face { |
2 |
font-display: auto | block | swap | fallback | optional; |
3 |
}
|
This property determines how a font face is displayed, based on if and when it’s been downloaded and ready to use by the browser. It’s also intended for use within your @font-face or @font-feature-values declaration.
-
auto: The font display policy is user-agent-defined (i.e. the browser) unless defined within CSS explicitly. -
block: Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period. -
swap: Gives the font face a 0s block period and an infinite swap period. -
fallback: Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases). -
optional: Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a 0s swap period.
For anyone paying close attention to web font performance and who is busy on a daily basis debating FOUT or FOIT, then this property will make you extremely pleased.
📌 @font-feature-values
1 |
@font-feature-values { |
2 |
font-display: auto | block | swap | fallback | optional; |
3 |
}
|
When font-display is omitted in a @font-face rule, the user agent uses the font-display value set via @font-feature-values for the relevant font-family if one is set, otherwise it defaults to font-display: auto. See previous explanation regarding font-display values.
The ruleset is perfect for cases when a font is served via a third-party and you don’t have control over the @font-face rules, but are still able to set a default font-display policy for the provided font-family. This is good news for those building sites with non-stop third party action.
1 |
@font-feature-values { |
2 |
font-family: "Custom Font Name", sans-serif; |
3 |
font-display: fallback; |
4 |
}
|
While still new and somewhat vague, I can only assume in order to control a particular font-family display behavior, the developer must use the font-family property within this ruleset in order to target the desired font. Again, this is only an assumption on my part and not factual by any means.
Font Variations
This section is 100% new and specific to level 4. Most of the features currently documented pertain to the sizing and settings of each font face.
📌 font-optical-setting
This property is used in order to maintain stylistic traits and improve readability at different optical sizes. With digital type we have the ability to scale a font to any size, but this doesn’t take into account the appearance of type at these varying sizes.
“Text that is rendered at different sizes often benefits from slightly different visual representations. For example, to aid reading at small text sizes, strokes are often thicker with larger serifs. Larger text often has a more delicate figure with more contrast between thicker and thinner strokes.” ~ Level 4 Working Draft
1 |
.element { |
2 |
font-optical-sizing: auto | none |
3 |
}
|
-
auto: The user agent may modify the shape of glyphs based on thefont-sizeand the pixel density of the screen. For OpenType and TrueType fonts using font variations, this is often done by using theopszfont variation. -
none: The user agent must not modify the shape of glyphs for optical size.
📌 font-variation-settings
1 |
.element { |
2 |
font-variation-settings: normal | [ <string> <number>] |
3 |
}
|
This property provides low-level control over OpenType or TrueType font variations. It is intended as a way of providing access to font variations that aren’t widely used, but are needed for a particular use case.
-
normal: Text is laid out using default settings. -
<string> <number>: When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a<string>of 4 ASCII characters, followed by a<number>indicating the axis value. If the<string>has more or fewer characters or contains characters outside the U+20 - U+7E code point range, the whole property is invalid. The<number>can be fractional or negative.
1 |
.element { |
2 |
/* four letter axis name and number */
|
3 |
font-variation-settings: "opsz" 0.5; |
4 |
}
|
The string value used in the code above is known as the four letter axis name that describes the feature you desire to vary, along with the variation value typically ranging from 0-1, but can also be negative values where required. The variations allowed will always depend on the font face chosen.
Color Font Support
Color Fonts are brand-new to level 4 and allow font files to describe not just the contours describing edges of glyphs, but also the colors present inside the glyphs. Why would you want to use any of these features? I suggest reading this article by Grace Fussell to get up to speed:
📌 font-palette
1 |
.element { |
2 |
font-palette: normal | light | dark | <palette-identifier>; |
3 |
}
|
Many color font file formats allow colors within glyphs to be parameterized. In these fonts, colors are referenced by index when describing the geometry of each glyph. These indices are resolved within a current active palette using a lookup table present inside the font. However, many fonts contain multiple palettes, each containing a set of complementary colors chosen by the font designer to provide pleasing visual results. Developers can define a palette by using the @font-palette-values rule mentioned in the next section.
📌 @font-palette-values
1 |
/*Syntax*/
|
2 |
@font-palette-values <custom-identifier> { |
3 |
<declaration-list> |
4 |
}
|
5 |
|
6 |
/*Example*/
|
7 |
@font-palette-values Augusta { |
8 |
font-family: Handover Sans; |
9 |
base-palette: 3; |
10 |
1: rgb(43, 12, 9); |
11 |
3: var(--highlight); |
12 |
}
|
This represents a palette of colors used in a font. It defines a color palette and associates that color palette with a specific font. This allows a web author to select arbitrary colors to use inside a color font rather than being limited to the preexisting palettes inside font files
-
base-palette: This descriptor specifies a palette in the font which the containing @font-palette-values rule uses as an initial value. If no <integer> keys are present in the @font-palette-values rule, then the @font-palette-values rule represents the palette in the font with the same index as the value of this descriptor. If <integer> keys are present in the @font-palette-values rule, each one of those descriptors overrides a single color in the color palette represented by this @font-palette-values block.
📌 font-presentation
1 |
.element { |
2 |
font-family: 'Custom Font Name'; |
3 |
font-presentation: auto | text | emoji; |
4 |
}
|
This property allows web authors to select whether emoji presentation or text presentation is used for certain emoji code points. A huge win for emoji fanatics 😎
Conclusion
There are certainly plenty of exciting new features coming down the pipeline for web fonts and I encourage you to start experimenting with your favorites as they become available. If you have a particular favorite from level 4 or even level 3 let us know in the comments including any opinions you may have regarding the features we’ve discussed.
I also suggest that developers to look into the css-font-loading spec if loading performance is something you care deeply about. You can monitor support as adoption is fairly decent across browser vendors. Enjoy the new era of web fonts and happy coding!
