What determines the scale of which we design a site? We look at the trends of modern web design as it relates to the size of images and text.
Big. Tiny. Somewhere in between. No matter the scale, web design “size” trends certainly emerge every so often. Remember the tiny, screen text Flash sites 2Advanced would put out? How about when everyone was doing “big typography” with massive statements on their homepages like “HI. WE’RE ACME AND WE MAKE WEBSITES.” ?
What determines the scale of which we design a site? I realize this a somewhat abstract question, so allow me to explain:
First, a caveat: let’s frame this around one instance of a site at one width. A wide one. For you that may be a desktop, but let’s leave device semantics aside for the moment.
When I dive in, it seems as though, subconsciously, I have a “scale” in mind. For example, (at its widest view) the size of a typical h1 I was specifying a few years ago might have been 20-30px. That seems small to me today, so perhaps my average is closer to 50-60px now, depending on the font. Perhaps the average primary homepage banner/messaging was 400px tall back then, as opposed to 800px now. These aren’t hard and fast rules, and certainly each project has its own character to influence typographic & vertical scale. But it seems as though, on average, what I was comfortable designing at a few years ago differs some today.
What affects scale?
One of my theories pertains to our “perceived web aesthetic”: we design sites to be as forward-compatible as possible, specifically in regards to proportion. The scale of sites we like often influence the style of the ones we create, even if it’s something subtle like increasing or decreasing what size type you’re comfortable using. Maybe we choose a size similar to what we like to see. We like it, we emulate it. Sounds logical.
If I were redesigning a popular sports site, the scale I would emulate would be closer to Fox Sports than ESPN. Why? Fox Sports uses larger type, more padding between elements, and a “scale” that feels in line with my perception of what the current web aesthetic is. ESPN, which hasn’t been redesigned in eons, feels utilitarian, small, and generally in conflict with an acceptable contemporary scale (naturally).
Here’s the issue: many times the clients we have are used to, and expect, the ESPN scale, and will be disappointed if you deliver the Fox Sports scale. Before you disregard this notion, I’m going to break it down a bit further:
It’s easy to conclude that in the past few years, type on the web has gotten larger. The introduction of webfonts, larger screens/densities, and perhaps even readability studies all factor into why this shift has occurred. Designers have since taken liberties to determine just how big their type is, ranging from a modest shift to a considerable one, as seen at A List Apart.
ESPN is pretty conservative in their typographic approach, using “web-safe” Verdana at 12px, and in some cases 11px. 32px Arial headlines are about as adventurous as the site gets. In fact, I’d venture to say most news sites that haven’t undergone a redesign lately are probably sporting similar values.
Contrast that with Fox Sports, whose headlines clock in at a whopping 86px (Nimbus Sans) and body text set at 16px. Again, my perception is that this is more in keeping with the current aesthetic and is in no way superfluous.
Of all the elements, the primary message or call-to-action on a homepage (“banner”, if you will), is the one that I think has seen the largest transition in scale. Not too long ago we were cramming our banners to appear “above the fold”, compared to creating a completely immersive experience.
News sites might not benefit from a single message or item in the first 1280px of a site, but there’s no reason they need to stay 427px like ESPN’s does. Fox Sports’ featured news item is comfortably 700px tall.
Whitespace is often championed as a critical element of good design, and rightfully so. In addition to creating some breathing room between content, whitespace affects the perceived scale of a site. Imagine if a site that rocks deep padding like Exposure decreased it by 50%. Even though the type is still large, the whitespace surrounding it complements it and completes the effect.
ESPN is the pinnacle of cramming content together, and although they do a decent job at separating content types, it’s a less-than-desirable experience of “small type bunched together”. Fox Sports allows more padding not only within modules but between them.
Making a Convincing Argument
Back to what I mentioned about clients having trepidation around larger type, images, messages, and the like: it’s important to consider where they might be coming from. Perhaps their “perceived web aesthetic” is that of news sites (like ESPN) that haven’t undergone redesigns toward a larger scale. As designers, we tend to digest sites geared towards our preferred scale, right? Startup one-pagers. iPhone app launch pages. Other designers' sites. Often the scale of those is what we want to bring to our clients, and often that isn’t the scale they’re used to.
And so, we entertain the requests of decreasing text that looks “horsey” big or pushing content up to fit a certain window height. I’m genuinely curious to hear what approaches you might have, but one I’ve been drawn to is using another industry as a case study, much like I’ve outlined above, comparing sports news sites. Good design can be found in almost any industry, as can “good” scale. What’s important is establishing a shared understanding of what “good” scale is, and sometimes evaluating sites that aren’t within our, or your client’s, industry helps.
Because the web is much bigger than that. Or so I perceive it to be.
Have questions or comments about this post? We'd love to hear from you.
We look at what web designers should keep in mind when designing websites to be accessible to users across every device and screen size.
Images on websites have traditionally used raster graphics such as GIF, JPEG, or PNG types. With high density displays and responsive web design necessitating more flexibility, SVG (Scalable Vector Graphics) files offer better way to decorate the user interface.
Website Traffic Woes?
Google search algorithm updates can wreak havoc on your website’s traffic. Don't let your organic rankings tank. Our free SEO health check can help you identify issues that make Google unhappy with your site.
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.