Proportion

[00:00:00]
>> Jason Pamental: So we'll look at Proportion, again, a little bit. This article, I mentioned this earlier. When I wrote this, it clearly struck a nerve. This blog post on the Ted cast website, at something like 30,000 or 40,000 views in three weeks, I was far more popular than anything I have ever written before or sense, and it was really focused in on this notion of how do you create that modular scale across small screen to large ones to maintain hierarchy.

[00:00:35]
Without compromising the user experience, and line wrap, and what you can see on the screen. And what I wanted to make sure I was focusing in on, was getting away from thinking about this sort of print centric mindset of what these proportions always needed to be. Bear in mind, Robert Bringhurst wrote a book called, The Elements of Typographic Style.

[00:01:00]
That's something of a Bible for designers in the print world about proportion, and sort of appropriate typography for reading. It really has to adapt. You can't apply those same kind of rules, when you look at things, so if we did not adapt that proportion, this is what that looks like when you don't correct for font size, and headings, and body copy, when you go down to a phone.

[00:01:29]
And I think you'll agree that that's not a particularly good initial experience on the right, so if that loads up, and you get three lines of the actual content that you came here to read, that's not that great an experience. But, if we use break points, and we design things from a mobile first context and move on up, all we did was just bring the proportion of the headings down, and look how much more content we get on screen.

[00:01:57]
That's the only thing that we changed. So when you have fewer elements visible, you can be more subtle. That's the main thing to grasp from this, is on the small screen, we can be far more subtle, because there're fewer distractions. When you get on to the large screen, there's so much more going on.

[00:02:17]
That's why headings need to stand out so much more. Or if you think about commercial media sites. There's so many ads there. You need all the help you can get to find the heading for the page. So this is what it looked like in my book. This kind of laid everything out, sort of the print norm, how that translated to desktop design, different size of desktop, tablets, phones.

[00:02:44]
And you can see body copy stays largely the same, but the headings go from, maybe, 2M or twice the body copy on the phone all the way up to three times body copy, and it's a much larger distinction when you get to that larger screen. And so, this was sort of meant as a starting point, and that's where I ended up using on a lot of projects to just get a feel for how things might move in scale.

[00:03:09]
It's gonna vary with typeface, because they're all slightly different, and it's gonna vary with the project, and how the layout is on large and small screen. Sometimes, you even want a greater exaggeration. You might have four or five times the body copy for a really, really big header, it just really depends on the design, but this does gives you a framework to start with.