Cargando

Responsive typography

We give emphasis to an adaptable, integrated, easy to read design.

On Imaginanet we take care of the design and we give importance to a responsive typography, adapted to each text, page and device. A good typography has to be interesting and generate conversation, but it should not distract the users attention nor prevent them from focusing in the content. It has to fulfill its mission of communication, transmit the apropiate emotions, and it has to be easy to read.

Four essential properties that a good typography has to have

  1. Aduate
    font family

  2. Correct
    font size

  3. Adjusted
    line height

  4. Proper
    text width

The first step is to choose the size of the font, the height of the line and the width of the text. It is good to start by the typography of a page whose information is really requested by the user and select its characteristics using real content, because that way we would have a much better idea of the final product. Also it is important to put yourself in the reader's shoes. Since the device, and therefore the distance to the screen can change, we have to keep in mind this factor when we are designing our texts. There is no perfect combination, but it is important for the typography to always be attractive and, of course, easy to understand.

Guide to know if the typography is correct



  1. Is too small if:
    You have to focus yourself to read, force your sight or need to zoom in.
  2. Is too big if:
    You start to notice the shapes of the letters instead of reading the content, you only can read 1 to 3 words each time, or you need to zoom out.
  3. Is too long if:
    You need to turn your head to read, you lose concentration in the middle of your reading.
  4. Is too short if:
    You feel irritated if the text breaks from one line to the next or your eyes get tired of jumping from left to right.
  5. Is too narrow if:
    The text feels dense and overwhelming or if you accidentally read the wrong line.
  6. Is too wide if:
    You get distracted in the blank space in between.

Vertical rythm

In order for an element to flow to the next in a harmonius way, the blank space has to be big enough to differentiate elements from each other, but not to the point where it can break the reading rythm. To be able to choose an adequate typography it
can be used a multiple of the line size and build each
element inside the content from there.

Multiple screens typography

Depending on the screen, it will be neccesary a bigger
or smaller font size. The bigger the screens is the further
the user will be from it, and therefore, the bigger the size of
the typography should be. It is important, also, to mantain
the proportions of the body text and other elements, and
increase the size of specific parts using the modular scale.

Web programming Dictionary

ACCEED THE DICTIONARY