Typography is one of the most important elements of design. In web design, it is no different. First of all, I would like to clarify all the vague terms that we usually use interchangeably with the typography. In the past, letters were cast on metal and each size with its unique weight was called a font. Different fonts were grouped in what was called a typeface. In digital type terms like font and typeface are almost synonyms, and they usually describe the whole typeface. On the other hand, typography is the art, or rather, a discipline of arranging and designing a written language to make it legible, readable, and visually appealing. This is why typography matters in design in general, but for now, let’s focus on web design. If you want to find out a little bit more about typography in general, make sure you read our introduction to typography.

So what is so different between typography in print and its web counterpart? First of all, the medium is completely different. While printed materials always have fixed dimensions and are static, the web is a highly dynamic and fluid medium with a wide variety of different sizes, resolutions, and other technological limitations and conditions. In print, there’s external lighting, while digital displays rely on internal backlight which is different from screen to screen. Printed materials use ink dots to create a picture, while web screens are made of pixels. The differences go on and on. Most importantly, web typography should be flexible and readable on a variety of different screen sizes and resolutions. In this article we will go through the four most important values of web typography:


In face-to-face communication, feedback is instant, and the experience is interactive, which makes it the most advanced and effective method of communication. With text, there’s no two-way feedback, and we’re left only with symbols and letters – a visual representation of language. In this simple way of communication, typography and content need to work together to form our impression and emotion. By manipulating different properties in typography we can affect how it delivers a given message.

Elegant type is always a compromise between form and function. The good form improves visual impression and aesthetic quality. Heading and other shorter texts whose goal is to make a statement should rely on the beautiful form. Function comes in handy for smaller type sizes used for running text whose goal is to be read. The most important role of headings and display type is to grab the reader’s or user’s attention to the content. When users or readers dig in the content, the role of type is to be legible, readable, and overall functional. By respecting this delicate relationship between form and function we can communicate and deliver the wanted message in the way we desire.

We should think of a text as a complex and dynamic shape that creates tension and builds contrast with the surrounding elements and background. Depending on how we want to present information, we can decrease or increase contrast to control how it affects the final tone of voice. Creating contrast helps us build a hierarchy between different typographic elements, which lets us control the message we deliver to the end-user. We can manipulate four different properties of type to create contrast – size, color, shape, and placement of typographic elements.message can be clear or obscured depending the visual presentation


The presentation itself can be a deciding factor in how we interpret the content. The message becomes more interesting if shown appropriately. Just like in the real world, a lot of different factors can influence how we interpret certain information. In a world of typography and design, we can manipulate the type’s dimensions, weight, width, height, and other properties.

In that matter, some typefaces are more formal, while some are playful and almost childlike. More organic shapes usually make non-formal fonts and straight lines with delicately made curves make for elegant formal ones.

Imagine for a moment you have to show dull statistics or numbers interestingly, and you choose a playful font usually found on happy birthday cards. Even though this approach may obscure the data or the message you want to deliver, it would be entertaining from the visual aspect. The truth lies somewhere in the middle, and choosing between the right form and function is an essential aspect of good ddesign.misuse of comic sans on warning - high voltage sign


All information respects some level of the hierarchy. For example, when communicating with someone in person we can accentuate words or phrases or simply note what’s important and what’s not. In the written word we don’t have that luxury, so we have to use different rules to get the same effect. In design, we establish a hierarchy by using different sizes, colours, placement, and finally, the type.

By consistently applying the same rules for typography on a website, we connect different pages into a single unit, thus creating unity. This is an especially useful method for creating brand consistency for a vast range of devices and screen sizes. hierarch can be manipulated in different ways and one of them is to change the font size


We tend to remember typography more than complicated symbols, which is why you probably can’t easily forget Coca Cola’s logo. This is a two-edged sword because people will always judge your product based on the font you choose. Allegedly no one likes comic sans, and too many non-designers use that particular typeface in presentations and other media. It is an example of how one font choice can shape the image of a product and influence our opinion. typographic logotypes of Coca Cola, Google and NASA With well-chosen fonts, the mechanism is the same, but the emotions and opinions we create are rather positive. Based on typography we are using, people will associate certain emotions with our product, which can help us build recognition and enforce loyalty in our brand.