Check out a free preview of the full Responsive Web Typography v2 course

The "Responsive Type Q&A" Lesson is part of the full, Responsive Web Typography v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jason answers a question figuring out how to know where the breakpoint is when resizing the viewport to best impact user experience regarding web typography.


Transcript from the "Responsive Type Q&A" Lesson

>> Student: Are you gonna talk at all about, I've had issues designing stuff to where's that break, when you resize the page? And it's like okay, well this looks really bad for a few seconds. But how do you know how to, where's that break where?
>> Jason Pamental: Well, there's no hard and fast answer to that.

I think some of the techniques that we're going to look at today will help, kind of, mitigate some of those things. But what will help, and the question is really about managing the true intent of even the origin of the phrase break point was referring to where is the design break.

And that's really, that was the whole idea behind that term. And we've kind of lost sight, I think a little bit of adding in the tweaks. So Jeremy Keith has written about this quite a bit a while ago. You might have a set of break points that you use to govern how the layout changes.

But here might be points where the typography is scaling in an awkward manor. There's no harm in adding a few more. So if you have a particular headline where you start to have some issues. There's no harm in actually creating another break point and applying it just for that element.

So that way, you can create a little bit more in between points, or as Jeremy called them, tweak points. And that way, there's not really a downside to performance. Browsers are really good at processing all this stuff now. There's no downside to having 100 or even 200 media queries in the CSS for a page, it's all processed very quickly.

So adding in a few more here and there for special cases is totally fine. And that's really, it's one of things that led me to what I'm gonna show you later today, is to actually to look at how things my scale rather than have to create all these break points.

But that's also predicated upon an important concept that's a reality for me, is that I work with Content Management Systems. So the design breaking with this headline today is not the same, the way it's gonna break tomorrow with a different headline. I mean, I know that all the public media.

We used to actually work with WGBH in Boston, so that's a NPR station. They publish literally hundreds of pieces of content a day. So there's no way that you could end up tweaking things for every single headline. That's actually one of the things that we have to learn to embrace that we can't control.

So there are little, a few techniques here and there that we will look at that will help make things work in the context of a system. So things like applying a fix to a headline that will put a non-breaking space between the last two words. So that you'll never get one word bumping down, you'll get two, and that will look a little bit more natural.

It's not an absolute, but some of these things kind of layered together, will create a more robust system that will give you fewer headaches like that at the in between points.

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