The difference between UI and UX
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…

Continue reading →

Fighters of the invisible front
If you haven’t guessed yet, then I mean META tags. Their role is not noticeable when displaying the page. These are just commands for a web server or browser, but…

Continue reading →

Site Conversion: Popular Ways to Increase
No matter how modern or pleasant the site may be, if it does not bring the company the expected benefits, it is a “dead weight”. Usually, the degree of usefulness…

Continue reading →

7 2018 web design typography trends

Typography is the style, layout, and appearance of block letters / texts on a page. Currently, it has already become an integral element of web design. You will find many interesting articles on the topic in the corresponding section of our blog, which has replenished today with another publication. Consider the design trends that are relevant for this direction that appeared and consolidated in 2018. The material will be a great addition to the web typography record. The post is a translation of this note.

typography trends
The purpose of any site is to attract the attention of visitors. At the same time, 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). In 2018, content continues to thrive, thanks to enthusiasts of the Content First concept, which implies its primary importance in the design of web projects. Below are the typography trends of 2018, many of which involve placing text in front, in the center, and even across the entire screen.

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

1. Catchy, big headlines
A catchy headline in large bold or bold is perhaps the most effective use of text as a meaningful element in web pages. Now there is a tendency to replace the main “Hero-images” with large headings, which connect the main with the brand name or important information.

Currently, the beautiful typography of the site is gradually turning into its design. CreativeDoc, for example, expertly uses a catchy six-letter heading in bold white on a solid black background.

Big headlines
Font: Dharma Gothic Heavy

European innovation company Souffl chose a white bold lettering, vertically elongated, against a dark background with the addition of interspersed color animation.

Original elongated font
Alternatively, see a selection of the top 10 google font fonts for headings.

2. And again serifs
Serifs continue their climb to the heights of popular trends. Sophisticated titles and intricate headlines in popular serif fonts like Calluna and Minion change the minds of even the most inveterate skeptics.

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

Serif fonts
Fonts: Arno Pro and Proxima Nova

Typography serifs
Selected Font: Miller Disp, Lt

3. Skillful use of plain text
The visual revolution, which among other areas is particularly pronounced in journalism, does not reject the importance of text in web design.

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

Standard browser font
Some professional designers to this day use only words in their web resources that Jackson calls “the most powerful tool for communication on the network.” In fact, it’s not easy to create a page that consists solely of text content – but if it is well done, we won’t even notice the absence of images.

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

Web page design made of words.
Font: Maison Neue

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

Freelance copywriter Joe Coleman adds a small detail to a page with just one text – an unusual interactive scroll button. This element not only helps to tell the desired story, but (more importantly) captivates the audience in a way inaccessible to many independent visual effects:

Scroll text
Work sans font

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

Original typography
4. Monospace font
In 2018, these fonts appear not only in text with small sizes of printed characters, but also as large objects in the design of online projects. Their growing popularity coincided with the emergence of a trend of brutal style.

10 key trends in logo design 2018
Last year's post on logo logo trends 2017 was well received by readers, so we decided to continue this “tradition” and consider the main trends in logo design 2018. Despite…

...

The main types of user interface buttons
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

...

Computer hardware configuration
What is described below suggests that you want to make a beautiful and stylish website completely do-it-yourself, i.e. you draw all the graphic elements yourself, write the pages yourself, scan…

...

Why do we need SSI?
A! So you don’t even know what it is? And, moreover, do not understand why you need it? Well, then you have come where you need to. Today they explain…

...