COMPANY
COMMUNITY
BLOG
HELP
MY ACCOUNT
EN PT ES

Imagen6519E

Typography

Rules applicable to texts for the Web differ from standards used for printed documents. The main difference is the limitation of screen resolution and space. By María José Serres, member of the ARTech marketing team.

Screen resolution is much lower than the resolution found in books, magazines, etc., even in low quality documents printed with ordinary printers. While most printed texts have a 1,200-dpi (dots or pixels per inch) definition, monitor definition is no higher than 85 dpi. On the screen, the space used for text is less (for most users) than in most books and magazines. This limits the amount of text that can be displayed without having to scroll vertically.

Legibility
Good-quality typography depends -among many other factors- on the visual contrast between fonts, text blocks, titles and background empty space. Strong contrast with distinctive patterns is what most catches the eye. When a page is filled with dense text, it becomes a gray block that is neither attractive nor comfortable to read due to lack of visual contrast.

The first thing one sees in a page, even before reading the title or seeing the images, is the whole pattern and the contrast on the page. Following patterns that stick to one way of organizing the text and images on the different pages of a site or application enables users to understand how the information is organized and to intuitively find more information. This is how page legibility increases.

Margins
Margins define the reading area of a page by separating the main text from its background. Margins and empty spaces are used for delineating the main text from other elements in a page. When used in the same way in all the pages, they provide unity to the site by creating a consistent structure and a specific visual identity. We recommend that main texts have 5-to-10-pixel margins. In GeneXus, this is possible by placing the text inside a table with the following measurements: border width =0 and cell padding=10.

Cellpadding: specifies the distance in pixels between a cell's content and its borders.

Cellspacing: specifies the width in pixels of a cell's borders.

In our next issue we will continue discussing typography.

Related
Usability Tips: Browsing Consistency
Browsing: Visibility and Proportions
Contents of the Menu Options
Text Alignment
Fonts
Usability: Colors, Contrast and Underlining