Pages Menu
Categories Menu

Posted by on Oct 17, 2012 in Guides / Tips |

Roadmap for web typography

Roadmap for web typography

The world is complicated. Especially if you have no experience. This is how we end up seeing ads or websites they believe is a typeface Comic Sans valid for anything serious, for example. Or sites that combine different fonts that simply can not be combined, creating an aesthetic disaster that unfortunately our eyes have to endure. So we’ve put together a guide for beginners on the “functioning” of the fonts on the web.

Operating say in quotes because in reality it is aesthetic criteria. We will not be relying on the assumption that when we are designing a logo or web-and we did not want to hire a designer who surely will laugh clarifications that we do, we prioritize the usability and the interface first.

This article is dedicated to designers, but maybe people who are just entering the world of web design and want to know what are the best ways to combine image and code. But first we’ll start with some basics to better understand what we’re dealing.

What is typography?

The typeface can be considered an art or a craft-the-typographer’s can not be underestimated. Designers, and even architects study for years to become typographers. Obviously reading a couple of lines we will not become experts, but we have a better idea. The is responsible for managing the layout and aesthetics of letters, numbers and symbols that are on paper-or, in our case, the screen, managing relationships that occur between them.

There are different types of typography, such as macrotipografia or creative typography dedicated to creating new and creative forms of relationship between different types. On this day we will not concentrate on anything creative because we have no intention of creating a new typeface, which require the knowledge we have not.

How I can use it without being an expert?

Just because we are not typographers and designers not mean we can not combine fonts correctly and aesthetics. For that, we need to consider some key.

  • Typography is not the same as source.
  • Not all fonts can be combined in the same way, and depend greatly on the project you’re working.
  • The fonts must be adequate for what we want to communicate, we will see in a few lines, so we have to think about exactly what we mean when choosing a typeface to represent us.
  • Even if you’re in charge of a logo design, you can make known your opinion with the basic knowledge you have. For example, if you feel the “spirit” of the brand you represent is not being expressed properly in words you can say they are giving more professional and better understand the person who is doing the work.

Different font types and uses

The fonts are divided according to different classification criteria, we will review some of them and then explain the situations in which they must, or may, rather, be used each.

  • Serif: these fonts are this classification by the small lines that can be seen at the edges of the letters. Serif typefaces have a more “serious” and are generally used for body text, for printing projects, graphic projects, or holders. For large bodies of text on a website, it is advisable not to use serif as may be unreadable at times. Some modern serif fonts are best suited for the job site.
  • Sans-serif: these fonts just lack the lines possessing the other, the serif, and are ideal for web work, so they are the most widely deployed, for example, in the body text of publications and blogs. These fonts are generally flat and simple appearance, that convey a sense of elegance without necessarily being minimalist or spend desapercebidas.
  • Script: This classification refers to fonts cursive, as if it had been written by one person. Needless to say that it is inconceivable for the body text of a web page, large blocks of text in an ad, or the like, because they do not have the same level of readability than the other two groups. They have reasons to be more aesthetic, and transmitted using warm feeling of professionalism, while emotion may contain more than, say, Helvetica.
  • Display: within this group have the ‘wild card’, the group of fonts that can not really be classified in the other categories. So it’s hard to say for sure what the best uses; depend on the situation we are dealing with at the time.
Tags: ,