Arrangement of texts on a web page

To end the issue of fonts, we deal with the correct arrangement of texts on web pages.

When managing texts on web pages, all the conditions seen for general graphic design are valid, but adapted to a medium that imposes strong limitations.

First, reading from a computer screen is tiring on the eyes and 25% slower than reading on paper. As a consequence, users tend to minimize the number of words they read, so comprehension and retention are reduced to approximately 50%.

In addition, the web is an interactive medium, and users tend to browse more than read, so special care must be taken to offer them quality, perfectly structured and interesting content that manages to attract their attention and keep it while reading.

A good arrangement of texts on a web page is as follows:

• A headline that clearly describes the subject matter.
• A small summary of the information offered.
• A series of prominent keywords (in the form of links, using typographic variables or color changes).
• Segmentation of content into smaller units, reinforced with indexes and lists with items.
• Meaningful, useful subheadings.
• One idea per paragraph.
• Half or fewer words than those normally used in printed texts.

The inclusion of quality graphics, a good level of writing and links to other pages or websites that give an idea of ​​where the sources come from or what the relationships with other media are, are elements that add credibility to the content, which will make visitors are more willing to read the texts on the page.

As for the medium itself, there are notable differences between a web page and any other presentation format. Horizontal page orientation, you generally don’t see all of the material at the same time, you have much less control over typography than in printed material, and the resolution is lower, so fine details are not well defined.

As far as typography is concerned, each operating system has a basic set of fonts to present the textual content on the screen, the group of fonts that Windows installs by default being different from the one that installs Mac OS or Linux.

Furthermore, the fonts available to build web pages are only a small subset of the fonts that each operating system has.

How much text can there be on one page?

The amount of suitable text on a web page depends above all on what type of page it is, since a website dedicated to electronic commerce is not the same, neither in conception nor in development, than one dedicated to scientific dissemination, nor is this than one dedicated to the presentation of pictorial works.

What there is is a series of general rules that can broadly define the behavior of the text on any web page.

Thus, for example, if our page contains a lot of text, it is convenient to group it into columns, since it has been proven that a large amount of text followed in wide line format makes the user’s eyes very tired and prompts him to leave the document soon. As a general rule, we can establish as the correct length of the lines of a page the one that comprises 12-15 words.

If we are on the home page of a site, which is the one that in a way welcomes a visitor and informs them in broad strokes of what the website they are on is, the text should be little and very explicit, so you can quickly get a clear idea of ​​where you are and what you can find on the site.

If our page intends to communicate to the visitor a series of knowledge, such as this page that you are reading now, the text is then the fundamental element of it, and you will see the need to create pages with a large amount of it. Try then not to make pages that occupy more than one and a half pages in height (two at most), so as not to force the user to continuously use the side scroll bar, which is very tiring and causes them to lose interest in the content.

If the theme of your page is mainly graphic, as can be the case of a site dedicated to art or photography, the text should be little, only what is necessary to express a series of clear and concise ideas, since the true protagonist of Your page should be the photographs and graphic elements.

As you can see, there are as many rules as there are sites that can be made, being the experience and the test-correction method the true master techniques to achieve a series of attractive and functional pages.

Text layout. Header levels

As we have said before, and as occurs in other informative media, the layout and typographic design is applicable at almost all levels to the design of a web page, so it is necessary that in order to establish a clear and attractive document we divide the text of our pages in a series of sections, which will begin with a header that defines the content of each block, especially if the content of our pages is eminently textual.

As we can have many sections and headings, it is necessary to highlight the relative importance of each of them in the document as a whole, which we can achieve through its size and weight, as well as the color of its text. As a general rule, the headers that define complete themes should be the largest and most weighty, the main sections of the theme should follow in importance, and thus we must gradually reduce the size and weight of the headers as we go down the hierarchical tree of themes. of the document.

Within each block, and once the headers have been defined, we must place text blocks that develop the general idea introduced by the header. The indentation of this text may be different depending on the amount of text in the paragraph. Thus, if we have little text, we can distribute it as if it were a small book or pamphlet, indenting each paragraph and justifying its text.

But if the section contains a lot of text, although we can continue indenting the beginning of the paragraph, in this case it is not convenient to justify the text, since this type of alignment tires the eyes due to its monotony, so it is preferable to leave an alignment to the left, in which the effect achieved by ending each line at a different point achieves a visually relaxing result and makes the content more readable.

With a bit of general reading and contemplation of Internet pages we can gradually learn what is the best way to place our texts in each case. I highly recommend studying good manuals on layout, graphic design, and typography.

Text Colors

Another issue of vital importance is the color that we are going to give to our texts. The psychological effect of colors and how they affect and transmit one or another feeling is well known, in addition to creating the disposition-color set a receptive state in the user that can encourage them to continue browsing our page or, on the contrary, leave it quickly.

As a general rule, we must ensure that the color of our texts is such that it stands out clearly from the background of the page, especially in the case in which we use a background image, since the text is the main way of transmitting ideas, and therefore Therefore, it must be the part of our page that is clearest to the visitor. Either we do not place a background image or we do it in such a way that the text, due to its layout and color, stands out clearly from the background.

A single text color for the whole page can be monotonous, especially if the main theme of the page is artistic or colourful, so sometimes it is convenient to use different colors for different parts of the text. In these cases we must use a range of compatible colors, which can stop by the use of analogous colors (of the same range or family) or by the use of complementary colors, which achieve a balanced visual effect, reinforcing each other, and especially indicated when we want to highlight a text on a colored background. It is convenient for this to study any one of the color range charts that we can find in any work dedicated to painting. In the image on the left you have the color wheel; the complementary ones are opposite on the wheel, while the analogous to a color are around it.

If our page is aimed at a young audience, such as a page about the world of video games, the text can be defined by a range of aggressive colors, such as red with yellow, or with a range of colors that suggestive in appearance, such as white, red, or gold lettering on a black background. But if our page is designed for a serious and/or general public, such as a page about economics or politics, we must use a range of neutral colors, such as grey, blue-grey or pastel tones, suitable for all types of audiences.

Finally, if our page is corporate, as can be the case of a company page or a bank, the colors must be those marked by the company itself, since each company has one or more logos and a set of corporate colors. own, which are the ones that give that company its own identity among all the others, being essential to transmit on the page that individuality that is its own.

We will study the world of colors better in the chapter on images.

Font families in texts

Another issue to take into account when designing our texts is what type of fonts we are going to use on our page.

As in the case of colors, it is possible and almost convenient to mix various types of fonts, seeking above all to break the monotony that a single font creates.

If we want to mix fonts we should, as a general rule, not use more than two or three different types. For example, we can use two fonts that are similar, one of them Sans Serif for the headers, and another Serif for the text blocks. Let’s remember that Serif fonts paint a kind of ornamental endings on the ends of the letters, while Sans Serifs do not, painting all the letters flat. Serif fonts are for example Times New Roman and Georgia, and Sans Serif fonts are Verdana and Arial.

If the page is dedicated to a corporate or adult audience, we can use serious or classic fonts, such as Times New Roman or Arial. If it is aimed at the general public, we can use Verdana, Helvetica or Tahoma. And if our audience is going to be young, we can use more dynamic fonts, such as Comic Sans MS, Impact or Lucida Console.

Examples:

Font Times New Roman (Serif)

Tahoma Font (Sans Serif)

Impact Font (Sans Serif)

As in everything, the best way is to experiment and experiment, until we find that combination that expresses what…