Keep an eye on your inbox!
Hmm, that didn't work. Try again?

7 typography trends in web design

Typography (n): the style, arrangement, or appearance of printed letters on a page. And perhaps the design element of 2018.

Mariah Driver
May 14, 2018
Web design

The purpose of your site is to be read — and what you’re saying matters just as much as how you’re saying it. In 2018, text in web design continues to thrive under the helm of content-first design enthusiasts. We’ve rounded up the typography trends we’re seeing this year, many of which place text front and center — or, all over the page.

In 2006, Oliver Reichenstein published “Web Design is 95% Typography”, the second-most controversial artifact of that year — runner up to Borat. Reichenstein says, “Web design is not about picking great typefaces, it is how we use them.”

Let's take a look at how we are using them.

1. Behold the bold hero

Big, bold, condensed, and unmistakably dramatic text is perhaps the most obvious use of text as a primary web design element. This year, we’re seeing hero images replaced by bold headlines that anchor homepages with brand names or messages.

The effect? A site’s typography becomes the site’s design. CreativeDoc, for example, masterfully creates a loud design out of six bold, white letters on a strong black background.

‍Font used: Dharma Gothic Heavy

Souffl, a European design and innovation company, employs condensed, bold, white text on a black background, then adds character with pops of animated color.

‍Font used: Custom (Souffl Web)

2. Put your best foot forward

Serifs continue their footed rise to the top of the font kingdom since we first nodded to this trend earlier this year.

Elegant titles and sophisticated headlines outfitted in popular serif fonts like Calluna and Minion are warding off serif naysayers. So, what are designers doing with their newfound love for … feet?

The designers behind Cobble Hill and Gin Lane are using them to infuse otherwise minimalist sites with a serif-induced elegance:

‍Fonts used: Arno Pro and Proxima Nova
‍Font used: Miller Disp, Lt

3. Captivate with plain ole text  

The visual revolution that dominates journalism, among other industries, has yet to tarnish the importance and prominence of text in web design.

Justin Jackson’s site Words has been around for ages and it demonstrates how text alone can speak volumes on the web:

‍Font used: browser default

Now, in 2018, we’re seeing designers embrace words —what Jackson names the “most powerful tool on the web” — in their designs. It is no small feat to design a web page exclusively with text. But done well, we don’t even notice the lack of images.

B14, a Copenhagen-based design agency, fills the real estate of its homepage with — gasp — words to show who they are and what they do:

‍Font used: Maison Neue

Images may speak louder than words, but they don’t offer nearly as much control over what we hear.

Joe Coleman, a freelance copywriter, hops on board the text-only train with a twist. The design features an interactive element that tells a story, and more importantly, captivates an audience in a way that visuals alone cannot:

‍Fonts used: Work Sans

Max Kaplun’s portfolio confirms that not all heroes wear capes … some wear words. While text is the anchor of Max’s homepage, he supplements his words with symbols, variations in text size and weight, and a colorful cursor. Oh, and of course, a hover-activated headshot.

‍Fonts used: Custom

4. Make room for monospace

Monospaced typefaces have emerged not only in text-intensive settings with small point sizes, but as larger elements of a site’s design. The increased popularity of monospaced fonts has dovetailed the brutalist trend in web design as demonstrated in the examples below.

Laurent Desserrey designs a captivating portfolio that creates a memorable brutalist effect at the intersection of glitchy background images and monospaced type:

‍Font used: Space Mono

Run Your Mouth, a series of monthly talks in London, creates a similarly captivating brutalist effect with the use of monospace:

‍Fonts used: Titling GothicSpace Mono

For more monospaced inspiration, check out the Top 10 Most Popular Monospaced Fonts by Typewolf.

5. Attention seek with highlighted text

Not every website comes with SparkNotes. Enter typography, whose function is to communicate and establish a hierarchy of content. This helps readers who skim and scan (i.e., most of us)stillget the gist.

Designers take a page right out of your elementary teacher’s book by adding colorful and well-designed highlights behind the most important messages on the page. But enough nightmares-of-your-middle-school-past — let’s see how designers use highlights to create a content hierarchy and add a pop of color:

Godfrey Dadich, a design agency in San Francisco, creates a TL;DR aesthetic on their homepage with primary offerings highlighted in neon green:

‍Fonts used: Noe and Atlas

Cornell University also hops on the highlighter trend with Engaged Cornell. The neon-yellow highlights imply the presence of a reader engaging with the core text.

‍Fonts used: Freight Display + Theinhardt

6. Turn heads with horizontal and vertical text

This typographic trend turns heads — literally. A mix of horizontal and vertical texts have emerged as a stylistic approach to breaking up blocks of text. The trend creates white space and elicits a wow effect by abandoning the age-old horizontal alignment.  

For example, the site for a film by Matt Porterfield, Take What You Can Carry, disrupts an otherwise horizontal text alignment with a single word:

‍Fonts used: DIN + Courier

Other designers and agencies, such as Elegant Seagulls, experiment even further with vertical text alignment to create a sustained scrolling effect. Of course, important navigational elements remain horizontal for functionality:

‍Fonts used: Azo Sans + Capitolium 2

On the homepage for creative agency Magic People Voodoo People, the combination of vertical and horizontal text acts as a frame for the illustrative element at the center:  

‍The company name, Magic People Voodoo People frames the hero image with alternating horizontal and vertical orientation.

7. Scatter text — thoughtfully

Last, but certainly not least, we’re seeing a trend that may best be described as “my brain before coffee” — or, scattered text. If not deployed carefully, this trend borders on dysfunctional as it runs the risk of sacrificing both readability and accessibility.

The Impossible Is Inevitable, an exhibition at Moscow’s Jewish Museum and Tolerance Center, presents its name in floating, strung-together letters on the homepage.

The exhibit’s title is by no means spelled out for visitors, but its intentional, scattered orientation of letters contributes to a larger meaning. Tiny threads weave the visually disparate letters together, mimicking the exhibit’s exploration of the unknown and our fragmented, fragile kinship with it.

‍ICYMI: “The Impossible Is Inevitable”

 

Octoplus Group, a communications agency, scatters letters to tell stories. The minimalist site is outfitted with small, bold letters that act as navigational elements. This is most fitting for a design agency dedicated to communicating brand messages and stories.

‍Octoplus’ seemingly scattered letters tell stories of their own — click and hold to read ‘em.

The evolution of typography is far from over as screen, font, and design technologies continue to advance. Like many nuanced trends in design, typography trends must maintain a high regard for accessibility, readability, and functionality.

What types of trends are you seeing?

Are there typography trends you’re loving, hating, or curating? Let us know in the comments below.

Mariah Driver

Fancy meeting you here! I’m a Content Producer at Webflow and a dog enthusiast. The bigger the dog, the better. Check out the small, square version of my life on Instagram.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.