Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Modern Font Stacks
/* Modern Font Stacks */
/* System */
font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/*The heavier "Impact" sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
@welcomebrand

This comment has been minimized.

Copy link

@welcomebrand welcomebrand commented Jul 16, 2019

Thanks for this - super useful.

There's a stray comma in the wrong place on the Georgia based stack which breaks it "DejaVu Serif," should be "DejaVu Serif",

Cheers,

J.

@don1138

This comment has been minimized.

Copy link
Owner Author

@don1138 don1138 commented Jul 16, 2019

Fixed it – Thanks for the tip.

@charlesmartinreed

This comment has been minimized.

Copy link

@charlesmartinreed charlesmartinreed commented Sep 10, 2019

Always helpful. Thanks for this.

@ControlledChaos

This comment has been minimized.

Copy link

@ControlledChaos ControlledChaos commented Oct 10, 2019

Thank you.

@camslice

This comment has been minimized.

Copy link

@camslice camslice commented Jun 1, 2021

Thanks Don, a great reference. I noticed another small issue: "Bitstream Vera Sans" is repeated in the Trebuchet-based sans serif rule. Not sure if you intended it to come before or after "DejaVu Sans"

@don1138

This comment has been minimized.

Copy link
Owner Author

@don1138 don1138 commented Jun 2, 2021

Fixed it – Thanks for catching that.

I think I grabbed these stacks from css-tricks.com, and I'm pretty sure they grabbed them from this 2009 article, where you can see the same Bitstream Vera Sans error in the Trebuchet stack. And it looks like one or both of them copied from an even earlier article, but somehow doubled BVS in their mods. I updated based on the original, correct source, which is definitely worth reading to understand the strategy behind them.

In any case, it's impressive that these stacks still (mostly) hold up after all these years.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment