Scalable Design: Beyond Responsive Design

Responsive Design has been a great breakthrough for modern web development. But I couldn't help but notice that something is lacking in our expectations regarding the aesthetics of web user interfaces as well as the obvious/ not so obvious limitations we endure as end users due to static fonts in 2017.

I will likely touch on a bunch of things you already know so I encourage you to skip through to better parts.

I may also offend you if you’re very sensitive or complacent about the current state of web design. Sorry in advance ;-D

Yes there is a plug

Let’s get directly to the point…

Web design is limited mainly due to font sizing

Practically speaking, fonts don’t scale on the web. Some people can’t fathom this but this is a “YUGE” discrepancy for a modern visual platform. I hope you are able to comprehend the impact this has on the way in which we:

• Design for the web.
• Implement user interfaces.
• Fight against content-display limitations.
• Fight against limitation regarding animations.
• Work harder to make things look similar-ish on the large variety of browsers and devices we consume today.

Why?

Despite what some believe, fonts are not static down to better design implementations or because it works better for Responsive Design, I believe the decision is largely due to backwards compatibility, and rightfully so.

Yea but what about SVG and the Canvas API?

Good point imaginary reader…

• Unfortunately SVG cannot wrap fonts at the time of this article.
• Canvas lacks SEO and accessibility.
• WebGL in many cases can be overkill and lacks SEO and accessibility.

With all that said, all three technologies are way under utilise in modern web development. We are content driven mammals so this obviously why we generally favour HTML.

S̶V̶G̶,̶ ̶C̶a̶n̶v̶a̶s̶,̶ ̶W̶e̶b̶G̶L̶

What about Viewport Units?

Unfortunately vh, vw, vmin, & vmax all break the desktop browser’s zoom accessibility feature. Zoom is a frequently used feature in the browser.

There was a proposal for vb & vi units, I believe it would be able to scale without breaking zoom, I’m not sure if it’s still a thing but for now…

v̶i̶e̶w̶p̶o̶r̶t̶ ̶u̶n̶i̶t̶s̶

Isn’t there already libraries that handle this?

tl;dr: Not exactly.

A few attempts have come close but I found none that were suitable for real-world usage. Below I have listed the most popular font-scaling libraries. Beside each I have noted issues that I’ve encountered. Most of these libraries (if not all) are no longer maintained:

• inflateText >3
• FlowType > 1, 3, 5
• FitText > 1, 2, 3, 5
• React Native Text > 6
• jquery-textfill > 1, 4, 5
• font-to-width > 3
• jQuery.fontFlex > 1, 3, 5
• Just use: transform: scaleX() > 7

1. Inconsistent browser compatibility.

2. Difficult to no ability to zoom, thus breaking accessibility.

3. Doesn't scale padding/ margin/ line-height and other relative dimensions and doesn’t respect the style attributes on elements (overwrite your inline styles). You must specify relative dimensions (padding/ margin)(More maintenance), or you can’t specify relative dimensions.

4. Scales to a container (which is the inverse effect, generally not a desirable result).

5. jQuery dependent

6. Does exactly what vw, vh, vmin, vmax does on mobile.

7. Fonts blur.

E̶x̶i̶s̶t̶i̶n̶g̶ ̶l̶i̶b̶r̶a̶r̶y̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶s̶

If only I had a Pepsi

We can’t have nice things because nice things scale!

CSS Values and Units Module level 3 was of course built on the foundations of CSS level 1. That was 21+ years ago, when XGA was the standard.

At some point 4k will become the new XGA (we already have 4k smartphones), and companies will continue to push display pixel ratios despite 8k, 20k or 50k (These marketing geniuses don’t stop at 4). At some point we need to be honest and accept that static fonts only complicate web development in the long run and that we can do far more with less complications.

I don’t get it

(huff) If font-size can scale proportionately to the width of the viewport consistently across all modern browsers IE9+ without breaking zoom accessibility, design constraints will be significantly reduced.

But you still need media queries?

Yes but you’re not getting it, it’s more predictable this way. There’s far less overflows, collisions and static elements to worry about. Media query usage would be more about design preference and far less for fixing things.

Scalable designs

• Mobile (portrait)
• Large (landscape) -> Media Queries
• high-res tablets (iPad Pro etc)(portrait) -> Media Quereis (Minimal like root font size)

Generally with Responsive Design as we know it today

• Small (portrait)
• Medium (portrait) -> Media Queries
• Large (landscape) -> Media Queries
• Small (landscape) -> Media Queries
• Medium (landscape) -> Media Queries
• XL (landscape) -> Media Queries
• XXL (landscape) -> Media Queries

The reason you don’t need to tweak a large design for different resolutions when designing for scale is simply because…

A Scalable Design Has No Side-Effects

A girl has no Pepsi

What you see is what you get. Viewing the site at 900px wide vs viewing it at 2560px wide will not give you any hidden surprises. Growth should be linear and you should have the freedom to add media queries on top of such foundation.

Unapologetic plug…

MIMETIC — Scalable Fonts and Zoom Detection

I’ve been toying with this library I call MIMETIC, a JavaScript library for scalable web design and zoom detection.

Chech it out on github

Demo

The first thing I must point out about MIMETIC is that…

• Cross browser compatibility is No 1 priority.
• No browser sniffing or user agent detection.
• There is Zero lock-in. You do not need to scrap your CSS if removed. Because a fluid design can conform to a static design.

• You can also drop MIMETIC within an existing design that uses REM units and it will automatically scale.
• Test it out with Zurb Foundation templates, no tweaking required.
• It’s light weight. Less than 2.5kb gzipped, ES, CJS and UMD and only has the features it needs.

BTW, I have to give thanks to Browserstack for providing cross-browser support.

Now let me tell you what it does…

MIMETIC scales relative font units to the viewport, without breaking the browser’s zoom and it detects the zoom level for all browsers IE9+.

• Scales relative units
• Detects the browser’s zoom level (Apparently Not possible?)
• That’s it!

You can improve accessibility on zoom or even let the user know they are viewing the browser in zoom.

It’ supports:

• IE9+
• Safari 6.2+
• Every other modern browser, tablet, mobile etc.

When using MIMETIC the rules change. With Scalable Design there are no textual boundary collisions and all elements scale proportionately by default, thus working against the major caveats of the box model.

How?

There are a few things I discovered to make this library possible:

• Changing the root font-size only and only relying on relative units.
• Calculating and normalising the devicePixelRatio from the user’s client device widths even when the DPR it’s not available or not behaving as expected.
• Differentiating between the window resize and zoom by knowing if the devicePixelRatio changed last or not.
• Calculating the defautDevicePixelRatio.
• Fire on orientation change.
• IE logicalXDPI & deviceXDPI values.
• Keep it simple: Option to use viewport units for mobile (Doesn't break zoom on mobile)
• False hope

The scariest discovery is that there was nothing stopping a viable solution being made several years ago, all the way since IE6. Just a decade late.

Are you suggesting that every website should scale?

Not exactly, it’s not that black and white. I am aware that every website could be made/ designed to scale but it depends on the viability of a solution.

Open to suggestions

Tell me your POV on this topic, I made this article as an attempt to answer the “why” part of the discussion, as well as to show off a practical scalable font solution.

Thanks for the read. Here’s some Magritte…