Typography in Web Design. Highlighting main notions

Imagine that searching for the information you need you visit a web-site by web-site. You’ve finally come across the particular one. At the first glance you are attracted by an appealing color scheme; interesting author’s illustrations help you to focus on the important tips and user-friendly menu interface makes your interaction with a site more pleasant. But at the same time you see fonts with quite strange proportions, margins and outlines. It seems to be a small thing but further this small thing can easily make your perception of information uncomfortable and grow into your unwillingness to visit the particular source. This article is telling you how important is to work with a text and highlighting the main terms applied in typography.

Typography is an art of using a word as an image with a number of rules and norms. It embraces such notions as: typeface, font size, character spacing… (about it a bit later). Typography is one of the most important elements in web-design. It helps you to achieve coherence in uniting textual and graphic parts of a web-site which, for sure, will make a better impression on a page-visitor. Well-selected fonts add certain spirits to the text, e.g. lightness or strictness which, of course, impacts the completeness of brand concept.

Let us add a bit of theory and look at the main terms. For better understanding we have broken a strict text with explaining illustrations.

Font size — a size of a letter or symbol in vertical, incl. its lowercase and uppercase kerns. It is measured in typographic points (1 pt=0.35 mm). In other words font size is a distance from the lower part of a lowcase letter to the upper part of a capital letter.

Character spacing means increasing or reducing the interval between certain pairs of symbols. Selection of right interval is quite a complicated task as various symbols are filling the space in a various ways (depending on the case, height of main down stroke (letter stroke), kerns, absence or presence of serifs, etc.) A skillfully selected interval between symbols makes text perception easier.

Letter spacing — in other words «intersymbol interval». While character spacingregulates distance between symbols in certain pairs («AV», «TA», etc.), letter spacing is applied to a group of symbols (a word, a line, a paragraph, etc.). With letter spacing you can control even filling of space in the text.

Interline spacing means vertical distance between base lines of neighboring lines. A base lineis an invisible line on which the lower edge of most of the letters is aligned.

Font means a graphic picture, shapes of letters and collection of symbols taken together as an integrated system both stylistically and in terms of composition. Font is narrower than a typeface. E.g. bold or italic shape of typeface Times New Roman is a font.

Typeface is a group of various fonts differing from each other but having the same style. This notion is wider than a font. Each font belongs to a typeface. Besides alphabetic typefaces there are symbolic and digital ones.

Let us turn to the last portion of theoretical knowledge and look at the main classifications of typefaces.

Antiqua — (antiqua, serif) a group of fonts having serifs. These fonts are recommended for headings. You’d better avoid serifs when typing large text fragments as this type is regarded as hardly legible.

Grotesk (sans serifs) — group of fonts having no serifs. This group of fonts is based on strict geometric fonts and is really efficient on creation of a minimalistic style. Main advantages of sans-serifs are strictness and functionality.

Script fonts — any typeface that looks like it has been created with a quill or a brush. These fonts are suitable for creating contrast with stricter fonts or for typing quotations and signatures.

Jobbing fonts (decorative) — one of the most widely spread font categories. The distinctive feature of these fonts is that they are meant for headings and other small text fragments published in order to attract the attentions and focus. The fonts are not suitable for the main text.

Non-alphanumeric fonts (symbolic) are represented by fonts consisting of symbols and ornaments (e.g., mathematic symbols, page frames, cartographic symbols, etc.). Properly selected symbolic fonts make your project unique, help to distinguish important information and highlight key points.

Of course, each web-designer working with a text shall know the main notions of typography and be able to distinguish interline spacing from letter spacing but typography is far wider than just a strict set of rules. Indeed, it is a set of rules to be followed (e.g., do not use more than two fonts in one site) but each rule has its exception that may lead to an excellent result in certain cases. Years of practice, work with various types of sites from various fields, looking through magazines, designers forums and resources – all that finally results in your ability to feel and see the combinations suitable for each particular case.

Leaving the office you inadvertently starts to pay attention to various posters in underground, billboards on the streets or advertisements in magazines, being at your friends’ home you are starring at the cup with an inscription and thinking… text… to move two more pixels right or left and why the picture “sticks” to the text?

— our designer tells

Enhancement of the desired skills is, first of all, development of your watchfulness and attention to details, quite hard and time-consuming process, in order to make it a bit more diverse and add efficiency to the time you are spending we selected several interesting resources about typography.

1. Kern Type type.method.ac – teaches character spacing, try to put letters on the places;

2. Shape Type shape.method.ac – create a correct letter using curves.

Be careful, it is really absorbing!

Back