CV Hire me

The Hypertypography Manifesto

Hypertypography makes responsive design simpler by a factor of thousands, possibly even millions.

Web design is a lot more complex than it looks. Anyone can learn the basics of HTML and CSS and start making their own website in a matter of hours.

It's easy to get into, and that makes it seem like it might be easy to do.

But the problem space–the set of all possible outcomes–of graphic design is huge. Imagine a library containing every single design that could possibly be generated. It would be a very big library.

Before we even consider complex variables like usability or aesthetic, the sheer numbers involved are stupendous. A modest 1024px square image contains over a million pixels.

When you're designing something and deciding where to put it, a million is a lot of options, too many to meaningfully select from. And there are just as many options again when it comes to typeface, font size, colour, imagery, and other graphic elements.

Multiply this by all the possible variations in viewport, content and front-end implementation, and we're at Quantum Physics levels of complexity.

Managing complexity
Design systems usefully limit this problem space, drastically reducing the number of possible outcomes while encouraging those outcomes to be of a higher value than they might be otherwise.

For example, when you use a grid to help guide your layout decisions, the number of possible locations to choose from is reduced from millions to hundreds. That's a 10,000x reduction in the complexity of the system already.

This reduced complexity helps the designer do their work, and it also helps everyone else on the team.

Good design should foster understanding, making it easier to describe, document, develop, test and iterate on the work.

Complexity is expensive

The problem with most of the design systems on the market today is that they are overly complex. Complexity costs money.

There are many types of cost to consider when looking at the overall cost of a system:

  • Cost of Design
  • Cost of Development
  • Cost of Maintenance
  • Cost of Training
  • Cost of Operation
  • Cost of Change

Each of these costs is impacted by the complexity of the system. The more complex your system is, the more it will cost you overall.

Any work you do to reduce complexity during the design and planning of the system will save work later, when change is more difficult and expensive.

A poor design system will add complexity to your work instead of reducing it

Design systems can help manage complexity, but they themselves introduce another kind of complexity. It's important not to rush into a design system without considering the overall costs.

A design system is not a single tool. It is more like an entire library of tools. Depending on the nature of your project introducing an entire library of symbols to your team at once might be overwhelming.

Your newly acquired design system might not improve efficiency right away. You might find yourself suffering under the new requirement of having to both design the thing and obey a new set of rules.

Typography simplifies and systemizes graphic design

Typography is the primoridal graphic design system – the domain where text meets type, grid meets layout, photograph meets figure. Far from being old fashioned or out of date, typography is the underlying technology that enables all UI design.

Compared to many popular design systems, the rules of typography are relatively simple. There are three basic principles; Legibility, Readability, and Aesthetic. These principles can be applied to help improve design understanding and design outcomes across teams.

Hypertypography adapts and extends the concepts of typography to fit the current media environment. Hypertypography is both a design manifesto and a design system based on the best practices in the discipline.

The hypertypographic system in use.

The hypertypographic layout system is based on just two variables, one for vertical units and one for horizontal units. These two units are themselves responsive, and each responds to the viewport in different ways.

Horizontal / Columns (vw)
The horizontal dimension of the grid extends across the entire viewport at any size, without limitation. This horizon line is aportioned into a number of equal width columns that are used as a guide for layout. Divide the total width of the viewport (100vw) by the number of columns in our layout system (20) to get the column width (5vw). Note: I've been getting a lot of mileage out of 20 column grids, but this number is variable.

Vertical / Baseline (rem)
The vertical units of the grid align with the baseline used in the typographic system, defined in rem units. The baseline grid is optimized for the base font size, which in turn is responsive to the size of the viewport. Small viewports like phones are held close to the eyes. Their small size means we need to use smaller fonts to fit on screen, and because they're closer, smaller fonts are still legible. Larger devices are typically further from the eye and require a larger base font size.

This site is a work in progress. I'm working on some articles on the main principles and techniques.

Meanwhile, I've written more on hypertypography here, and some of these case studies touch on related material.

If you're interested in hiring me, check out my cv .