Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web.

From a purely typographic perspective, one could argue that an adaptive approach (where we set breakpoints around fixed-width containers of text to precisely govern measure) is ideal. If a site is only text that may be true, but when images, video, or more complex multi-column layouts come into play, I find my core beliefs in the benefits of building on a flexible foundation reaffirmed. For me, “ideal” on the web isn’t about pixel-perfection anymore, but about seeking the most pragmatic approach to balancing different kinds of content with an ever-increasing number of screen sizes and resolutions.

In a fluid layout, browser width and typographic measure are linked: the wider the viewport, the more characters per line. Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a few things that can be done to avoid extra long lines of text in fluid layouts.

The first is using media queries to adjust the width of a container, whether for the entire site or just a column of text. For example, I might start with a site container width of 98% for single column mobile narrow views, then gradually bump it down to 80% for full-width large screen views. Media query breakpoints and percentage amounts are, of course, dependent on the content and typefaces involved.

devices and various container widths

The next thing I adjust at wider views is font-size. I’ll check paragraphs to see if the layout is blowing out the characters per line at any given width. When it does, I increase the font-size until things are back in that safe 45-75 range. A simple, effective trick I’ve used is dropping some lorem text into the layout with two asterisks. The first marks the 45th character, and the second marks the 75th. See below at various widths:

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

As I widen the browser window, if at any point the two asterisks appear on the same line of text, I know it’s time to increase the font size. These adjustments are easy (usually 1 CSS property) because I’ve used percentage, em, and rem (not pixel) units in my CSS.

From there, I tweak ’til I go cross-eyed. I’ve also been peppering in things like CSS column-count to split paragraphs in two or three at wider views. It doesn’t make sense within all layouts, but it’s easy to drop in and experiment. See below at various widths:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget mauris dolor. Mauris dictum sapien nec ante fermentum mattis non a libero. Nam vitae mollis mauris. Vestibulum augue ante, pellentesque sit amet bibendum ac, convallis nec lacus. Cras vel ipsum metus.

That’s my approach to fluid type today, but this is completely malleable. It was a little different a week ago and will hopefully evolve with the web and all the devices we’re to accommodate in the future. Here are some of the key things I find myself waffling on, especially when it comes to wide views.

Is there a font-size ceiling?

Every month or so, I’ve been increasing the font-size on the blog via horizontal and vertical media queries for viewports that are maxed-out in size. I started going from 18px to 20px, then went on to 22px, now 24px. I’m definitely not under the illusion that everyone likes the same thing when it comes to font-size or type in general. Setting type on the web can feel a lot like grilling a steak in front of a crowd of your pit master friends. Everyone has his own opinion, his own bag of tricks. I, for one, like the large type at wide views. I’ve seen multiple people reading the same site from further away, and I can imagine someone leaning back rather than craning his neck forward so this 20+ font-size makes sense to me, but…

Are there some text faces that don’t look good large? To my eye, Meta Serif handles the extra size just fine, but I can imagine that some text faces simply weren’t built for larger sizes or even pixel-dense screens. I’d love to get a type designer’s opinion on that. Perhaps it’s all subjective, but I’d say I’ll always be happier with how large type looks & reads vs type that is too small.

Can we count on context? Can we assume that everyone holds a phone or tablet at the same distance, or that desktop browsers are all hunched over a desk? I don’t think so, and the width-based approach I described earlier works well for scaling font-size. Until computers sense a user’s reading distance and adjust page scale proportionally (sounds like a nightmare, right?) we’ll have to make these sensible generalizations. I think it’s safe to. It’s the responsive way.

Panoramic Viewports

How wide is too wide? When do things get so wide that looking left and looking right becomes a chore? I’m not sure, but I’d argue this is another context factor. The further away I am, the smaller the type will relatively appear and the less distance I have to travel from left to right. 1000px + views have been the trickiest to determine. If you scale things proportionally, sooner or later everything is going to be pushed out of the initial view, and while “the fold” doesn’t rule my world, it’s something I think we all consider.

the fold and fluid content

