Beautiful font sizing for your web typography. Based on “The Typographic Scale” by Spencer Mortensen.

Never, ever use system-ui as the value of font-family

https://infinnie.github.io/blog/2017/systemui.html

Barlow

https://fonts.google.com/specimen/Barlow?query=barlow#glyphs

Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.

This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.

Encode Sans

https://fonts.google.com/specimen/Encode+Sans?query=encode+sans#about

Encode Sans is a versatile workhorse sans-serif superfamily ready for all kinds of typographic challenges, offering a unique blend of warmth and practicality. Its humanist aspects of simple letterforms and open apertures keep it crisp and legible, while its geometric approach of rounded letters with partially-straightened sides delivers a friendly but precise tone.

It includes 5 widths from Condensed to Expanded, each with 9 weights from Light to Black. To simplify the use of smallcaps in word processors, there are also small-cap versions of each family.

Cabin

https://fonts.google.com/specimen/Cabin?query=cabin

Cabin is a humanist sans inspired by Edward Johnston's and Eric Gill's typefaces, with a touch of modernism. Cabin incorporates modern proportions, optical adjustments, and some elements of the geometric sans. It remains true to its roots, but has its own personality.

The Cabin font family comes in two variable fonts, roman and true italic, with a Weight range from Regular to Bold, and a Width range from normal to Condensed. The stroke contrast is almost monolinear, although top and bottom curves are slightly thinned. Counters of the b, g, p and q are rounded, and all are optically adjusted.

Sarabun

https://fonts.google.com/specimen/Sarabun

Sarabun is an open source multi-script webfont that supports both Latin and Thai. It is the "TH Sarabun New" font

Prompt

https://fonts.google.com/specimen/Prompt

Prompt in Thai means “ready,” the same as in English. Prompt is a loopless Thai and sans Latin typeface. The simple and geometric Latin was developed to work harmoniously with the loopless Thai that has wide proportions and airy negative space. It is suitable for both web and print usage, such as magazines, newspapers, and posters.

Your Instagram feed may tell you that the line spacing should be 20% more than the font size. You may see that the difference should be as much as 50% as well.

There is no magic ratio. Text blocks will look different with different typefaces because of differences in Cap Height and X-height. While 120% is very likely to work for interface fonts — because they were created with a certain Cap to X-height ratio — the rest are problematic.

To solve the problem, you should not use a common index for all fonts, but an individual one, depending on its X-height. It is necessary to take a lowercase letter without extensions — for example, N — of the same point size as the typed text, and put it between two lines of text so that the upper boundary of the letter touches the typing line of the first line, and the lower boundary touches the upper height of the uppercase letter.

Complete guide to the free font Libre Franklin. See beautiful examples, recommended pairings, OpenType features, and more.

https://larahogan.me/blog/we-need-to-talk-about-your-q3-roadmap/

Free, high-quality alternatives to: Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman

Recursive by Arrow Type
Recursive is free for download from Google Fonts or Github and open-source, licensed under the SIL Open Font License 1.1.

PT Root UI by Paratype
PT Root UI is free for download under the SIL Open Font License (OFL) on Paratype’s website.

Golos UI by Paratype

Bahnschrift by Saja Typeworks
Bahnschrift is available as part of the Windows 10 operating system.

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!

The best Google Fonts can add personality and functionality to your website. You can even use Google Fonts with UXPin prototypes.

Gidole

DIN – the font we all love, the font that looks great at every size. Gidole is extremely close to DIN, but designers with a keen eye will spot very few minor differences. Overall, if you’re looking to use DIN, try Gidole out before going live.

Overpass

Overpass was created by Delvefonts and sponsored by Redhat, it was designed to be an alternative to the popular fonts Interstate and Highway Gothic. Did we mention it also has a monospace version?

Public Sans

Public Sans is a project of the United States Government, it’s used widely on their own department websites and is part of their design system. The font is based on the popular open-source font Libre Franklin.

Object Sans

Object Sans (formally known as Objectivity) is a beautiful geometric font family that can be used in place of quite a few premium fonts out there. The font brings together the top qualities of both Swiss neo-grotesks and geometric fonts. The font works beautifully as large headings but can be used for body content as well.

Jost

When you want a change from the typical Futura, then Jost is a great option with its variable weighting as well as multilingual support.

OpenType lets you replace characters based on context

I started out being extremely confused about what OpenType even is. I still don’t know much, but I learned that you can write extremely simple OpenType rules to change how a font looks, and you don’t even have to really understand anything about fonts.

Here’s an example rule:

sub a' b by other_a;
What sub a' b by other_a; means is: If an a glyph is before a b, then replace the a with the glyph other_a.

There are over 950 Google typefaces available. Probably, you don't know the majority of them. They vary in the number of variants and subsets.

The idea to tag Google Fonts born from our need to use less popular typefaces, with a strong identity.

Google Fonts are easy to implement, but they can have a big impact on your page load times. Let’s explore how we can load them in the most optimal way.

Public Sans

Europa font

Also see:
https://www.typewolf.com/site-of-the-day/fonts/europa

A font superfamily is set of typefaces (example: merriweather and merriweather sans) that have been specifically designed to look good together.

Here are 10 Google Font superfamilies you should know about

As a web designer, you’re probably well aware that Great fonts are essential to great design.
This article is all about fonts. We have collected 14 unbelievable Google Web Fonts that makes your heading or headline of your website attaractive.
The fact is that the headlines are more important than you may think. and Many designers also agree this point.