Bauhaus to emoji: A call for a new typography
Tags: typography, webdesign, webdev
Published: 2018-12-21 07:29:10

---
title: Bauhaus to emoji: A call for a new typography
published: true
tags: typography, web design, webdev
canonical_url: http://metamn.io/react/bauhaus-to-emoji-a-call-for-a-new-typography/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nnw53j60v3r7zsyq11d2.png
---

Typography has to be completely rethinked.

The old, standard way — Bauhaus, Swiss, minimal — was perfect in a static environment like print. Now we have animated type, dynamic CSS units, variable fonts and viewports, spatial AR / VR typography.

And less attention.

## Classic and Experimental

We need both a classic and an experimental typographic system.

Classic used to style old-form content like long text — we can’t avoid this type of content. It will be always present.

Experimental used to style presentational content like landing pages, storytelling, and whatever needs a short span of attention.

## Classic typography

Invented by Bauhaus a century ago classic typography is still relevant today. Everything static on print — books, magazines, newspapers, posters — and everything static on screen — graphic design, blogs, marketing websites, social networks — are using its principles.

Minimal typography is built on a basic assumption: there is always a body text in a content; there is always something to read. A long form text like an article, a book chapter, a description — or a short form text like an event invitation with details.

The main goal of this kind of typography is to make the reader read the text, and, to offer help when the text is too long or diverse. It wraps into chapters, sections and subsections with title; it decorates with quotes, asides, tables, first letter initials, spacers — and so on.

Minimal typography’s basic rule is to set the body text first:

1. Let it have the smallest font size possible which is still perfectly readable.
2. Use a typeface meant for reading.
3. Set the text width to 60-80 characters which makes reading easy.

These three are defining the typographic grid where everything else — headings, quotes, figures, figure captions — are aligned.

Every new element on the grid has to differ in a minimum amount of properties from the body text. You don’t let your fantasies go wild here. Just compose up with care.

For example if your text has just one heading you don’t increase it’s size. You make it bold and space generously from previous and next elements. This way it won’t be confused with bold text inside the body text, and, will differ in a minimal way from the body text itself.

This approach of constructing typography for print, for user interfaces is highly effective and still brings in endless creativity offered by the unlimited typefaces, colors, images and other decorators available.

## Experimental typography

The problem with classic typography in today’s context lies in it’s foundation, basic assumptions:

1. There isn’t always something to read.
2. Even if it is, the reader has not enough time, or doesn’t want to read it through.
3. The ‘smallest font size which is still enjoyable’ cannot be easily set on a variable medium.

Today with smartwatches, smartphones, tablets, emojis, interactive installations, moving images and text, variable fonts, skim reading, likes and shares, immersive computing — we need other assumptions.

1. Content is interactive.
2. People want tangible, immersive, immediate consumable experiences.
3. The medium is infinitely variable.

To set up the rules of this new experimental typography is an ongoing process. Hopefully someday we can come up with a system.

Until then, [ideas.](http://metamn.io/mr-ui/?selectedKind=Basics%2FTypography%20%E2%9C%97&selectedStory=Overview&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook-addon-background%2Fbackground-panel&background=beige)