Design for Developers

Typography Exercise and Q&A

Design for Developers

Check out a free preview of the full Design for Developers course

The "Typography Exercise and Q&A" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah sets up adding typography to the ongoing layout exercise, and answers questions regarding typography pairing, variable fonts, color and best practices.


Transcript from the "Typography Exercise and Q&A" Lesson

>> Sarah Drasner: Exercise, time to pair some fonts. Take one of the compositions you made earlier, and turn the rectangles into blocks of text with two fonts.
>> Speaker 2: When you were pairing fonts earlier, some pairs you would sort of matter of factly declare that they don't look good together. And I just wanna know what if I don't detect that at all?

>> Sarah Drasner: That's okay, some of these stuff is subjective. So if you don't agree like some of the stuff like,
>> Sarah Drasner: This one. So is this like one of the examples or was it the other one, was it?
>> Speaker 2: A lot of these, I don't detect anything obviously bad and sort of what I'm wondering is if there's anything more to it than taste or subjectivity.

>> Sarah Drasner: Well, if you can't tell the difference between something like this, pairing things that are opposite, is a really good place to start for people who do notice those kind of things. So again, pairing a display and a sans-serif, or a serif and a sans-serif can kind of make sure that you're covering that base a little bit.

I'm not saying that you have to agree to that, and if you like this, then go for it by all means. But if you're like, I wanna follow the rules but I just don't understand them, then maybe kind of stick to what's safe, which might be working with things that are a little bit different.

So two things that are not super-similar, or playing around with that font joy thing that we saw earlier
>> Sarah Drasner: So this can be like the palette thing that we talked about, right? Where you keep playing around with this until you find something that does strike you, that maybe you don't know why.

I honestly, for some of the color palettes, I'm like, I don't know why I like this color palette, but I'm really into it.
>> Speaker 2: Yeah.
>> Sarah Drasner: I might know that they're analogous or they're triad, but I don't really know why it strikes me the way that it does.

Some font pairings work the same way, so you could work with it, with this kind of machine-generated concept until you find something that does strike you.
>> Speaker 2: Thank you.
>> Sarah Drasner: Yeah, no problem. I'm gonna answer a couple of questions that came in. One was back from color. It was a question about whether LCh Lab color is additive or subtractive color mixing.

Well, anytime you're working with a computer, it's additive color mixing. We might mimic some of the processes of subtractive color mixing, and we can adjust what we're working with with Photoshop and Illustrator to be capable to be in CMYK color mode for printing. But really, since it's coming through the screen, it's always gonna be the additive process, right?

That's what is creating those colors under the hood from a very base level. So great question. There was another question about, well, not a question as much as comment about variable fonts, right? Yeah, variable fonts are really awesome, I forgot to put them into the slide deck. If you're into variable fonts, you should follow Mandy Michael.

She is amazing and her code pens are awesome. She has this grass with variable fonts. How cool is that? My god, she is a genius.
>> Speaker 2: The cool thing, too, is you only need one font for every weight so you don't-
>> Sarah Drasner: Right, yeah, yeah, I should have explained that.

Variable fonts are like one font that is bigger or smaller, so let's actually look at it.
>> Sarah Drasner: I think,
>> Sarah Drasner: So you can see how it would grow, you see how it's growing, like those little serify bits? And then, dots get bigger, smaller,
>> Sarah Drasner: Heavier weight, condensed. And so this is cool, you just deliver one font.

And if you're a dev working with a designer who can't make up their minds, [LAUGH] that's okay. You're not having to load a whole new font every time they change their mind. Or you can just decide, I like this font but I want it just ever so slightly, more heavy or lighter.

Variable fonts are so awesome. Mandy Michael does all sorts of amazing things with fonts and texts. These are real letters. It's not an SVG or something. You can even cheat. See how she's got content editable, so I could probably write something here. I'm gonna write,
>> Sarah Drasner: Tacos, [LAUGH] and let's see.

Yeah, fracturing the font, what? I have a two reverse engineer collection. That's a private collection on CodePen. I just stick the things in there, and then if I have like a long plane ride with WiFi, I'll be like, break it, how to work. [LAUGH] I do that with her stuff all the time.

She had some mix and match emoji things, too. Anyway, we will stop fan-girling over Mandy Michael and continue our journey.

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