What you can get out of a high-quality font

> Since such numerals line up when typed on multiple lines, they're useful in, well, tabular data: tables, bills, reports, you name it.

Or things like showing a clock, countdown, whatever. A time that "jumps around" on the screen from one second to the next annoys the hell out of me...

The real power of variable axes is that it's not related to weight in the slighted. That's the most obvious use-case, but it's just a mechanism to control "which points in a glyph's outline go where based on what one or more variables are set to", so just using it to change weight is... kinda obvious and boring? Let's kick it up a notch:

https://v-fonts.com/fonts/extendomatic-variable

https://v-fonts.com/fonts/tatras-shaded

https://v-fonts.com/fonts/wavefont

Tabular numerals are such a valuable feature. It's a bummer they're not more prevalent.

Have a font file you want to investigate? See if it supports whatever features? https://wakamaifondue.com is your friend

Caveat: Google Fonts, and by extension Fontsource which mostly just mirrors Googles files, strips out nearly all of the advanced OpenType features to reduce the filesize. It's worth checking the upstream version of your font to see which features it actually offers.

e.g. Wakamai Fondue lists 11 features for Googles version of Inter (some essential ones plus fractions, tabular numbers, numerators, denominators and contextual alts), while the full fat version of Inter has a whopping 44 features (too many to list, see https://rsms.me/inter/).

Nothing really to add... other than the type on that page looks gorgeous.

Not really related: to get VSCode to support comments, jsdocs, other syntax highlighting features using different fonts, you will probably have to use the extension vscode-custom-css from be5invis: https://github.com/be5invis/vscode-custom-css

Mine is:

  .mtki {
    font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
    font-style: italic !important;
    color: #757575 !important;
  }

  .comment {
    font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
    font-style: italic !important;
    color: #757575 !important;
  }

  .comment:not(.punctuation) {
    font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
    font-style: italic !important;
    color: #757575 !important;
  }

Which looks like the last picture in this comment: https://github.com/microsoft/vscode/issues/36512#issuecommen...

Just be prepared to experiment a lot, VSCode's (Electron's?) font handling is buggy.

Why are font features so difficult to support correctly?

This was my nudge to see if Berkeley Mono v2 is out yet.

It is not.

Small caps looks slick. I wish more websites used it.

What is going on with the wght (weight) axis? When I slide to the left of 400, the text condenses as it gets thinner. But to the right of 400, the text does not expand, it just gets thicker. So it would not appear to be a continuous variable, as the slider would suggest.

If you like typography, check out Butterick's Practical Typography: https://practicaltypography.com/ It's full of good, pragmatic advice on how to make printed and digital documents look wonderful.

I've bought two fonts from him and his font license is easily the most permissive of any paid professional font I've seen: no restrictions on the number of page views or anything, unlike most other pro fonts. Are his fonts open source? No. Are there good open source fonts? Of course. But are his fonts beautiful? You bet. I've got Valkyrie and Concourse. Concourse is particularly flexible when it comes to contextual alternatives and such.

I made a video showcasing some advanced techniques to use fonts on the web, without compromising performance. Covers interesting font metrics like ascenders and descenders. Fascinating to see how much information is contained within a font file!

https://www.youtube.com/watch?v=wSOIbdOaKR8

Fascinating that it's just now that someone got curious about this enough to write a post. I know if you looked for it you'd probably find this stuff but it is definitely scarce IMO. Thing is, not enough developers and designers that worked on this for many years bother to blog about it perhaps for reasonable reasons but still.

Maybe for print, it is important but for the web, we must stick to system fonts for SEO and speed.

Crazy how most fonts don't support any of this... (update: oops, I'm wrong!)

I'm a bit surprised as I thought this was common knowledge for web designers and developers.

Though to check the features or variable ranges of an OpenType file, you can use something like fontdrop.info.

Beautiful letters?

Or ugly ones I want some high-quality Comic Sans font.

That live demo on the page is solid by the way.

TIL several useful things about typefaces!

as a designer by education, this level of font control for web is delusional. and mostly a waste of time (both for the designers and the users receiving on unexpected screen ratios/resolutions/tech/era/etc and getting a worse experience if the designers hadn't wasted the time)

this brings me bad memories from the time websites were done by "desktop publishing" designers and html was crafted "pixel perfect" (with tables)

thankfully I can easily be a curmudgeon and just set all sites to use my favorite fixed width font and disable the designers choice with one checkbox on firefox.