Top 6 Fonts and Its Usage in Web
There are two kinds of people in this world, people who love to read and people who don't. Regardless, in this day and age, content is still the king. However, the 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 and fonts 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
One of the Geometric sans serif typefaces and 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 colour.
Recommended For: Modular and minimal websites
Use Case Examples: www.zipl.pro | www.nerval.ch | www.theisbothmann.com | www.kikk.be
Source: Google Fonts
Font Link: Download
2. Open Sans
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.
Recommended For: Standard look & feeling, Corporate and Product websites
Use Case Examples: www.gravity-theme.site
Source: Google Fonts
Font Link: Download
3. Montserrat
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.
Recommended For: Fun looking websites, it creates a majestic yet fun look.
Use Case Examples: www.dangblast.com | hansonwu.com
Source: Google Fonts
Font Link: Download
4. Playfair Display
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.
Recommended For: It is basically the one that suits all and creates a feeling of trust. It can be used for modular as well as traditional sites.
Use Case Examples: wwww.adrien-heury.net | www.mondaymusic.es | www.craftedbygc.com | www.hoodzpahdesign.com
Source: Google Fonts
Font Link: Download
5. Avenir
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.
Recommended For: Most suited for futuristic feeling. It resembles minimal, futuristic content, and creates clean looking product websites.
Use Case Examples: www.playcharms.com
Source: Web
Font Link: Download
6. Bebas Neue
It is a beautiful condensed looking font which looks very standard as well as stylish.
Recommended For: For standard yet solid and stylish layout feeling. It is a beautiful condensed looking font which looks very standard as well as stylish.
Use Case Examples: www.craftedbygc.com | www.theqcamera.com | www.ekpesbookclub.com
Source: Web
Font Link: Download
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.
- article by Dhilip Kumar G., Lollypop Studio