I still set a max-width on most sites based on content considerations. How large should images be? When does the site look awkward & disjointed? When do things get too large? Is it appropriate to slide this layout’s columns out into additional sidebars à la John Hicks? And maybe going super-wide isn’t a necessity at this point in time. I really like the border Frank Chimero has on his site. He’s got a fairly standard max-width being applied and uses the colored borders to help pull focus back towards the text, adding edges to the page.

Fully-Fluid Type

I use FitText on every article title on this site and have used it on client work from time to time, but since reading Chris Coyier’s post (and watching the video) I’ve been excited for viewport sized typography. CSS3 has some new units of measure:

  • vw: each unit is equal to 1% of the width of the containing block
  • vh: each unit is equal to 1% of the height of the containing block
  • vmin: each unit is equal to whichever one is smaller

Like FitText, font-size would change depending upon viewport & container size. It’s a little intimidating to imagine this applied to an entire site. For example, what happens if I overlook some smaller figcaption text, and it renders at 4px on mobile? But this, like anything else, will take some getting used to. I think the more we work with these units, the more useful they’ll be. It’s only supported in Chrome at the moment, so we’ve got time. Dave Rupert even mentioned that in the future, he’d like to see about evolving FitText into a polyfill for these units. What can I say, we love it when CSS renders our tiny jQuery plugins obsolete.

***

So much of this territory is uncharted, and I’m always interested in others’ approaches & opinions, so feel free to chime in with yours. It’s been hard to let go of setting a static font-size for a site and calling things done. I’m realizing that the predictability & control we’ve had over web type is becoming a thing of the past. With everyone working together, from type makers to web designers, sharing ideas and trying new things will help to ensure the web becomes an increasingly enjoyable reading experience for all.

Ads by Fusion

