Tips for web-typography

Will help to understand how it works. Typification, color, grid.


Building logic

Depending on the content, you must select the appropriate way to build text blocks on the page.

The screen text has a large number of differences from the printed text.
So we can notice that if the text block is too wide then it ceases to be read.

But, as in any rule there are exceptions. In our case, they depend on the size of the peg, font, background and content.

For example, when you are making text on a gray background in full width, you should use the size and the line spacing by several points more.

Composition and repetitions

Do not forget about media materials when creating text pages (photo/video or other content).

For example: a text in full width of the screen is better to use horizontal photos as add-ons.


Form syntax

Typing interface, how can we structure information?
Each element of the user interface depends on many factors.
Today I want to discuss the text and the forms.

When changing the structure of information, it is necessary to take into account the scenario factor.

You can split the structure of the interface into 2 levels. Read more about typo level.


First tip

Define the background color and the script for reading the text.

So for example, if the background color is white and the script is a metro, it’s best to make a black background and white text (given the fact that the subway is quite dark).

Another example is if the background color eg green is worth making the text size in relation to the screen size = 25 p. 
But do not make the background green.


Second tip

Focus on the content, so for example if you have horizontal blocks dominate better use a typical layout by breaking the block to a maximum of 2 columns.

The color of photos and background can also be reduced to one denominator, for example, by saturation. Then the text color should be contrast.


Third Tip

Levels of typography and orientation on them

Level 1

In this category, I would define all the interface elements that create content-oriented usage scenarios.

A feature of this category is the dependence of the form of information on the input data of the user / tasks.

Level 2

This category consists of system elements.
The main feature is indirect influence on the user and dependence only on the task.

For example: the task of making the text convenient for reading, it is necessary to give the user an understandable way to solve his task.

Interface architecture.

The logic of building text blocks depends on:
font
color
content
grid

When designing text pages, a good idea is to look at read user scenario and the user device.
It is very easy to have mistake by using an inappropriate grid and not correctly understanding the content.



More my stuff
Twitter Behance Dribbble
Email: tsankoivan11@gmail.com