Working through type details
Lesson Intro
- Gathering the content…. in detail… for realz…. 3 layers more clarity
- Generally talking about type… getting to some general conclusion
- Getting that content into chunks so you can start planning how it will actually be used (now that you have some actual things to work with)
- Now that you have some ideas about the pieces…. larger layout concerns can help us make decisions about the contrast between type patterns (that’s today)
- Tomorrow
- Next day
Keep it loose today. Get some solid time with type while trying each of these settings of constraint. Ideally, you’d do each one of these for a whole week! Many hours a day. But – 1 hour each will teach you a lot as a start.
One size (one weight)
Just one font. 1 size. It’s amazing what you can do. Use this constraint to think of all of the things you can do with space and other ways to find visual contrast and create visual hierarchy.
(just one typeface/font until further notice!)
These are some classic constraints for graphic design college. Chris Do went to Art Center. As you probably know already / we think these are great resources (they are free) But keep in mind that their goals are different than ours. We’re building design systems and not just trying to “make a poster look cool” in an academic way. They should just give you some idea for that process as a bonus / vs. being the main lesson here.
Chris Do and Milka Broukhim critique student work: video
One size and two weights
In Graphic Design college, you might stay on each one of these for weeks. So, – on your own time – consider going deeper on this.
In that first exercise – did you try all lowercase – or – UPPERCASE? Did you work through variations of line height and spacing / and maybe even some letter spacing on that uppercase type? If not! Just note that we didn’t say you couldn’t…
OK. On to this one. Same as last time, but now you can use another weight too. However, there’s not much contrast in choosing medium and regular. 100, 200, 300, 400, 500, 600, 700 are the numbers, right? So – skip a weight (at least on) – and get some contrast. So, 400 and 600 – or 100 and 400. If you’re going to play with the weight – do it with bravado.
Chris Do and Milka Broukhim critique student work: video
Two sizes but one weight
Just like the weights, – take a stand. Using 16px and 18px font is just going to confuse people. Are they the same… or not?
Make some rules and try those out. How about one size is double the other. Or half. Or triple. Or 1.61803398875 times as big.
Play with the contrast between sizes. Be playful. Try lots of things. Who knows… maybe it’s not even a good idea. While you’re working on this – pay attention to the counters and apertures in both sizes.
Chris Do and Milka Broukhim critique student work: video
Two sizes and two weights
Is more always better?
and as always… we didn’t say you couldn’t use caps or some other tricks to spice things up.
Chris Do and Milka Broukhim critique student work: video
Rules, shapes, tricks
A nice line to separate things, or a little black box can do wonders.
Chris Do and Milka Broukhim critique student work: video
Everything!
Just kidding.
If you were working on posters and stuff… or making some illustration or art piece – then sure. Just “do stuff.”
But that’s not what we’re doing.
So, instead – consider that at this point you might need a few more variations. You probably have some microcopy, legal things, a fun link style, form labels, and other little use cases for a third font size. Maybe… you even have a need for a really big header – and just a standard type of header for sections. So – you can work out the contrast between those two.
Header, links, subheader, body copy, and microcopy – will all need adequate contrast in some way to allow for clear visual hierarchy – and also harmony between them.
We suggest you get some practice doing this with just the one font.
Chris Do and Milka Broukhim critique student work: video, another