Fonts ⮞ Classics ⮞

Sans-Serif, Grotesque

Error: JavaScript is needed to render this site: please enable it.

Sans-serif classic-like grotesque font families which are both free and flexible include:

Website Developer Notes

A font marked with a checkmark (‘ ✓’) is recommended.

Only use so-called ‘free’ fonts if the fonts are free for commercial use.

Note that downloadable web fonts can’t be created from all fonts.

Only use a great classic font which is clear and legible in display media. Note: be especially careful of serif fonts, which are often less legible than sans-serif fonts in body text.

You may not charge for a free font, and you may not sell it, but you may bun­dle it with a website you deliver.

Fantasy text here says that the sample‘s font isn‘t installed.

This tries to list fonts with weights 400, 600, 700, and either 800 or 900. Fonts lacking these weights are inflexible for body text; fonts lacking bold and a heavier weight can be especially inflexible for header text unless the regular font itself is heavy. Exception: intricate heavy fonts are adequate with only 1 weight.

See Also: unfree and/or less flexible fonts are Arial & Hel­ve­tica.

See Also: other classic fonts.

Note: for-pay fonts often offer more glyphs.

Recommended

I recommend IBM Plex Sans since it’s flexible: it comes in 2 widths; each width comes in 7 good weights; each weight comes in normal and italic styles.

Comparisons

The fonts compared, at sizes φ2, φ, and 1 em:

AkzidenzGrotesk

Pack My Box with Five Dozen Liquor Jugs

The Quick Fox Jumped Over the Lazy Brown Dog

Quick Pangrams Vex Fjord Gals with Booze

IBM Plex Sans ✓

Pack My Box with Five Dozen Liquor Jugs

The Quick Fox Jumped Over the Lazy Brown Dog

Quick Pangrams Vex Fjord Gals with Booze

Libre Franklin

Pack My Box with Five Dozen Liquor Jugs

The Quick Fox Jumped Over the Lazy Brown Dog

Quick Pangrams Vex Fjord Gals with Booze

Work Sans

Pack My Box with Five Dozen Liquor Jugs

The Quick Fox Jumped Over the Lazy Brown Dog

Quick Pangrams Vex Fjord Gals with Booze

AkzidenzGrotesk 

This font family comes in 4 weights: Light, Regular, Bold, & Black.

Select the normal fonts with this CSS: font-family:"AkzidenzGrotesk", sans-serif;

AkzidenzGrotesk
Next Font Family
Next Font
View Font Sample
Get Font

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGgMmPpQqRrTtWw

3.61emAaBbEeGgMmPpQqRrTtWw

IBM Plex Sans  ✓

This font family comes in two widths: normal and condensed.

IBM Plex Sans
Next Font Family
Next Font
View Font Sample
Get Font
IBM Plex Sans, Normal Width 

This comes in 7 weights: Thin, ExtraLight, Light, Regular, Medium, SemiBold, & Bold; sadly this lacks ExtraBold or Black weights.

Normal Styles

Select the normal styles with this CSS: font-family:"IBM Plex Sans", sans-serif;

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGg​MmPpQqRr​TtWwYyZz

3.61emAaBbEeGg​MmPpQqRr​TtWwYyZz

Italic Styles

Select the italic styles with this CSS: font-family:"IBM Plex Sans", sans-serif; font-style:italic;

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGg​MmPpQqRr​TtWwYyZz

3.61emAaBbEeGg​MmPpQqRr​TtWwYyZz

IBM Plex Sans
Condensed
Next Font Family
Next Font
View Font Sample
Get Font
IBM Plex Sans, Condensed Width 

This comes in 7 weights: Thin, ExtraLight, Light, Regular, Medium, SemiBold, & Bold; sadly this lacks ExtraBold or Black weights.

Normal Styles

Select the normal styles with this CSS: font-family:"IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-stretch:condensed;

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGg​MmPpQqRr​TtWwYyZz

3.61emAaBbEeGg​MmPpQqRr​TtWwYyZz

Italic Styles

Select the italic styles with this CSS: font-family:"IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-stretch:condensed; font-style:italic;

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGg​MmPpQqRr​TtWwYyZz

3.61emAaBbEeGg​MmPpQqRr​TtWwYyZz

Libre Franklin 

This font family comes in all 9 weights: Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, & Black.

Libre Franklin
Next Font Family
Next Font
View Font Sample
Get Font

Select the fonts with this CSS: font-family:"Libre Franklin", sans-serif;

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGg​MmPpQqRr​TtWwYyZz

3.61emAaBbEeGg​MmPpQqRr​TtWwYyZz

Work Sans 

This font family comes in all 9 weights: Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, & Black.

Work Sans
View Font Sample
Get Font

Select the fonts with this CSS: font-family:"Work Sans", sans-serif;

1.00emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.38emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

1.90emABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdef​ghijklm​nopqrst​uvwxyz 01234​56789 !@$%^&​()[]{}<>?

2.62emAaBbEeGg​MmPpQqRr​TtWwYyZz

3.61emAaBbEeGg​MmPpQqRr​TtWwYyZz

 

 Top of Page         Legal Notices 

Logo