Transcription
[playful music]
[audience applause]
Scott Kellum: All right. Well, thanks so much for coming out. This is something that I’m really excited to talk about.
Okay. We’re going to get the slides up.
Awesome. So, yeah. We’re going to be talking about mapping typography. But before we start mapping anything out, we need to start getting a little bit of an understanding about the landscape that we’re going to be working in.
Most of us here, we make websites, and I just want to talk a little bit about the shape of the websites that we make. Websites are multidimensional objects. This sounds a little complicated, but I promise you it’s something you all work with every single day.
To think about this, let’s talk about paper pages. When we design in print, we are designing (for the most part) two-dimensional objects, so they have a width and a height. And we design within these two dimensions.
Viewports are two-dimensional objects as well, so here’s a website within a viewport. This might be what it looks like, but I want you (for at least the sake of this talk) to start thinking about websites. This is just one particular view of it, and you can extrude a website back to see all of the different widths that it might occupy.
And then we’re not just working in different widths. We might be working in different heights. There might be a dark mode and a light mode. You can see the complexities start to really build.
All of these different factors make up different dimensions that we design within. We might have preferred font size, scroll depth, any number of different inputs or outputs for people viewing our websites, and a viewport is just a facet of that.
That’s for websites as a whole within a viewport, but we also put all of these different modules we design in components now a lot of times, and we put these components onto a page. I know this is a deep cut, but we used lots of components for the SB Nation 2012 redesign when I was working on that.
We had this typographic system for each of these different posts. And to get all of these different components into all of these different placements on this homepage that was also itself responsive, we had to create this massive grid with these variations.
This is the shape that we design in, and you all are incredible. Really, truly, this is the shape of what we work with.
How do we manage this? For the most part, we manage this by creating systems. We might call them design systems (if you’re familiar with them).
Let’s just take a look at an example of what a design system is. It’s not a website. [Laughter]
This is a lot of cases of type. This is one drawer pulled out. There are little metal stamps in here. This is how fonts used to come.
Typeface is really just a design system. When type designers are starting out, they usually start out with these characters: uppercase H-O-D, lowercase n-o-p. And so, let’s look at these different components.
The H helps people understand the proportion and spacing of the straight things and how those straight things come together. The O for the round things and how those round things work and come together. The D is where the straights and the rounds meet, so those are your basic building blocks there.
Then for the lowercase, the straights of the lowercase, rounds, and where the straights and the rounds meet. These are your basic building blocks when you are creating a typeface.
Then from there, we move on to test words. Different type designers have different test words. This is Handglvoes. It’s really nice because it has some characters with, well, a lot of characters, so there’s the lowercase a and the g, which might not follow some of these rules, but you could start to get a feel for things and start to create different words with the typeface that you are designing.
Spanning the character set, and then now we’re kind of seeing these different axes form. So, you might create different (what are called) masters, so different optical sizes, different weights. All of these things, you could start sort of expand upon, and you might be seeing some similarities here.
This is Noordzij’s cube. This shows all of the different axes that a typeface might have, so these typefaces are multidimensional objects that have a shape. And that shape is not dissimilar to the websites that we design.
Arrow Type at recursive.design has this really cool, interactive cube that’s inspired by Noordzij’s cube, and you can play with it, interact with it, and see all of these different variations within this variable font that they’ve developed.
Roslindale, by David Jonathan Ross, is not a cube-like design space, so this space (as you get smaller), it doesn’t have as much of a width axis, so that can kind of go away. That’s the shape of the Roslindale design space.
This didn’t start with variable fonts. Type designers have been doing this throughout the digital age of typeface design. There’s Superpolator, which really helped typeface designers manage these design spaces and interpolate their instances. So, these various masters or instances were a lot like breakpoints. But the cool thing that they could do is they can interpolate them to build out more and more instances.
I want to start to leave the typeface design world with this quote that I love from Matthew Carter, which is, “Type is a beautiful group of letters, not a group of beautiful letters.” Because we are creating a system that has to work together and cohesively, you might have drawn the most beautiful G or the most beautiful A ever, the most beautiful ampersand, but that has to work with everything else in your system.
We can make that a little bit more general. “A beautiful group of things, not a group of beautiful things.” And when we are creating a design system, we might be making a beautiful group of components, not a group of beautiful components. One component might be beautiful, but it needs to work cohesively with the rest of your system.
Design systems also need to guide people to the right option. Now, I don’t want to single anyone out. My stuff is on this slide as well. But we create this...
Type scales are a laundry list of options. But they don’t often help guide people to which specific size of this list that people should choose. We have wonderful options here, but which one do we choose?
When we are building our typographic components, I think it’s really important to look at the meaning behind whatever component we are looking at. We might have prices. In our products, we might have product names. We might have headlines. We might have bylines. We might have CTAs, all of these components on our websites.
They need to have some thread that indicates that, hey, this is a headline. Hey, this is a call to action. Or this is a price. And is there a thread that we can tie all of those components together with regardless of where they are displayed and at what screen size they’re displayed.
Again, not a website, but looking at this two-dimensional newspaper is a really great way to not get confused with all of these different variable widths. So, we could see that there are a number of different headlines in this newspaper, and they’re displayed at different sizes. Let’s graph... isolate them, and then put them onto a plot. So, let’s plot these out.
As the headline width gets wider, the font size tends to increase. There’s this clear correlation here. Let’s dig into the numbers, and we could see, all right, that’s really strongly correlated. Maybe we can kind of create this map, and now we know exactly what font size something might be if it were a specific headline width.
We have flexible grids and fluid media. What about our typography? Well, we have tools like clamp, calc, viewport width, and now we have container query inline, which is the inline width based for right to left languages. And right to left languages, it identifies that....
It’s essentially like the container width. Yeah, you can use that.
A lot of times, I just plot points out in grapher. [Laughter] These are the exact same points from the graph I showed earlier from that newspaper.
Take the equation, convert that into container query units, and apply the rem modification to it. That’s the calc function that we could work with for container query units.
You could use a generator. Utopia is a fantastic generator to help you generate some of these calculations.
There you have it. Change viewport widths to CQI, and you get roughly the same function.
Not an old newspaper, but this is a newer website, so I was trying to explore what would happen if you just use one style for all of these headlines on a website. Every single one of these product names, as well as the headline at the top, use one single CSS rule set. There are not specific rule sets for specific products, so we can create typography that is now mapped to all of these different spaces themselves. They have a clear line between them, and we can create those connections.
Here is the ruleset, for anyone who was curious. Yeah, you could see font size and the equation that is applied to that.
All right, so let’s take a little bit different of examples, so this isn’t... None of what I’m about to show you is live on The Atlantic. This is just a study, but let’s do that same analysis of this that we did with the newspaper.
We can plot all of these different headlines onto a graph. And instead of drawing a straight line to them, through them, what happens when we draw kind of a curved line through them? Let’s take a look at what happens when we adjust this curve.
You could see that maybe we don’t want to interpolate our headlines in a linear way. We have so much control over our typography. As it moves through this space in a non-linear way, we can really shape how this typography flows through our layout. Maybe we want the headlines to remain smaller and then get bigger really quickly as the width of its container starts to grow.
As an added bonus, responsive just works because the containers themselves are moving in and out. So, all of these headlines are again using one single CSS ruleset and it just works.
All right, so that’s headlines. We’ve talked a lot about headline components. What do the typographic maps of our body copy, what do those look like? Especially, how do those translate to really, really small sizes?
Again, here’s the difference between some linear interpolation and curved interpolation. Linear gets really small really quickly. The bounds on either side of this remain exactly the same. It’s just the curve that is different between these two examples.
The curve for root font sizing, I’ve found this is roughly the best curve for that. We want our text to be as big as possible as soon as possible, but we also want our text to scale down and to be able to scale down to really, really small sizes so that we don’t end up, like, there is the off chance that somebody might read your website on their watch, and you might not want your text to start to run off the side because that results in accessibility issues.
As you get really small, you start to have to make these difficult choices. All right, is the text going to be small? Am I going to have to have these scaling issues? Or am I going to have to have text run off the viewport? Both of these are no-nos according to WCAG, but you need to make some choice as you make your text really, really small.
We’ve talked about font size a lot. We can also interpolate line height. We might want to interpolate font-weight. And we might want to interpolate font width. You might want to interpolate any interpolable property.
This is what it might look like if you interpolate font weight and font width. Again, all of these are driven by the same single CSS ruleset. But you get this really neat variation. This is using Obviously by OH no Type Co, which has a great condensed and weight axis to it.
The sleeper in here is line-height. If your typography looks off, it’s probably your line height.
Just as a general rule, this doesn’t show up in demos very well, but line height has been adjusted in all of these demos. Increase your line height with more characters per line. Decrease your line height with fewer characters per line.
This looks not great to me. This headline has way too much spacing in it, and the body copy has way too... It’s way too tight. So, let me just inverse the line height of the two, and it is much, much better.
Definitely, don’t sleep on line height. Always, always dial that in.
These graphs are what I’m calling typographic maps, and they describe how our typography flows through the space that is your website. As your website is changing shape, so should your typography to adapt to that.
You could see how the typography might change shape, how it gets smaller as the page itself gets smaller, how it might flow through the shape because, again, we work in these dimensional objects that are more than just the viewport itself. The viewport is a facet of this shape that is our website.
At this point, you might be wondering, how the heck are you doing this? Well, we have really powerful interpolation tooling available in CSS today, and we have for a long time.
That is with just CSS animations. Plain vanilla CSS animations, they’re really cool, really powerful. They could do a lot of this stuff.
I know scroll timeline is coming. This demo is done without scroll timeline. Just passing a variable based on scroll position to CSS. That gets passed into this animation delay function, which is delaying the animation, which is paused at a certain point. As you scroll through, that changes the animation delay, and it is like you are scrolling through the animation itself.
We can also interpolate colors with CSS animation. This is coming in a more proper form to CSS very soon. But we could do this today with CSS animations where we mix two colors together because animations are a form of interpolation.
To get a little bit into this (just because it’s important to understanding how this works), here is the more focused version of this. You can see it is a mix function, so I’m mixing these two colors (blue and lime). Negative five seconds for a one-second animation, and that stops the animation right at 50%, so you get a 50% mix of both blue and lime.
If I change that seconds to something closer to zero, then I get something that’s more blue. And if I change it closer to negative one, then I get something closer to lime.
Really powerful tools within CSS today.
You could do these typographic maps that I’ve been showing you with just CSS as well. According to the spec, it’s not implemented in any browser yet. [Laughter] But a little bit of JS can fill in the gap.
Just to address the sticking point right away, this calc function will not work in browsers today, but it is part of the spec that came out with all of the trig functions that have just come to calc. The exact same spec has been starting to roll out to different browsers, but this part of it hasn’t been implemented yet.
It allows you to divide unit, do unit interpolation within CSS, so this would equal a unitless number that is the number of pixels wide, whatever this container is. With that unitless number, you can start to convert that into seconds, which then you can apply to that animation delay function and it will work.
If you want to query how many REMs wide an element is, you can use this and it will provide a unitless number that then you can take in and change to do whatever you need it to do, which enables us to put these typography rulesets together so we could have our headline and our headline works with this easing function (ease in and out).
We no longer have a linear scale. We have an ease function for our headline. And the fallback is three REMs with the smaller point being 1.2 REMs.
If we wanted to be mobile first, we could just invert the two, so the fallback is the smaller number and it’s animating to the larger number. Note we have font-weight in here as well, which you cannot do with current viewport unit-based interpolation.
You could also do it this way where you’re animating from something to something. You can add any keyframes in between there. You can create really complex maps if you want to and any fallback you want could be in the headline itself. Then this function would make all of that work.
You could condense it down even further [laughter] to one particular shorthand animation property. And you could see where these different numbers come into play.
There’s the 100cqi, which queries the width, and then the divided by one pixel. Take out the one pixel, so it’s now a unitless value for the second function.
Like I said, there’s a way to do this with JavaScript, so adding a resize observer to elements and then using that unitless value so you don’t have to use that calc function that doesn’t work yet in browsers. Pass that through to a CSS variable, and then that can be used within the animation function.
There it is. This is using Typetura, but I’ve shown you everything that you need to know to do it yourself.
Here is what a map for the root styles might look like. You could see there’s Obviously as the font family. We are interpolating font size here and line height.
Here is the headline, so this is the ruleset for the headline.
That is what is driving all of the typography on this page. Those two rulesets enable us to get really, really tiny without any text overflowing the container but still legible at almost all of the sizes, and really, really big with all of this variation in the headline styles.
It also helps work faster because you are only dealing with one particular CSS ruleset. I was on Alex Trost’s Twitch stream, and put this together really quickly, so you can create these rich editorial pages super-fast by creating typographic maps.
The shape of a headline now occupies this space, and this space can change and adapt. It is this extrusion that you can really adjust. It’s not linear all of the time.
What I really... If you come away from this talk with anything, just think about websites as these shapes, and then think about how our typography maps through those shapes.
Yeah. That is it, so thank you so much.
[audience applause]
