Encode Sans
OK, this page (apart from the header and footer) is entirely rendered in a single variable font - "Encode Sans". This sans-serif typeface, as well as the ubiquitous weight, also has a variable width: (of 75-125) 90 is the default on this page—efficiently spaced and still legible. 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.
Varying the width
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. (narrow)
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. (wide)
Varying the size
Some tiny narrow text @ 400.
Some small text @ 300.
Some bigger text @ 100.
Some bigger text @ 600.
The heaviest weight available: 900 (& narrow). JET5
111111 |
888888 |
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.