Web design trends: the main directions of 2016
From the author: Hello everyone! Today we will take a break from complex technical topics and do a short review of current year trends. In this article, I collected the…

Continue reading →

Web Layout 101: How to Get the Most Out of the Top Right
Most people browse the site using the so-called “F” template. First, we look at the top of the letter F, then go down and look horizontally in the second part,…

Continue reading →

6 signs of failed logos
Any organization, large or small, needs a logo to distinguish and set unique attributes. However, not every business makes a normal logo. There are a number of common mistakes when…

Continue reading →

Typography in web design: basics and rules of use

From the author: I welcome you, friends! We continue to analyze the intricacies of professional web design, and today a very relevant topic is web typography. Unfortunately, many developers do not even know the very basics and rules of this area. Maybe they just don’t bother and don’t want to waste time on it, or maybe they don’t fully understand its meaning. In general, my goal is to convey to you that typography in web design is the foundation of the basics, and without it it will be very difficult to move on.

Typography and Newsletter
The purpose of any Internet resource is an information message to the target audience. What will visitors of your site pay attention to first of all? Of course, to the text! (Naturally, if he does not get messy advertising and a lot of stupid banners). The success of your project will ultimately depend on the text, and only on the text.

Let’s understand what typography in web design really affects.

Firstly, the image of a web resource. High-quality development is visible with the naked eye, and you do not need to be a mega-specialist to assess how much time you want to stay on the site. Curved unreadable text is the first reason that a visitor will leave your link 10-15 seconds after entering.

Secondly, the uniqueness of the web resource. Given that at the current pace of the progressive development of the Internet space, finding absolutely unique content is simply unrealistic, your task is to uniquely serve this content. In the battle of competing sites, the one who does not neglect the simple rules of development always wins, but rather uses them effectively and gets the maximum benefit.

Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
The basics of typography in web design
Fonts in web design
Typography in web design has quite natural laws and rules. Let’s start with the fonts. The right choice of fonts will largely determine the concept of your development and affect the overall perception of the resource.

Still in the recent past, although little is known about those times, designers could use only those fonts that accompanied the operating system. All the great versions were nothing more than an image or flash. There were workarounds, but they brought a lot of troubles.

Implementing the @ font-face CSS property simply freed designers’ hands. I registered a link to any font file, and now it is already used on the pages of the site. There are some complaints from the developers on this topic, but this turned out to be a completely solvable problem.

I note that not all fonts are suitable for competent web-design. Mainly due to their unreadability and difficult perception from the screen. Some fonts are too heavy and slow down the resources – be sure to pay attention to this. I’ll also add a technical feature when working with fonts: displaying them in different browsers – there is such a problem processing a file or even a whole family.

Macro and microtypography
As you probably already understood from the name of these terms:

macrolevel – builds the general structure of the text, determines the placement of content relative to the design;

micro level – pays attention to the smallest details, spaces, intervals, indents, etc.

The task of macro-typography is global – to make text blocks live, active, but at the same time harmonious and integral. For microtypography, the task is simpler, but no less important, to ensure readability. On the Internet there are many examples of successful and failed solutions to these problems.
Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
The construction of a holistic composition, first of all, lies in the understanding of space. The web designer must see the whole picture, but at the same time correctly lay it out on the details. There are no insignificant elements here: heading, paragraph, vertical distances between elements, registers, thickness …

Fonts for web design are desirable to indicate in relative units (% or “em”), this contributes to the adaptability and flexibility of the content. It makes sense to use the more familiar “px” pixels for non-adaptive containers, when blocks move when the screen is resized and the font remains stable.

Text design
An important section of typography is a character typing set. These include: punctuation, the use of brackets, hyphens and dashes, periods, spaces, etc.

Such errors, at first glance, do not pose a particular threat to the content or the uniqueness of the content, however, remember: no resource that respects itself will make primitive errors in the texts. Remember the image, there are no trifles in it!

Now about layout. There are rules here:

A block with text should be limited to 40-50% of the page width.

There should be a 1.5 spacing between paragraphs.

The contrast of the background and the text should fit in 75–90%.

A comfortable font for the eyes is 12–16 px, but even the smallest block should not be less than 10 px.

The combination of colors in web design as an effective marketing tool
From the author: the web designer has in his arsenal many tools for interacting with users using color. The combination of colors in web design is an effective marketing tool,…

...

The best new templates for Photoshop in 2016
From the author: time flies quickly, and here we are in 2016. The day has come when you need to change everything! Ready to create your own online business? Want…

...

Best Photoshop Plugins for Web Design
From the author: welcome to our blog, dear reader! Today we’ll talk about where to use Photoshop plug-ins for web design, and also find out which plug-ins are best for…

...

6 signs of failed logos
Any organization, large or small, needs a logo to distinguish and set unique attributes. However, not every business makes a normal logo. There are a number of common mistakes when…

...