42 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Dan

    Great article as always Trent. I’ve recently been reconsidering some text sizes at different viewports and this article came in at just the right time. That asterix trick alone is really something beautiful. Thanks for another good one.

  • Simon Carr

    Great article - especially the part about what percentage of the monitor you target for each device. That is one of the hardest transitions for a designer in making responsive designs - considering percentages and scale instead of fixed width elements.

  • James Young (@welcomebrand)

    Great idea with the * in text, never really thought about little markers like that. It’s often the simple little tricks like that which help most.

    (Got to say I’m not a fan of the giant text on my large monitor here btw but I guess that’s a personal thing)

    @welcomebrand

  • Zach Inglis

    I totally agree. :)

    My aim is to always keep the resizing fluid to create the least amount of friction for non-specified devices and this is one thing I think about a lot.

    (I wrote a similar script a bit ago myself actually: https://github.com/zachinglis/jquery.responsivetype.js)

  • Jordan Moore

    Great insights and well written as always Mr Walton.

    I love seeing how people tackle responsive layout problems scaling upwards past the “comfort zone”. It’s the lesser trodden path as opposed to solving problems in small contexts.

    I have been looking into setting a max-width at the highest end of the comfort zone then scaling the layout, type and media as the viewport grows. There’s a difficult point where a fluid layout breaks down and an adaptive layout is like an island amongst whitespace. Scaling a maxed out responsive layout (so it’s become an adaptive state) type and media works for me in theory, I just need to put it into practice.

    Thanks for another valuable piece of writing.

  • Joshua

    For me, “ideal” on the web isn’t about pixel-perfection anymore, but about seeking the most pragmatic approach to balancing different kinds of content with an ever-increasing number of screen sizes and resolutions.

    YES. I know there are some growing pains, but one thing I am excited to see is Designers that are designing things with purpose, not just look. Understanding why things will go one way, look another way, and be reacted to completely different, based on the user and device. As designer/developers we have to not only adapt to what works in browsers and mobile devices but we also have to adapt to how the user is going to view and use what they can view. If they can’t read it, or struggle to read it, most will give up.

    Cheers!

  • David

    I really like your technique for spiking Lorem to assess and maintain readable line lengths, but I think it’s even more useful that my mockups and prototypes can generate different sets of Lorem every time I reload the page.

    This exposes weak points or trouble areas with different break points in ways that loading the same chunks of placeholder text again and again cannot.

    I accomplish this with a toolkit which I just recently got around to cleaning up and releasing... Type nerds designing in-browser should give it a shot.

    http://dummy.kerns.dk

    It’s very extensible, so adding a Lorem string with demarcations at the 45th and 75th chars is a quick edit in a text file. I’m going to do it now for myself, ...the “Walton Paragraph”.

  • Trent

    @Zach Inglis: Great stuff! I’ll be checking out responsivetype.js soon.

    @Jordan Moore:

    Scaling a maxed out responsive layout (so it’s become an adaptive state) type and media works for me in theory, I just need to put it into practice.

    Do it! It’s definitely uncharted territory. And once you go beyond a certain size, you start to wonder about non-computer displays... stuff like TVs & full-screen projection walls on space yachts :)

    @David:

    ...the “Walton Paragraph”

    Ha!

  • gray ghost visuals

    Those vunits you speak of are supported in IE9 as well ... not just Chrome unless I misunderstood you.

    The problem at the moment with rem is that they don’t work in @media but have great support otherwise. So @media screen and (max-width:30rem) won’t work :(

  • Regis Kuckaertz

    Long time reader, first time commenter.

    The viewport units are a much welcomed addition to the spec and as support increases we might be starting to see more layouts based on viewport ratios.

    Recently, I’ve seen friends using their TV for browsing the web and, despite the large screen, sitting 10″ away makes large text look really tiny. Most of them are resorting to some sort of page zoom—a case to err towards em-based media queries:

    http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

    ... yet, I’d love to think we could use your strategy to pump the type size just enough so that users don’t even need to zoom the page.

    BTW, FF Meta Serif rocks at large sizes on a PC, yeah!

  • Trent

    @gray ghost visuals: Oh, nice! IE9 does support vw & vh units.

    @Regis Kuckaertz: Howdy, Regis! I bet it can be a combination of both strategies. Things like TVs could maybe even warrant a whole new set of tricks. Maybe as we add phones & tablets to our device testing arsenal, we should be mounting flat-screens on our office walls. Not to watch Ghostbusters or anything. Just to test. Only to test. :)

  • Matt Crummy

    Regarding width:
    I typically design with the 960 grid system and just recently began designing responsive sites for up to 1280px in mind as my max width.

    Has a new (wider) standard emerged for a 12 column grid yet?
    Are you guys using the 1140gs?

    Screen resolution:
    Also, any thoughts on how to build the web considering super hi-res displays like Apple’s Macbook with Retina Display? How does one even save an image for a screen that displays 220 pixels per inch?

    Thanks for fostering this discussion, Trent. It needs to happen!

  • Trent

    @Matt Crummy: Thanks, Matt!

    Has a new (wider) standard emerged for a 12 column grid yet? Are you guys using the 1140gs

    At Paravel, we’ll either start with Foldy, or go completely from scratch. For this site I’ve sort of hacked in a 960 fluid grid to keep older posts intact. Overall, I’m finding frameworks less useful as flexible grids enter the picture.

    Also, any thoughts on how to build the web considering super hi-res displays like Apple’s Macbook with Retina Display?

    To start, I think icon fonts and CSS over image exports are where it’s at. My opinions evolve everyday, but this post might be interesting to you.

  • Gray Ghost Visuals

    @Trent:
    Yeah pretty cool! The only reason I knew that was pure accident and nothing remotely close to academic. IE9 Amazes me every time I go back to test and IE10 just keeps getting better.

    I Love your asterisk line measure trick. It’s already in use now on my end as of this morning just as the coffee touched my tongue. Increasing text size as the screen expands is also very sneaky Mr. Bond. Large screen viewers are gonna love you for that. How about some line height increase-age with the expanding screen?

  • Rolf Meijer

    Great article, a fresh view on these matters.
    I’m just wondering why you’re not setting the content width in (r)em. That way you will have even more control over your line length.
    I like to combine this with a max-width in percentages, in case the window is too small.
    Then if someone scales the text up or down the width will be set in relation to the font-size so you will always have a “perfect” line-length.
    This can always be combined with your media-queries setting the font-size.

  • Trent

    @Rolf Meijer: I’d love to see a demo for what you’re talking about. I may be crazy, but it sounds exactly like what I’ve outlined in the article, just with rems instead of ems.

    My understanding is that the key difference between em & rem units is that rem size is based on the root of the document. At this point, I’m still using ems in most cases simply because of current browser support.

  • Liam Jay

    Similar to what James previously said, I also love the tip about using * in text, as markers. Simple yet brilliant!

    Personally I’m a big (pun intended) fan of the huge text on larger monitors, as I find it naturally stops me leaning in close towards the screen, which I inadvertently end up doing on a lot of other sites.

  • Martin Stark (@mstark_)

    Loving the trick with asterisks!

    Found myself comfortably leaning back from my 24″ monitor, sinking deeper into my chair, while reading this. It sparked the thought that — with this trend of increased text sizes — web designers will soon start popularizing new and different kinds of back problems ;)

    Great read, and I agree.

  • Rolf Meijer

    @Trent I think it’s a bit different. It is always possible that I didn’t understand you, of course, in that case, sorry :-).

    If you scale down the font-size on your website the font-size decreases, but the width of the container remains the same. So more text on one line.
    If I’m correct you set the width of your section in pixels with a max-width in precentages. All children have widths declared in percentages.
    What I suggest is to start with em’s, with a maximum in percentages. (Em’s or rem’s shouldn’t make a difference, but I haven’t tried it yet)
    A demo can be found on my own site (http://karu.nl/over-studio-karu), it’s not finished yet (obviously ;-) ) so there might be some weird exceptions here and there. Try to scale the text-size in your browser.
    I’m also working on my media queries, there’s just one breakpoint, but it is defined in em’s too.
    That way you keep the choice for font-size ultimately to the visitor. You just try to make it a comfortable read, in terms of line length, within the boundries of the browser window.

  • Trent

    @Rolf Meijer: Ah, no it’s me. I think I follow you now. You’re basically talking about em-based media queries, right? Good stuff.

    On that note, I’m always fascinated by how browsers handle zooming and scaling by default (and by default I mean whatever setting I’ve unknowingly clicked on or off :) Here’s a screenshot of 3 browsers after I’ve hit command + 3 times.

  • fjpoblam

    Your testing method is a great idea. I notice that many mobile sites are using serif fonts. Especially Georgia, inasmuch as it’s the one I’ve found most browsers treat “equally” (surprisingly, even as opposed to flavors of Times). I and my clients find serifs easier to read in larger sizes. However, I’d like to see more articles on flexible font-sizing. Frankly, I’m tired of writing so many danged media queries.

  • Trent

    @fjpoblam:

    However, I’d like to see more articles on flexible font-sizing. Frankly, I’m tired of writing so many danged media queries.

    I hear you! Though, writing media queries beats the hell out of build alternate versions of websites ;)

  • Adam Haworth

    Beautiful example. This is something I have been planning on doing on my site for a while. I have been having trouble getting image to resize though.

  • Rolf Meijer

    @Trent: Yes, indeed.
    I guess your theory about font-size (scaling up with the screensize) might be well combined with em-based media queries.
    The three screenshots are interesting/puzzling too.

  • Craig Rozynski

    Here’s an idea, how about adjusting font sizes based on the readers distance from the screen. Proximity breakpoints?

  • manuel morrison

    Really great post, I’m making some experiments with FitText, it’s a really great tool. Congrats!.

  • Kelsey Higham

    I’m curious, what kind of monitor do you have? I was surprised to find that on my relatively-low-res MacBook, 16px text ends up resolving at 10pt, under the real-world definition of ~72 points to an inch! [1] The default text size in every browser is, for me, even smaller than every essay I’ve written in school, at 12pt.

    It must be even worse with newer screens — like the MacBook Air you mentioned, which renders 16px text at 8pt.

    It sounds absurd to make text on this website 22px, but it’s not so crazy if you think of it as 14pt or 11pt.

    So it’s weird that bumping up the font-size as much as you have is so out of the ordinary!

    [1]
    Step 1: http://www.wolframalpha.com/input/?i=resolution+of+1280x800+display+with+13.3%22+diagonal
    Step 2: http://www.wolframalpha.com/input/?i=16px+%2F+113.5ppi+in+desktop+publishing+points

  • JP

    Firstly great article Trent.
    On your Panoramic Viewports point I would like say I have seen http://www.fastcodesign.com/ embrace the full screen width images for intros and feature images of posts. Even though you have to scroll below the “fold” to see the post on some screens it creates a great visual editorial impact. I am sure it is not to everyones taste but I like the feeling it gives of reading a magazine and champions editorial graphic design for posts. Which has sadly being lost as print media fades away. Now they just need to take your advice and work on the rest of the copy.

  • Shane

    I’m juuuust starting to get into designing responsively (about time) and this article has been a huge help. Thanks Trent :)

  • Kris Sowersby

    “Are there some text faces that don’t look good large? To my eye, Meta Serif handles the extra size just fine, but I can imagine that some text faces simply weren’t built for larger sizes or even pixel-dense screens. I’d love to get a type designer’s opinion on that. Perhaps it’s all subjective, but I’d say I’ll always be happier with how large type looks & reads vs type that is too small.”

    In summary: if it looks right it is right. That’s about all I have for you!

  • Henning

    This is what I needed, I think it makes the text really look great.

  • Martin Bavio

    Would be amazing to mix these thoughts with some scale in typography, so you can always have your font hierarchies correctly scaled. Just thinking out loud, but maybe somebody has done it? How to do blend this: http://www.alistapart.com/articles/more-meaningful-typography/ with the responsive techniques?

  • Strony WWW

    A lot of helpful advices. Time to be more responsive;]

  • W J Bog

    Genius reasoning for larger text. Reading ‘lean back’, I found that I had indeed leant back and that I was reading your article in an entirely different frame of mind to that one normally adopts aboard the web.

  • Peter

    What about browser width vs screen width when it comes to adjust layout and typography?

    I guess that people on any large resolution screens usually reduce their browser window due to multitasking task. In that perspective, screen size becomes irrelevant. The reading distance stay the same, but as the browser become smaller and smaller, so does the content - which makes it harder to experience the content.

  • benjamin

    Brilliant article. I’m totally with you on the 20px+ font sizes. And I applaud your attention to character per line. I’m totally going to use the “*” trick. Stay awesome!

  • Christian Krammer

    As always, a great and inspiring article that sums up the contemporary techniques very well. I just started with rems and I love them so far. Since I already used ems it was no big change for me, except that I don’t have to worry about nesting anymore.

    However I will wait a bit until I use the viewport-relative units until they are also supported in Firefox. WebKit-support alone is a bit thin for me. ;)

  • @Aimee_MFT

    Enjoyed that article. Cheers for the link to FitText.js. It perfectly solved a problem I was having. Also the * trick is excellent!

  • Martin

    That is one of the hardest transitions for a designer in making responsive designs

  • PomCompot

    I’m wondering if you have any precept about font justification. You, here, use a left align font, justified font preveal in most books and common typographic usages. Have you a particular reason for not using this? A concern about readability?

    Your articles are really quality ones. You always spot some good subjects and deal with them in a deep and interesting way.

  • Dyske

    This past weekend, I decided that I would try scaling my entire site to the browser window. When I showed the result to my friend, he told me about FitText, and then found your site here. My site continually scales the font, so it works like zooming. I explained my thinking on this blog post. http://blog.cycle-interactive.com/?p=487

  • Luis Escorial

    Trent, excellent article as usual. I just got totally hooked up with your site, content and design.
    Just a personal point about the approach with type size you are using. When I resize the browser to a handheld device, the type size for the site reduces accordingly, but I think it becomes a bit to small for anybody with less than 20/20 vision (like me).
    True I totally dig big(er) type to read, find them visually pleasant (as a designer) and easy to read as a 46 year old man, but I’ve got to realize that for tablet and mostly iPhone, bigger type size has become just more than a personal taste.
    Keep the incredible articles and work. Thanks
    Have you considered that possibility

Leave a Reply