Some Guidelines For Responsive Web Typography



What is font family, or leading, or measure? If there’s something about typography that’s not so easy, it’s responsive typography. You’ll need to have a talent for design and of course technical knowledge of the field. But daunting it may be, making a mistake is not an option at all, because typography is the foundation of web designing.

So how are we going to get the designs and codes right? What do the developers have to do to communicate properly with the pixel-pushing designers? How can the committed designers influence the dispassionate designers to care more about typography? The key answer to these questions is to find a way to let your developers and designers speak the same language, have the same compassion for design, respect each other’s individuality, and to comprehend the principles and restrictions of web typography. The goal of this article is to provide developers and designers the basis on how to begin communicating about typography. The important design guidelines and sensible solutions for responsive typography will also be discussed.

Defining Good Typography

Saying that something is good is always subjective. It’s not a constant that we can base communication on. For them to do this effectively, they should start by talking about something in common, something that both parties can comprehend and have an interest in – and that is the purpose of typography.

What is typography? It is simply the appearance of text – how we dress up the text is what typography is all about. The reason for dressing is for someone or something to be attractive enough to spark a conversation, but not to hold so much attention so much that the other party becomes inattentive and is sidetracked from the conversation.

Similarly, the aim of typography is also to enable readers to concentrate and engage themselves in the body of the text. Thus, good typography, generally, is typography that helps the text or body accomplish effective communication.

As such, two main things should occur for the readers to get themselves engaged. First off, the typography should relay the appropriate emotion. Secondly, the body or text should be simple and easy to read. For this to happen, you need to get these four elements right:

  • Font type
  • Font size
  • Text width or text measure
  • Line height

Successfully choosing the right font type helps the fundamental emotions of the text to come through. When you get the three elements right, you are guaranteed that your text would be easy to read and understand. The designer can easily choose the font family, so we shall elaborate more on the three other elements.


Making A Legible Text

Setting the font size, width, and line height of the text is the first step in any project. This is what we call typesetting. Start by typesetting with a page that has details that a user needs. If possible, the page should consist of various elements, such as h1, h2, h3, text, and captions, all of which you have designed in a way that works for you. The more elements the page has, the better are your chances of choosing a scheme that will successfully work across the board.

Once you’ve chosen your font size and measure for the body, ensure that you use real content. If that’s not possible, use content from Wikipedia rather than using filler texts. You should also imagine yourself in the exact situation that you’re typesetting for because the distance between the screen and the reader’s eye is not the same for all devices. If you’re set for a mobile unit, look at your finished product through a phone. If it’s for a computer, look through your laptop and look at the output from there.

Once this is done, you can now select font size, measure, and then line height. Remember that it doesn’t have to be perfect. If you look at the other pages that you feel were nicely set, you’ll notice that all of them do not use the same font size, width, and line height. Thus, your goal is not to have these same elements on all pages, but to make your text simply easy to read.

Below are some important guidelines to assist you in ensuring that you have proper font size, width, line height, and measure.

You have a too small font if

  • You’re squinting your eyes while reading
  • You want to zoom in
  • You need focus to read the text

You have a too large font if

  • You can only read one to three words at one time
  • You want to zoom out
  • Your attention is shifted to the letters instead of the content itself

Your text measure is lengthy if

  • You’re turning your head while reading the text
  • You lose focus in the middle of your reading

Your text measure is way too short if

  • You’re bored bouncing to the left then right quickly
  • You’re irritated because of too much text breaks

Your leading is too large if

  • You’re bothered by the white spaces between the line of words

Your leading is too small if

  • You realize you’re reading the wrong line of text unintentionally
  • You feel that you are overwhelmed by the text


Armed with these important notes that you learned from the article, you are more or less ready to initiate a talk with the developers and the designers on how to create an awesome design through responsive typography. It isn’t that difficult. You only have to have the right amount of patience and hard work to expose significant guidelines and use them in a way that suits the web.





Leave a Reply

Your email address will not be published. Required fields are marked *