Download Font Average
Lynelle Bookmiller
The application is incorrectly drawing text using font Courier New because each letter is being slighty cut off. The issue is when calling the method GetTextMetrics because it is filling the TEXTMETICS struct with differing tmAveCharWidth and tmMaxCharWidth values. The application then uses tmAveCharWidth to calculate character width with is wrong because that value it can be less than tmMaxCharWidth. That issue I will be fixing.
I courious why GetTextMetrics is returning differing tmAveCharWidth and tmMaxCharWidth values for Courier New? My understanding was that Courier New is a monospaced font and that tmAveCharWidth and tmMaxCharWidth should be the same. I tested with other monospaced fonts that that assumption is correct.
In some applications, narrow fonts are required to squeeze the maximal amount of text into a given horizontal space. The table below summarizes average character widths for 3993 fonts, sorted by increasing letter width (column 3 of the table). Units are standard Type 1 font units: 1000 units == font design size in PostScript points (TeX big points) [72bp = 1in].
One of them is variable fonts. After being first introduced in 2016, I just realized they have really solid browser support all these years later. Google Fonts even started to roll out filtering by variable versions back in 2020. That's like a generation ago in web years, so I figured it was time to give them a shot.
Rather than splitting hairs over the weights an average site would use, I just decided to go with the full gamut. I don't think I use them all on my site, but between headings, subheadings, body copy, and the weird stuff I do in-between, it's close enough.
Again, the average site (probably) doesn't need all of these. But if you're working with anything over a moderately complex blog, it's really hard to determine which ones to exclude. Instead, it's easier on one's sanity to just load them all. There'll be more page weight, but at least you won't unexpectedly find some text lacking the correct font face.
Because of how flexible variable fonts can be, building them can mean those versions are significantly larger than you might expect, especially when they're not exclusively packaged for use on the web. When I loaded the entire variable version of Inter, it came to over 800kb of added weight. ???
But I wasn't out of luck, thanks to a great article from Trevor Harmon, which references another from Michael J. Harold. These two introduced me to the idea of subsetting fonts (removing unneeded glyphs) and reformatting the file to .woff2 for even better compression.
In the short-term, probably not for everything. Browser support certainly isn't an issue, but the font faces I'd like when building a site aren't always available in a variable version. If I'm really keen on using a particular font, I'll either need to scourge the internet for a variable version and possibly mess with more subsetting, or settle for a static version that's ready to go. The latter is way easier.
The part of variable fonts I'm more concerned with is my ability to use them effectively. There's a whole new world of CSS properties, technical concepts, and more out there on variable fonts that I'm not remotely familiar with. If I'm going to leverage them beyond the potential performance benefits, I'll need to spend some more time in the weeds as time goes on. And that's fine with me, because it'll probably produce fodder for more blog posts.
Nick, FontLab can already blend 2 fonts together, so interbreeding by machine is here. But surely interbreeding by a human operator equiped with typographic knowledge and a vision will produce the most interesting offspring.
Founded in 2002, Typographica is a review of typefaces and type books, with occasional commentary on fonts and typographic design. Edited by Stephen Coles and Caren Litherland and designed by Chris Hamamoto.
This difference in reading behavior between web users and study participants does raise the question whether findings would be different under more realistic web-usage conditions. Even so, I still think the findings about the relationship between fonts and reading speed are of interest.
With this big difference in reading speeds within users, you would expect that the study would have identified a font with the highest overall score. Well, it did: Garamond had the highest average reading speed at 312 WPM; it was 6% better than #2 (Oswald, at 295 WPM) and 23% better than the worst font of the 16 tested (Open Sans, at 254 WPM).
Many users were faster readers with another font than Garamond, which means that they would be penalized by a design that used Garamond. The authors also computed a speed-rank score that shows how often a font was the fastest of those 5 fonts that a given user saw. Garamond only achieved a speed rank of 48%, which means that (slightly) more than half of the time another font would be better for a specific user. (And an even bigger percentage would likely have been better off with a different font than Garamond if all 16 fonts had been available as alternatives.)
Whatever the true cause, the distinction between Franklin Gothic and Garamond is simply more proof of the overall finding that different fonts are best for different people, with reading skills being a possible differentiator impacting font choice.
Reading speed drops during middle age. A 20-year age difference (for example, from 20 to 40, or from 30 to 50 years old) will, on average, correspond to reading 30 WPM slower, meaning that a 50-year old user will need about 11% more time than a 30-year old user to read the same text. (Computed relative to the overall average reading speed in the study, which was 276 WPM.)
A second interesting age-related finding from the new study is that different fonts performed differently for young and old readers. The authors set their dividing line between young and old at 35 years, which is a lower number than I usually employ, but possibly quite realistic given the age-related performance deterioration they measured.
3 fonts were actually better for older users than for younger users: Garamond, Montserrat, and Poynter Gothic. The remaining 13 fonts were better for younger users than for older users, which is to be expected, given that younger users generally performed better in the study.
Since we know that there are age-related changes in font performance, we should repeat the font-optimization process every few years, to identify a new font that would be better for the now-older user.
Clearly, as scientists like to say, more research is needed. Given the findings in the new study, the answer will not be simple, but we can still hold out a little hope that it might prove possible to derive a formula that could predict the best font for a given user, given multiple criteria (not just one criterion, sadly). We also need an experimental protocol that more closely mirrors the typical scanning behavior of web users.
If that's too slow, you can split on whitespace, and draw each "word"separately, after calculating where it should be. For the font in your example, for instance, I'd probably go with 9 pixels per character (or even math.ceil(8.5)). You then will get some slightly uneven spacing between words, but probably better than MS "cleartype"!
If that's too slow, you can split on whitespace, and draw each
"word"separately, after calculating where it should be. For the font in
your example, for instance, I'd probably go with 9 pixels per character
(or even math.ceil(8.5)). You then will get some slightly uneven spacing
between words, but probably better than MS "cleartype"!
sure, but you certainly don't want kerning with a fixed-width font. In this case, if may be that it is doing fixed-width right, but it's not an integer width, then DC rounds it to an integer. Perhaps another font would work better.
sure, but you certainly don't want kerning with a fixed-width font. In
this case, if may be that it is doing fixed-width right, but it's not an
integer width, then DC rounds it to an integer. Perhaps another font
would work better.
Whether designers should use serif or sans-serif fonts for body copy is one of the most discussed and unresolved questions about typesetting on the Web. Some designers prefer to give their headlines serifs (which are short, decorative lines at the end of letter strokes) to give them more appeal. The main reason to choose a serif font for your headlines is that, at a large size, serif fonts are easy to read and look great. The contrast between a serif font for headlines and a sans-serif font for body copy can be interesting, too.
df19127ead