Site icon FML Marketing

7 important tips for typography in web design

Graphic Design Marbella

Chances are that someone who visits your website does not attach importance to your incredibly well thought-out color palette, your perfectly exposed images that obviously respect the golden cuts meticulously or the strategically mapped content hierarchy, but simply start reading immediately. Then you may have already launched the most beautiful, most innovative website, ultimately everything revolves around text when it comes to conveying the message.

Typography Web Design

For those reasons alone, typography, the art of designing text, should be a top priority for any web designer. And, a readable website is a better website, something that every marketer likes to work with. In this blog post, we will review 7 simple rules that you remember best for your next project.

1. KEEP THE NUMBER OF FONTS MINIMUM

When using 3 different fonts you get the feeling that the website is unstructured and unprofessional. Also keep in mind that different sizes and styles will benefit your layout apart from each other. Try to limit the number of font families (two is a lot, one is often sufficient) and stay through the entire website with your choice. If you use more than one font then make sure that they complement each other on the basis of their letter width. The combination of Georgia and Verdana are made for each other while Baskerville and Impact will never know a ‘happy ending’.

2. CHOOSE STANDARD FONTS

Services such as Google Web Fonts and typekit have made it possible to use sexy and exotic fonts that can give your website that extra fresh, unexpected touch. But people are simply the habit of reading animals and texts with a familiar letter type easier and easier. If your website has a valid argument for an alternative font, such as branding or creating a compelling experience, you should stay with standard fonts such as Arial or Calibri.

3. REST LIMIT LENGTH

To promote readability it is very important to use the correct number of characters per line. Do not let design decide on the width of your texts. A pleasant average is 60 characters per line. If a line is too short, the eye must constantly move forward, which disrupts the reading rhythm of the user. If the rule is too long, the eye has difficulties to focus on the right rule and it strays quickly. For smaller screens, we recommend 30-40 characters per line. Below we see an example of 2 mobile websites. The first one uses 50-75 characters per line (which is ok for print and desktop), while the second website uses 30-40 characters.

Read more about web design 

1.What makes a web design and development agency good?

2.Website Builder: 8 characteristics of an effective website

 

4. CHOOSE A FONT THAT WORKS FOR ALL THE BIGS

More and more people visit your website mobile, which ensures that you have to take into account different sizes and resolutions. Many interface elements are scalable (buttons, labels, headers, etc.). It is important to choose a font that is readable in different formats. The standard format for websites is 16pt. Do not be tempted by the sexy curves of Vivaldi and avoid cursive fonts at all times. Always go for the most readable option.

5. SELECT A FONT TYPE WITH DISTINCTIVE LETTERS

Many fonts have similar characteristics for letters, especially i’s and l’s are a problem. Another problem that often occurs is between r and n. Due to a limited number of letters, it seems that both letters form an m.

6. DO NOT REDUCE THE SET DISTANCE 

A correct line spacing promotes reading. It has even been proven that a correct line spacing also benefits reading comprehension by 20%. A good line spacing is 30% larger than the font size. Some factors that play a role in the line spacing are: size, thickness, capitalization, spacing, etc.

7. CARE FOR SUFFICIENT CONTRAST

Ensure sufficient contrast between the color of your font and the background. The more contrast the text is, the faster the user can read your message. Do not forget to test on different screens. Each screen has its own specifications regarding contrast, saturation, sharpness, color temperature, etc.

Exit mobile version