Public Sans
OK, this page (apart from the header and footer) is entirely rendered in a single variable font - "Public Sans". This one I really like! Designed by the United States Web Design System it is a professional, impressively clear, beautiful sans-serif typeface. It has italics and decent kerning throughout the weight-range. It should be suitable for information-dense web pages containing multiple areas of formatted text: paragraphs, tables, etc. This paragraph is normal size at a weight of 400. This sentence has class "bold" causing a relative increase in weight.
For IE (which doesn't support variable fonts) Google simply serves the entire range of font weights and styles - so IE displays correctly but much less efficiently than modern browsers.
Some tiny text @ 400.
Some small text @ 300.
Some bigger text @ 100.
Some bigger text @ 600.
The heaviest weight available: 900, and in italics. JET5
OK, here's some experimentation with CSS for tables and interface elements. All light-on-dark for an extra challenge in legibility! (weight 300)
I guess the basic question is: can you do a professional-looking website using only a single variable font? ...
Top LeftCell 1 | Cell 2: 2px padding, tiny font & whole cell is clickable! |
Cell 3. Let's pad this one to 8px, add a rounded border and some text—and see how well it works (all cell clickable). |
Bottom RightClass = small (font size)Button 1 Button 2 |
Button
... And the answer is definitely! And that website will be fast because of the reduced overall font-file size, bandwidth, and memory requirements.