Variable Fonts | Hacker News Reader

Variable Fonts

v-fonts.com

233 pointscellis47 comments

Some cool typefaces, but "Corona Face Impact" hit hard.

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

Nice find! https://github.com/FAlthausen/CoronaFaceImpact

I wasted two days recently trying to make a variable font using free software. The only ressource I found is a youtube video telling me to use a python script from a google drive.

It didn't work despite many many tries. I have two woffs of the same font that I bought and I wanna make a variable woff2 with only these two variants.

I couldn't believe that there isn't a clear way to do this.

Here's the youtube video: https://youtu.be/xoQuWARCUWI

there is a well-known piece of free software for this called "metafont" (also the original name for the concept here being neologized "variable font"—a "metafont" is an infinite set of fonts produced by an algorithm from input variables) but it doesn't have a gui and can't import woff or truetype

a variable font is a more generic term than a metafont. it’s a bit pedantic but while both have parameters, a metafont is usually parametrically generated based on its concept of a pen, whereas a variable font usually has different parameters that have been defined by manual bezier drawings. I don’t remember if metafont itself can produce a variable font but people have used metapost to go to SVG and then UFO (font source) from there

in metafont (the software) you can define a metafont (a font-valued function) in terms of bézier outlines as well as paths stroked with pens; the relevant metafont commands are 'fill' in the first case and 'draw' (rather than postscript's 'stroke') in the second. it doesn't have an equivalent of postscript's 'eofill'. chapter 13 of the metafontbook describes these commands

i don't know if there's a reasonable way to export any standard vector format from metafont; i think there originally wasn't

I think you may be missing the point. Metafonts have absolutely nothing to do with "variable fonts". It's a completely different branch of font technology. You cannot produce a variable font as OP intends using metafont.

metafonts, as implemented by the metafont program, and variable fonts are literally exactly the same thing: a parameterized font which produces an infinite set of fonts as you vary some parameters

i think what you mean to say is that the metafont program isn't compatible with truetype or opentype, but i kind of already explained that in the comment you are replying to

No, "variable font" is not some generic term, especially in context. It refers to a specific technology. See https://en.wikipedia.org/wiki/Variable_font

It has nothing at all to do with metafont, even if metafont also supports parameterized fonts.

that page opens by saying it's a generic term, not the specific implementation of the concept in opentype:

> A variable font (VF) is a font file that is able to store a continuous range of design variants.

this definition is the same thing as the definition of a metafont, and clearly includes the metafonts implemented by the program named metafont. it seems like the authors of the page didn't know about the program named metafont, though, so they mistakenly think apple invented it

It does not claim it's a generic term. The whole page is about variable fonts as derived from "Apple's TrueType GX font variations"; one sentence taken out of context doesn't change that. If you search the internet for variable fonts, you only find people talking about this technology. Parameterized fonts as in metafont have never been called variable fonts and trying to claim otherwise is just creating unnecessary confusion.

Not directly/easily, one would need to:

- instantiate two (or more) separate design instances (the extremes)

- export them as an outline --- see METATYPE1

- edit them so that each character in each design instance has the same number of nodes (maybe this isn't a requirement anymore?)

- combine them into a variable font

You can use the Python library fontTools, which comes with a command line tool called `fonttools varLib`. Prerequisites: 1. you have a so called Designspace file which tells the tool where in the design space the fonts are and 2. The fonts have compatible glyph outlines and font features.

For the former, get a random font project like https://gitlab.gnome.org/GNOME/cantarell-fonts/-/blob/master..., install the Python tool fontmake in a venv, and run `fontmake -m Cantarell.desigbspace -o ttf-interpolatable`. In a new subdirectory, you'll find a new Designspace file and TTFs. Switch them out and edit the DS file to make sense. Good luck.

For the latter, you are probably out of luck because static fonts are usually compiled in an outline-incompatible way and your only options are to fix them yourself in fontforge or such or ask the original vendor, who is probably going to laugh at you and demand money.

A modern font-rendering tool would indeed be very useful.

Here's Google Fonts filtered for variable only: https://fonts.google.com/?vfonly=true

I'm torn. Variable fonts are neat, but they also lay bare how woefully complicated every single layer of our software stack is where even displaying a single glyph requires interpreting a Turing-complete programming language. As I get older I increasingly just want a more transparent and understandable system that does less, even if that means giving up bells and whistles like automagic font kerning.

I'm a big fan. Variable fonts aren't just neat -- they're a godsend for graphic design when making things like posters, packaging, etc. To get the font weight just right, to get the letter widths just right. When dealing with a font that comes in just 2 weights or even 5, it's so common to want something exactly in between. Or when you want the typeface to be condensed, but the condensed version is way too condensed -- you want "halfway condensed" which is almost never a thing.

And I don't think most variable fonts require any kind of Turing-complete programming language? They're basically just interpolation. And interpolation is not that much added complexity for the rendering engine.

I agree with you that the kind of Turing-complete calculations that fonts these days are able to do, make me feel uneasy as well. But for me, variable fonts don't fall into that category. I look forward to the day when variable fonts are the norm for typefaces that come in different weights and widths.

I'd argue that it's unavoidable. These glyphs are meant for communicating to humans. Trying to reduce it removes the human element out of it, which can remove concepts like intent and context.

I think variable fonts are really neat—but I'm curious to know what professional typographers think about them. Take Concourse [1] by Matthew Butterick for example—if you click on the "PDF" link at the top, you'll get a PDF sample of the Concourse font, and on page 7 Butterick talks about how the font has been carefully duplexed so that different weights always take up the same amount of space. With a variable-width font, presumably you'd be able to adjust the tracking as well as the weight to make them match, but maybe not? And maybe not automatically? I dunno.

Do any professional typographers have opinions on the pros/cons of variable fonts?

[1]: https://mbtype.com/fonts/concourse/sample.html

Take a look at the GRAD parameter under Roboto Flex on the post's page—it seems to do what you're talking about.

H&FJ's (as it was at the time) Mercury was designed to keep the same spacing in different weights to handle the physical needs of printing a newspaper in different locations and conditions, see the design notes on the typeface [1]. That's the first time I remember this quality being touted in a font (among their set published weights, you couldn't vary it minutely, say, to get a bold-semibold).

While you can try to adjust tracking to make one weight of a face match the spacing of another, the faces are probably individually adjusted to make their own default spacing coherent within the face. It may be different enough between just two faces to sometimes not work, and even less across the entire range.

Adobe Acrobat used a version of Myriad and Minion as under-the-hood variable font substitution to make every PDF readable at least even if you didn't have the original typeface. The promise was you would never see Courier again. Multiple Master fonts made available this idea where you could generate specific typefaces along different axes for your design needs, but it wasn't a live thing, and you ended up with lots of discrete font files. My recollection of Multiple Master was that everyone hated them and were glad to see them die. Maybe the automated adjusting of parameters makes the implementation palatable now.

[1]: https://www.typography.com/fonts/mercury-text/design-notes

Great website but font prices are out of hand! Found one that looks awesome (West) but it's 350EUR if you want all styles! If you want Regular+Medium+Bold, that's still 150EUR. I bought Berkeley Mono back then for $75 and that is like the maximum what I would pay for a font. I am not a commercial user btw.

Non-commercial font usage is easily niche.

It takes a lot of time and skill to make a good font. Piracy is rampant and tricky to track down (let alone go after) people and businesses who use them without the correct licensing.

Wow, what a cool resource. There are some beautiful fonts in here.

I dutifully clicked "Load 30 more" 12 times to see them all, but it'd be really helpful to be able to search and filter, and maybe "Load all".

I originally submitted this article because I saw the NYT (maybe?) started using them. If you can view this: https://www.nytimes.com/interactive/2024/01/28/world/asia/ch..., I had to squint and saw that, "yes! that's a different 'F', and that's a different 'L'". It made so much sense, I thought "surely they didn't hire an artist to handwrite these captions. They must be using some kind of 'variable font'", and I googled just that and this site popped up. :) But then, maybe that's just an artist that works on these sorts of presentations.

You mean the handwritten text, “FINISHED SCHOOL” and such?

If so, even if you did that with text, you’d be very unlikely to use variable fonts at all, but rather just draw multiple versions of each character, and choose randomly or based on context (there are a few techniques). That’s waaaaaaaay easier than going variable would be—and variable still wouldn’t be sufficient to achieve the result on its own, though it could be a part of it.

But in this specific case: it’s in an image, the variations look unrealistically authentic for a font, and the framing lines and tiny illustrations and text are all done together. Pretty sure it’s authentic digital hand-drawn art. Won’t take long, genuinely just a few minutes for the actual drawing. The only hard part is fitting fluid-sized text content into the fixed-size illustration frames; that’s why at larger sizes it’ll be oddly spacious in places (and always inconsistently so), and since they’ve only taken care of it down to viewport widths of about 400px, below that (or if you use different fonts, or for a number of other possible causes) you start getting bad collisions.

New York Times decide it’s important to do things like this sometimes, so they get more people involved—not just a writer, but an illustrator and a developer.

For a paper discussing selecting various alternates and constructing ligatures see:

https://tug.org/TUGboat/Articles/tb24-2/tb77adams.pdf

Small discussion in 2018 as a ShowHN [0] (61 points, 13 comments)

[0]: https://news.ycombinator.com/item?id=18129474

Can you subset variable fonts?

One way to reduce the size of a font file is the remove all characters not needed (eg non-Latin characters)

Is it possible to subset a variable font?

Font Squirel is great at subletting non-variable fonts.

https://www.fontsquirrel.com/tools/webfont-generator

Yes, both in theory and in practice [1].

What I'm more curious about is whether variable fonts can save disk space. I.e. whether a variable font that interpolates between "regular" and "bold" is smaller than one font file in "regular" and another in "bold".

Because so much about the two variations is the same -- the same glyphs, the same number of anchor points, in the same order... it's just the actual anchor point coordinates and control point values that differ. I find myself wondering if the actual font file is encoded in a way that eliminates as much redundant information as possible, or if it's basically merely multiple font files concatenated together with extra info on top.

[1] https://clagnut.com/blog/2418

Does any online tool exist to automate the creation of a subset variable font?

(Like Font Squirrel from above)

Not that I'm aware of, but the command-line instructions I linked to are quite simple to follow.

And it would be pretty easy to throw them on a server as well if you wanted to build your own online interface for it.

My first exposure to variable fonts was thanks to this article by Lisa Staudinger - https://uxdesign.cc/uniwidth-typefaces-for-interface-design-...

Brilliant article.

Can someone explain the difference between multiple master fonts and variable fonts?

I found MM fonts to be super-nice in the nineties. I could emphasize things and keep a very nice visual hierarchy while maintaining very nice stylistic consistency.

I've been confused as to why we can't have them in 2023.

These aren't nearly as pretty as the fonts I used close to three decades ago. Fonts programs are copyrightable (the things which render the bitmap), but font glyphs are not. Even if they were, there are plenty of beautifully-typeset books from hundreds of years ago. Digitizing those should not be hard.

> Can someone explain the difference between multiple master fonts and variable fonts?

Adobe's Multiple Master format and Apple's TrueType GX format are, respectively, the spiritual and DNA parents of OpenType Variable Fonts.

https://medium.com/variable-fonts/https-medium-com-tiro-intr...

i prefer calling this concept by its original name, "metafont", in part because "variable font" is sometimes used as lazy shorthand for "variable-pitch font", i.e. proportional rather than fixed-pitch like a typewriter. on the other hand, "metafont" is also the name of a particular piece of free software for this purpose

Yeah, my first thought when I saw the headline was metafont, and also that's so last century. Metafont was first released in 1979. Anyone who has written a document using LaTeX with its default font has used a variable font.

Although they share the concept of "parametric font technologies", variable fonts are a completely different expression of that than metafonts. Where a metafont glyph is programmatic (complex, but great flexibility and control), a variable font glyph is mostly declaritive (simpler and more accessible, but less flexible in some respects), consisting of a set of variations with defined axes to control how the variations should be interpolated/tweened to control properties like weight, width, slant, etc.

A good overview of variable fonts is "Introducing OpenType Variable Fonts" (2016): https://medium.com/variable-fonts/https-medium-com-tiro-intr...

Fontsource[0] is also an easy way to self-host variable fonts via NPM packages.

[0] https://fontsource.org/?variable=true

Very cool! A filtering interface would be extremely helpful. Currently viewing on mobile.

It would be so much more useful if it let you change the size of the previews.

Needs a "monospacicity" slider.

Reply on news.ycombinator.com