I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px would be my final answer, but I decided to drop in one more increase last week:

media screen and (min-width: 1234px) and (min-height:700px) {
body {font-size: 137.5%;}
}

This bumps body copy up to 22px for those bold enough to view the site at least 1234px wide. Why 1234px? Just because that’s where, with all % values for widths & container padding, my site hits its max-width.

What’s with the vertical media query? I used min-height to target screens that are wide enough to trigger the change, but not tall enough for it to make sense. As an example, my wife has an 11” MacBook Air that has a screen resolution of 1366px X 768px. With the menu bar & browser window, the screen is not tall enough to trigger that final bump up in font-size unless you enter into full screen browsing, which to me is a good thing.

But maybe vertical media queries could do much more than this. For projects where the fold *gasp* is a concern, perhaps setting min/max-height could be a new way to control how content is served up to screen widths and heights of any size. If you just have to get that sign up button in view without a scroll, you could trigger a smaller banner image or nav bar to make room when necessary on shorter screens.

For what it’s worth, it’s stuff like this that gets me excited about the future of web design. We’re leaping past any point where the word web_page_ makes any sense, and into a a world where what is seen at any one screen size (or Photoshop comp) only captures a sliver of the display capability responsive websites muster.

Update: 6/10/12

I recently decided to bump up the font-size even more at wide views—now we’re at 150% (24px). The road goes on forever and the party never ends.

Update: 3/22/13

I’ve updated this site’s layout. The values mentioned above have changed, but the reasoning behind the usage remains. I’m also now using ems instead of px for media queries.