Common Font Issues

[00:00:00]
>> Jason Pamental: Looking at proportion again and it really was remarkable to see how much attention that got but here's the stuff that's still happening today that drives me absolutely nuts. So this isn't terrible on the Vogue site but it's not really that great either to see headlines that have only like two or three words in a line.

[00:00:27]
All of this extra space on either side of the body copy and really sorta overly tall line space, when the lines are that short, you don't need that much of a gap between them. It actually will sorta slow down your reading and reduce the amount of content people can see.

[00:00:43]
You really wanna make sure that you're tailoring the typography to make use of the available screen space to give people a reasonable experience. But I still see this in responsive email newsletters all the time. Where they haven't tailored the size of the heading, and because it's so big, even it's just breaking letters.

[00:01:03]
I mean, it's a really terrible experience, and that's some of a very reputable company. I mean, that was really disappointing to see that. I still get news letters like that today, I open them up on my phone, and just didn't have a complete word on a line. And I think this is really an example of things being much better and much more tailored so that it's using the width of the screen well.

[00:01:26]
It's got a much more reasonable letting in between the line height. Everything is tailored a little bit better for that sized screen to give you a really good experience with plenty of content and view it's really easy to read and follow. So back to some of these samples, going from that to that makes for a much better experience for people.

[00:01:54]
>> Jason Pamental: Now, I think it's maybe a little bit of a harder concept to get across, and it's a little bit more abstract, but one of the things that I want you to take away in thinking about typography particularly when that's not your day job. This is something to try and make what you do if you're more focused on front end development, building up the application, it may never be the kinda thing you spend all of your time on.

[00:02:22]
But don't worry about the specifics, worry about the concept of it just what's more important on the screen at a given time. Think about those elements in proportion. Think about them together, think about the point of that mark up. It's an H1, it's an H2, it's a H3, it's a block quote, it's an unordered list.

[00:02:42]
There's a priority of content on the screen and the typography should support the meaning of those tags. So that'll help guide you. You may not know the specifics of that design system. You might still be working that out, but as long as you keep in mind, how do I tell the reader what is the most important piece of information?

[00:03:03]
What's the next important? This is about communication and influencing behavior. That's fundamentally what every piece of design is about. Every flyer, every sticker, every business card, every website is trying to get across an idea. And usually trying to influence people to do something, to buy something, to go somewhere.

[00:03:25]
That's the point, that's fundamentally a commercial endeavour, that's what design's all about. The typography is meant to help support that influence through emotion, through guidance, through visual hierarchy, through guiding people's eye around the page. That's what the typography supposed to do, so don't get overly hung up on the specifics.

[00:03:43]
Just blur your eyes a little bit, stand back, think about what is the big picture, what's the overall goal. That's gonna help guide you towards making better choices about whether it's pairing type or heading sizes or the way things scale.