b2adcd7796
* 1st commit: all content, basic formatting, svg links This is the new Q1 content. Almost all formatting is needed. Excerpts are all missing. There’s absolutely no “related” metadata yet. No alt text, either. But images are all in, renamed to `thumbnail.svg` where appropriate, and structurally everything is there. * Testing link format * Adding all CSS v2 API links for axis defs * Testing Markdown-format tables for axis steps * Adding 2 gloss links to all axis defs’ opening para * More links in intro paras * Inserted all link (blank) into all gloss. terms Almost all of these links need the URLs added later, but at least they’re now marked up to resemble anything that was underlined in the Google Docs. * Inserted all (blank) links in articles Also formatted most of the big tables in new Markdown table format * Gloss. excerpt test * Excerpts for all axis definitions * Remaining (non-axis) glossary excerpts * Renaming 1 illo per article to `thumbnail` * Updating illo filename in content to reflect `thumbnail` name change * Adding prev/next URLs for all new articles * Captions for all articles Some still need font credits adding * Alt text for `a_checklist_for_choosing_type` * Alt text for `language_support_in_fonts` * Alt text for `the_foundations_of_web_typography` * Alt text for `an_overview_of_latin_type_anatomy` Only a small change, as most alt text was already present for this one. * Illo alt text for all axis definitions in Glossary (And table formatting, too.) * Updated illos for `cursive_axis` & `wonky_axis` * Remaining illo alt text for non-axis-related Glossary terms * Added all related gloss. terms to new articles * Added all related articles to gloss. terms * First round of actual URLs on new Gloss. terms * Actual URLs in all remaining Gloss. terms * All real URLs for all new articles And improved checklist formatting * New Thai & Devanagari illos Hopefully the final versions * OG excerpts for all 4 new articles * New illo as per Dave’s rec + TP copy tweak + illo filenames * Article ordering within each `module.textproto` file * Update prev/next for existing articles to reflect new Q1 content
2.0 KiB
Optical size (controlled with font-optical-sizing or font-variation-setting: ‘opsz’ VALUE in CSS) is an axis found in some variable fonts. It controls the font file’s optical size optimizations.
The Google Fonts CSS v2 API defines the axis as:
| Default: 14 | Min: 6 | Max: 144 | Step: 0.1 |
Optical sizes in a variable font are different versions of a typeface optimized for use at singular specific sizes, such as 14 pt or 144 pt. Small (or body) optical sizes tend to have less stroke contrast, more open spacing, and taller x-heights than those of their large (or display) counterparts.
The concept is that the numeric value for this axis should match the rendered font size in typographic points (1/72nd of an inch) in print, although browsers instead match it to the CSS px unit, since they have no concept of physical size. A new CSS attribute was introduced to go along with it: font-optical-sizing. The default is auto (or we can force it to none if we’d prefer to turn it off), and this is supported behavior in all modern browsers.
body {
font-optical-sizing: auto;
}
Alternatively, we can set an explicit value by using font-variation-settings, like so:
body {
font-variation-settings: 'opsz' 16;
}
h1 {
font-variation-settings: 'opsz' 48;
}