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 →

Changing the site design: quick restart of your project
From the author: Hello everyone! Today we will talk about a very relevant topic - changing the design of the site. Do not understand why this is necessary? Then answer…

Continue reading →

Where does website design development begin?
From the author: Good day, dear readers of the blog. In this article I will share with you the basics of preparing for the development of website design. After spending…

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.

Photoshop for Web Designer: Free Tools
From the author: Photoshop is still the favorite tool among web designers, and the right add-ons will make it even more powerful. To increase your productivity, save you time and…


Creating a website design in Photoshope: getting to know the editor and its features
From the author: good afternoon, friends! Today we have a difficult and very voluminous topic in turn - creating a website design in Photoshope. In general, all that concerns the…


Popular web design styles
From the author: hello friends! How often do you have to visit sites that are scared to order products because their design leaves much to be desired? Imagine the situation:…


Landing design: how to make a capture page
What is a landing page? The concept of landing page, as, in principle, the design of the landing, came to us relatively recently, according to the official version from the…