In this post, you will find a list of 16 modern fonts that have been very popular on their site for years. If you like simple, modern, minimalist shapes, the following font suggestions may appeal to you. From this article, you will also find out how to add Google fonts to Photoshop and HTML/CSS websites.
In this post you will find:
If you need unpaid, high-quality, and modern sans serif fonts, Google Fonts is probably the best place where you should start your research. The website offers open-source typography, which means you can use their fonts in personal and commercial projects for free. But, “digging through” a large number of typefaces they offer can be overwhelming. At the moment, there are over 1300 font families available to download in various styles and sizes. So indeed – it can cause a headache in some:). However, among them, there are some well-known fonts that the number of downloads is increasing every week.
Apart from technical aspects, like high-quality design, or great readability, these fonts also have other features, which work in their favor, like their names. For instance, don’t we associate the word “Roboto” with something technical, concrete, and professional? Or “Montserrat” with something elegant, tasteful, and delicate? And indeed – so are these fonts. Everything seems to be consistent here. Therefore, not without reason, so many people reach for them when they look for modern, unpaid typography.
In this post, I gathered the list of 16 sans serif fonts, which will look brilliant in today’s contemporary and minimalist projects. Also, all of them contain a wide range of styles. So you can use them in a variety of ways in your projects.
Roboto
Roboto has a mechanical skeleton and geometric design, which creates natural, smooth reading and brings Roboto has a mechanical, geometric skeleton, which gives it a firm and professional look. With italics, there are 12 styles available for free download. Thanks to its narrow structure, it can adopt more text in paragraphs. It can look brilliant everywhere: in titles, large blocks, or main body text.
Inter
Inter is another proposition of modern font, available in 9 weights for free download (from ExtraLight to Black). It has very good readability, which it owes to the large x-high. It can be a great choice both for title and body text.
Open Sans
Open Sans is an example of a humanistic sans-serif font. Its neutral style, combined with very good readability and high quality, makes it often used in many different projects.
Download Free VECTOR BUTTONS
Montserrat
The slightly wider Montserrat has a delicate, minimalist design, making the font a perfect match for contemporary designs. Together with italics, it includes 18 styles, from Thin to Black. There are also two related types of Montserrat: Alternates and Subrayada.
Poppins
Poppins is an example of a modern font with a geometric structure that will fit into any project, in which we focus on simplicity, freshness, and modernity. Together with italic, it includes 18 styles.
Raleway
For me, what’s most characteristic about Raleway is the letter “W”. Whenever I notice it somewhere, I know it is Raleway :). Raleway has an elegant, “light”, and a bit sophisticated design, which perfectly fits contemporary projects today.
Lato
Lato, lato…who doesn’t know lato?:) In polish, it means summer. Difficult to say what its name has to do with the font, but anyway … The professional, consistent look of the font brought him great popularity and many downloads on Google fonts. Often used in titles and body text. Together with italic, it includes 10 styles.
Ubuntu
If you’re looking for an original font for a title, Ubuntu might be a perfect choice. Including italic versions, it includes 8 styles in total. It can also be an alternative to the popular FF Dax paid typography – check modern google font alternatives to the most popular paid typography.
Dosis
Dosis has distinctive rounded edges, making it a good choice for projects where you want to achieve a warm, welcoming reception. Its family consists of 7 weights, from extra light to extra bold.
Nunito
Like Dosis, the Nunito has distinctive curves that give it a friendly, contemporary look. The font contains 7 weights plus their italic counterparts.
Source Sans Pro
Source Sans Pro is another modern sans serif font with very good legibility. There are 6 weights available for download, plus their italic counterparts.
Prompt
Prompt is a simple, geometric, fairly wide font with lots of negative space around the characters. It contains 9 weights that have their counterparts also in italic.
Work Sans
The Wider Work Sans is another version of a readable, neutral font that will give your project a clean, professional character. Its large family includes 9 weights plus their italic counterparts.
Space Grotesk
Space Grotesk is an example of the original, angular font. If you want to achieve a technical, even slightly futuristic look, Space Grotesk might be the right choice. There are 4 basic weights available for free download (light, regular, medium, bold).
Oswald
The list – modern sans serif fonts, is closed by two condensed typefaces. The first is Oswald, which can look great in titles or large blocks of text on a page. There are 6 weights available for free download.
Antonio
The other one is Antonio, which is my last finding. It is slightly narrower and taller than Oswald and could look brilliant as a title in a design. As the author of Vernon Adams himself claims, Antonio is an extension of his other font – Anton. Antonio, however, has more styles (7- from Extra Light to Bold).
Simple tips to use modern sans serif fonts from google in more efficient way.
Don’t choose too many different font families in one project – It can break the consistency of the design, and slow down the website loading. The most common practice is using 2-3 font families, one for a website title, another one for body text.
Don’t use too many weights/styles of the one font family – Using too many weights will have the same negative impact as above. It can affect website performance, and it can break the harmony of the design. Using 2-3 weights (light – 300, regular – 400, bold – 700) seems to be the safest option.
Note, if font family has Multilingual Support – At the moment, Google allows users to simply translate websites text into different languages. But still, it will work only if the font you use, supports the user’s language. So make sure you chose the typography, which contains special characters of the audience you want to target.
How to add fonts to Photoshop on Windows?
After downloading fonts from a source, you like (ex. Google Fonts, Fontfabric, Fontspring), go to the Downloads folder on your computer. If you got a zip pack, you need to unzip it first.
After extracting the folder, find OTF/TTF files. Generally, each OTF/TTF file contains an exact weight for a font family. Select all the styles you want to add to Photoshop, right-click on it, and choose Install.
Now you should find your typeface in Photoshop on your typography list.
How to add Google Fonts to HTML/CSS?
Click on the selected font family and choose the weights you want to add to the page by clicking the Select this style button. On the right side, you will find the weights of your choice.
Click on the Embed tab. You will find the link that you need to add to your website. You also need to add CSS rules to elements that you want to target.
Insert <link> tag between <head></head>tags on a website.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test Website</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;1,600&display=swap" rel="stylesheet">
<meta name="keywords" content="Travel planning, travel bundles, travel escapes">
<meta name="description" content="Your clarity. One trip away. We create soul restoring journeys that inspire you to be you.">
<link rel="stylesheet" href="styles.css">
</head>
Add CSS rules to the element, you want to target.
body{
font-family: 'Nunito', sans-serif;
}
Now fonts should be available on your HTML website.
This is the end…
Hopefully, this sans serif fonts list will narrow down your research on Google and help you to choose the right typography for a project. In this post, I’ve collected typography from Google. If you are looking for free commercial fonts from websites like Behance, DaFont, or Font Squirrel, check also 21 clean, minimalist, and free fonts for commercial use.
