![]() The rest of this blog post explains how system-ui broke in Chromium 80 and how the Chromium engineers fixed it. ![]() Remember that this Glitch will only work if you're using a macOS Catalina device. With a few lines of CSS, we can tweak the font settings into a bold of our choice or try out other interesting combinations: font-weight : 700 įont-variation-settings : 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20 Īnd just like that, Chromium users on macOS see your upgraded, custom 750 weight with some fun other tweaks □ Playground #Ĭlick Remix to Edit in the Glitch below to get an editable copy of the Glitch, and then edit the new font-variation-settings options to see how it affects your font. * 400-1000 */įont-variation-settings : 'YAXS' 500 Combining the options # Similar to weight, but without touching horizontal spacing. * 19 or 20 */įont-variation-settings : 'opsz' 20 GRAD # ![]() A value of 19 or below is intended for text and body copy spacing, while 20 or above is for spacing display headers and titles. Optical sizing is similar to kerning or letter-spacing, but the spacing is done by a human eye instead of math. wght #Īccepts a font weight between 0 and 900 and is applied equally to all characters. Looks like some neat progressive enhancement design opportunities to me! Really dig into the subtleties of the system font if you want. While system-ui on Catalina is a variable font with wght, opsz, GRAD, and YAXS settings. On Mojave, system-ui is a variable font with only wght settings. These variant features are only available for macOS Catalina users.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |