Proportional Website Scaling. AKA "The Font Size is Too Small".

I’ve been building websites for a while now — from freelance one-on-one client relationships to working with the wonderful team at Braid where we frequently engage with larger institutional clients.

One item of feedback that I’ve noticed rears its head more and more frequently as the size of a project's stakeholder group increases is that the font sizes in final builds are too small. It’s a request that's become so common with larger stakeholder groups — and a shared point of frustration with peers in my industry — that I began thinking through if there was a root cause that could be addressed. I’m an engineer, so naturally, I want to “fix it”.

Why this feedback exists: A hypothesis

Everyone’s exact experience with this particular feedback item may vary, but here's how it generally goes for us.

• Strategy and Design: Everything’s good, adjustments are made in response to brand guidelines or business objectives.

• Early Development Check-ins: Things are looking like the designs, everything is great.

• Staging site: The client begins filling out content. Feedback comes in for areas where the editor experience could be improved. Still looking like the designs. Things are good.

• Populated staging site is shown to non-technical stakeholder group: The font size is too small.

Almost inevitably a project being shown to non-technical stakeholders results in this feedback. But why?

I believe the answer lies in how these larger groups are being shown a project. If you’ve ever been a part of a large stakeholder meeting then you probably know where this is headed. What does one of these meetings usually look like?

In my experience, it’s a group of people sitting in a conference room for a grand unveiling. Sometimes these meetings happen without us (Braid) being present. Our client takes the work we’ve collaborated on and presents it to others within their organization who must give their approval for things to move forward.

How is the project presented? On a TV running at some absurdly high resolution that in no way represent actual usage of the product by the target audience. And guess what! The stakeholder group is 100% correct, the fonts are too small. Good websites look bad on TVs.

The non-technical stakeholder group does not understand (nor should they be expected to) that what they’re seeing on the TV in their stakeholder meeting is not how end-users will be seeing the project on their devices. Users sit close to their laptops & monitors, but TVs are meant to show content at a distance. When you take a design that was meant to be viewed up close and look at it from far away then everything feels small. Sounds obvious, no?

But, I’m convinced this is a huge part of the issue and contributes significantly to this feedback continually arising.

Possible Solutions

So how do we fix it?

Well, we could tell our client “Hey, for your stakeholder meetings, make sure you zoom the site in a few clicks before showing it to the group”. That works if we know about every meeting that’s been scheduled and who will be leading it. Sadly, we don’t always have control over who runs the meetings to ensure they're aware that zooming in the browser would be a helpful step.

Wouldn’t it be great if the website would just zoom itself once we went beyond what felt like reasonable monitor screen widths? What if you could get your “desktop” layout to zoom proportionally and fluidly to a “TV” breakpoint? What if you could do it with about 6 lines of CSS? Interested? That would be some crazy magic, huh?

Ok, how do I do that?

Pulling this off requires a pretty substantial commitment from the start of your project. Every measurement in your project's CSS needs to be done with em units. If you have px values for any of your measurements then those values will not scale proportionally with the rest of the design.

However, if you commit to using relative units for all of your sizing then you can create this zoom effect on your site with minimal effort.

Let’s say you have a breakpoint at 1440px that represents the largest designed size for your project. From 1440px and above there will be no new layout adjustments on your project. To scale the design proportionally from 1440px to 2200px with a zoom effect you would do the following on your body tag in your CSS (this example uses SCSS).

Now when your project hits 1440px, the font size will begin to be calculated using a multiple of the current viewport width. Because em units are calculated based on the font size of their parents as the viewport width increases the base size of your relative units will increase as well. Once we reach 2200px we set the font-size back to a px value to “lock” the size and prevent further scaling. Want the site to scale forever? Then don't set the value back topx.

So where did those values for the font-size come from? In my case 16px was the base size inferred from the designs. The scaling values of 1.1vw and 23px where determined through a scientific method called “keep adjusting the numbers until there's not a jarring jump at either end of the effect”. The values for your project may differ depending on your project's base font size and your target starting and ending breakpoints for the zoom effect.

The end result

You should now be able to pull your website up on a laptop, desktop monitor at typical viewing widths, and a 4k TV for viewing in a conference room and everything should feel appropriately sized. Your non-technical stakeholders can now focus their feedback on actual concerns rather than getting hung up on fears that their contractor has foolishly built a website for ants.

Want to try it for yourself? This website (https://wearebraid.com) exhibits the same behavior mentioned in this article. If you scale the website to an ultra-wide viewport width the desktop breakpoint will proportionally scale to an appropriate TV size.

Conclusion

I believe that this strategy provides an effective way to ensure that your website looks well formated and sized regardless of what device a stakeholder group is shown a demo on. Here’s to hearing “the font size is too small” no more!