7 popular typography trends in web site design

Typography is the style, arrangement and appearance of the printed letters / text on a page. Nowadays, it has already become an integral part of web design. You will find a lot of interesting articles on the topic in the corresponding section of our blog, which has been replenished with another publication today. Consider the design trends that are relevant for this direction, which appeared and took hold in 2018. This material will be a great addition to your web typography record. The post is a translation of this note.

The purpose of any site is to attract the attention of visitors. In this case, it is important not only what you are going to convey to the audience (content), but also how you are going to do it (design). Content continues to thrive in 2018, driven by Content First enthusiasts to prioritize content in web design. Below are typography trends of 2018, many of which involve placing text in the front, center, and even across the screen.

In 2006, Oliver Reichenstein s article “Web design is 95% typography” was published – the second most sensational phenomenon of that period after the comedy “Borat”. According to Reichenstein: “Web design is not just a selection of original fonts, but techniques for their skillful use“.

1. Catchy, big headlines

A catchy headline in large bold or bold type is perhaps the most effective use of text as a meaningful element on web pages. The trend is now to replace the main “Hero images” with large headlines, which associate the main one with a brand name or important information.

Nowadays, beautiful typography of a website is gradually being transformed into its design. CreativeDoc, for example, is adept at using a catchy six-letter headline in bold white on a strong black background.

Font: Dharma Gothic Heavy

The European innovation company Souffl chose a vertical bold white lettering on a dark background with splashes of color animation.

Alternatively, check out our selection of the 10 Best Google Fonts for Headings.

2. Again serifs

Serifs continue to climb to the top of popular trends. The sleek titles and intricate headings of popular serif fonts like Calluna and Minion are changing the minds of even the most die-hard skeptics.

Many web designers are actively using this newfound fondness for serifs – for example, at Cobble Hill and Gin Lane, they help bring an element of sophistication to minimalist sites:

Fonts: Arno Pro and Proxima Nova

Selected Font: Miller Disp, Lt

3. Skillful use of plain text

The visual revolution, which among other areas is particularly evident in journalism, does not negate the importance of text in web design.

The Words project by Justin Jackson has been around for many years as a confirmation of the fact that with the help of ordinary phrases, sentences and words on the web, a lot can be said. There are no fonts here, just a browser font with standard font design methods:

Some professional designers to this day use only words in their web resources, which Jackson calls “the most powerful tool for online communication“. It s actually not easy at all to create a page that is all about textual content – but if it s done well, we won t even notice the lack of images.

As an example, the website of the agency B14 from Copenhagen is suitable, where the entire space of the main page is filled with content telling about the company s activities:

Font: Maison Neue

Images can sometimes speak louder than written letters, but they do not have the same great control over what we perceive. aurally – that is, in words.

Freelance copywriter Joe Coleman adds a small detail to a page with only text – an unusual interactive scroll button. This element not only helps tell the right story, but (more importantly) engages the audience in a way that many standalone visuals cannot:

Work sans font

The portfolio of designer Max Kaplun confirms that you can attract the attention of the audience not only with massive bright hero pictures, but also with ordinary text content. The main content of the main web page is a few sentences about the author and his professional skills, to which the talented specialist adds different characters; variations of fonts, sizes and thickness of letters; as well as a color cursor with specific hover effects / actions.

4. Monospace font

In 2018, these fonts appear not only in text with small printed characters, but also as large objects in the design of online projects. Their growing popularity has coincided with the emergence of the trend of brutal style in web design (see screenshots below).

Laurent Disseri has developed an interesting portfolio option with a memorable visual brutal effect – achieved through a combination of “glitchy” background images and a monospaced font:

Space mono font

Run Your Mouth, which hosts monthly discussions with famous artists in London, uses the same ingenious combination with a brutal effect:

Fonts: Titling Gothic, Space Mono

5. Accents in the form of selected text

We have already written about the background underline for highlighting text, this trend in typography helps to present important information and organize content on your web resource. This will make the task much easier for those readers who are used to skimming through articles / publications to find the point (i.e. most of us).

When implementing the approach and identifying the most important points, designers add colorful and skillfully designed accents on the page (underlining, color, etc.). Many of us probably remember a similar principle of highlighting texts in textbooks at school. Typically, translucent bright colors are used here.

San Francisco-based agency Godfrey Dadich creates its Homepage based on TL; DR (“too long, unreadable”), And uses neon green to emphasize the main points:

Used By: Noe and Atlas

Cornell University Engaged Cornell also tends to highlight specific pieces of content. The neon yellow backlight makes the reader pay attention to the keywords on the screen.

Freight Display + Theinhardt

6. Horizontal and vertical arrangement of text

This typography trend has literally turned the heads of designers. The combination of horizontal and vertical arrangement of words / texts began to appear as a stylistic approach to dividing content into blocks. Moving away from traditional horizontal alignment allows you to create “white spaces” (gaps) that add a striking visual impact.

For example, on the website dedicated to the film “Take What You Can Carry” by director Matthew Portfield, the horizontal alignment of the phrase is broken by just one word:

Fonts in the picture: ‍DIN + Courier

Other artists and design agencies, such as Elegant Seagulls, take their experiments a step further and use vertical text to create a scrolling effect. At the same time, to maintain functionality, the most important navigation elements remain horizontal:

Azo Sans + Capitolium 2

On the home page of the creative company Magic People Voodoo People, a combination of vertical and horizontal inscriptions serves as a kind of frame for the illustration in the center:

7. Reasonable use of scattered text

And finally, another equally significant typography trend in 2018 is scattered text. The effect it produces can be described as “an absent-minded state of the brain to a cup of strong coffee“. If implemented incorrectly, there is a risk that this technique will negatively affect the readability of the content and the perception of information.

The web project dedicated to the exhibition The Impossible Is Inevitable, organized by the Jewish Museum and Tolerance Center in Moscow, presents its name on the main one in floating letters connected to each other.

In the screenshot below, the developers did not at all strive for absolute clarity of the name of the exhibition – the deliberately scattered letters carry a deeper meaning. Thin threads connect visually disparate objects, imitating the study of unknown facts using the exhibits.

Communication agency Octoplus Group uses scattered text to convey the right information to its readers. The minimalistic site is complemented by small letters typed in Bold font that serve as a navigation function. This is all well suited for a design agency specializing in brand development and communication.

Symbols scattered across the page load the necessary information when clicked

Perhaps typography is not developing as fast as design technologies, fonts, etc., but still the evolution in this area continues. Like many visual styles, typography trends in 2018 should deliver high levels of readability, functionality, and accessibility.