Bitter
OK, this page (apart from the header and footer) is entirely rendered in a single variable font - "Bitter". I chose this because it is impressively clear at very small sizes, has italics, and keeps an attractive shape with 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 general use I'm a fan of slab-serif fonts.
For IE (which doesn't support variable fonts) Google simply serves the entire range of font weights - pages should display correctly but much less efficiently than modern browsers.
Some tiny text @ 400.
Some small text @ 300.
Some big text @ 100.
Some big 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? (weight 600)
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 faster because of the reduced overall font-file size, bandwidth, and memory requirements.