Top 5 Fonts and its usage

Lollypop Design
Muzli - Design Inspiration
4 min readAug 16, 2017

--

There are two kind of people in this world, people who love to read and people who don’t. Regardless of this fact, content in this day and age is still the king.

However great content is meaningless if not presented well. Today so much of web designs compromises of text and hitting the right mark for your typography is a key factor in the overall success of your site.

Digital is a very dynamic platform and we have to accept that the content keeps changing. Unlike print, web design doesn’t have the freedom to define the space between the letters.

Fonts have a deep psychological impact on your users and here is a list of 6 examples of great typography which are being used to create web designs around the world and are perfect examples that texts can never be boring!

1. Poppins

Source: Google Fonts

Font Link: https://fonts.google.com/specimen/Poppins

Use Case Examples: http://zipl.pro/ ,http://www.nerval.ch/apollo_11/ , http://theisbothmann.com/ http://www.kikk.be/2016/

Recommended For: Modular and minimal websites

Description: Poppins is one of the Geometric sans serif typefaces have been a popular design tool for building websites. Each letterform is nearly monolinear, with optical corrections applied to stroke joints where necessary to maintain an even typographic color.

2. Open Sans

Source: Google Fonts

Font Link: https://fonts.google.com/specimen/Open+Sans

Use Case Examples: http://gravity-theme.site/ ( Company, Corporate and Product websites)

Recommended For: Standard look — feeling

Description: Open sans would be a very good pair for many fonts like Raleway, Brandon Grotesk , Montserrat , Lato etc,. It renders beautifully on the browser , with good readability.

3. Montserrat

Source: Google Fonts

Font Link: https://fonts.google.com/specimen/Montserrat

Use Case Examples: http://www.dangblast.com/, http://hansonwu.com/howtoordereggs/#/

Recommended For: Fun looking websites, it creates a majestic yet fun look

Description: This typeface comes in three variants and evokes the modernist style of the early 20th century, however, it feels less formal than, say, Futura. Montserrat really shines for short pieces of all caps and the geometric simplicity of the letters. In lowercase, Montserrat, is still a pretty nice font with a nice large x-height and a lot more character than Arial or Helvetica.

4. Playfair Display

Source: Google Fonts

Font Link: https://fonts.google.com/specimen/Playfair+Display

Use Case Examples: http://adrien-heury.net/designers-checklists/ http://mondaymusic.es/en, https://www.craftedbygc.com/ https://hoodzpahdesign.com/

Recommended For: It is basically the one that suits all and creates feeling of trust. It can be used for modular as well as traditional sites.

Description: It is a serif font with beautiful curves and well rounded corners, which is suitable for both traditional, as well as modern websites. The design is influenced by typefaces from the mid to late eighteenth century, such as Baskerville. It makes an excellent font for titles and headlines (especially the beautiful italic), however, for long stretches of body copy, the delicate, high-contrast strokes might hinder readability, especially when used at smaller sizes.

5. Avenir

Source: Web

Font Link: https://www.myfonts.com/fonts/linotype/avenir

Use Case Examples: https://playcharms.com/en/

Recommended For: Most suited for futuristic feeling. It resembles minimal, futuristic content, and creates clean looking product websites.

Description: The name Avenir means “ Future “ in french, and it is a minimal and modular sans-serif font used in many sites, which gives a futuristic look to the design. Use the bold and extra bold weights of Avenir for emphasis with the light, book, and medium weights.

6. Bebas Neue: An additional font which we couldnot not

Source: Web

Font Link: https://www.fontsquirrel.com/fonts/bebas-neue

Use Case Examples: https://www.craftedbygc.com/ http://www.theqcamera.com/ http://ekpesbookclub.com/

Recommended For: For standard yet solid and stylish layout feeling.

Description: It is a beautiful condensed looking font which looks very standard as well as stylish.

Although typography isn’t as flashy as Animation or HD images, they are nonetheless, an integral and powerful part of every design. They can be bold, to draw attention to the messaging, or, subtle, to draw attention to other elements on the screen. In either case, one thing we all can agree on is that typography enhances the design as a whole, one way or another.

Thank you. Do share your favorite fonts as well. You can follow us on Facebook/ LinkedIn/ Twitter

--

--