Check out a free preview of the full Responsive Web Typography v2 course

The "Pulling From History" Lesson is part of the full, Responsive Web Typography v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jason reviews optical sizing in typefaces through the context of print designs of the past.


Transcript from the "Pulling From History" Lesson

>> Jason Pamental: Some of the things that we can focus in on, now that we've got the broad strokes. We've dealt with setting a reasonable maximum width. We've dealt with line height, font size, a few of the basics in the font variation settings. But optical sizing is one that I think is worth a little bit of a history lesson detour because that's one that may not be available in an overwhelming number of typefaces.

But man, when you can get access to it, it is really kind of amazing what it can do. So with any good future display of technology it's good to start by going backwards about 3 or 400 years. So this is going back to about 1720. This is a broad sheet advertising a typeface from William Caslon.

And as we sort of cut that out and normalize for physical size, you can see that 6 point Caslon C has a much thicker stroke in comparison to the one above which is 72 point. So one is many times larger than the other. But if you were to kind of blow up the photographs like we have here, you can see what kind of a difference there is.

They would actually cut the metal differently when they were making the different sizes of type. So this was entirely normal. This was intended by the type designer to make sure that those delicate features were there when it's big enough to support it. But it's still a nice, sturdy shape when it's at a smaller size.

Now on the right, you can see Amstelvar set in a variety of sizes with a uniform optical sizing set for the smallest font size. So the cues there are look at those top two lines of text, and look at a fairly even stroke contrast. So there's not a whole lot of variation in the thick and thin.

And watch what happens when I set the optical sizing to be equivalent to the font size.
>> Jason Pamental: It almost looks like a different typeface. So look at that top line, Frank Sprung and Collectible Soups. Look how much more contrast there is, and delicacy in that stroke. So if you think about newspaper headlines versus body copy.

You really want that big bold detail that really draws you in, and really has that refined look to it. But when you need to read the text, you just need to be able to read the text. You don't wanna worry about the shapes falling apart, because the thin gets too thin, the thick looks muddy.

It just needs to be a little bit more normalized. So effectively you're getting totally different typefaces out of this, but it's actually in keeping with the intent of the design. Now, this is something that was normal going back hundreds of years. And then was lost when we went to photo typesetting in the 60s and 70s and then digital typesetting thereafter.

They went with a single shape that they just scaled. So when you look at that block of text in the middle, that's what we've been looking at all this time. For 30 or 40 years, we've been looking at the type not in the way it was intended, because it had to be scaled for maximum use, not maximum appropriate use.

There are a few typefaces out there in the market where the designer has actually marketed a display face, a text face, a caption face where they are using this optical sizing. But they're actually outputting a whole set of files that are a different set of outlines in order to factor this in.

Now we get it, in theory, if they design it that way, all in a single file. So it's really kinda remarkable. The amount that we can do with that one typeface just keeps getting more and more finetunable, so that we really can create a much more unique experience, even with just one file.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now