modern-font-stacks

System UI

System UI fonts are those native to the operating system interface. They are highly legible and easy to read at small sizes, contains many font weights, and is ideal for UI elements.

CSS Font Stack

font-family: system-ui, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
San Francisco	●	●	●	●	●	●	●	●	●
Segoe UI	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Cantarell	●		●	●			●	●
Noto Sans	●	●	●	●	●	●	●	●	●

Notes

• System UI is less of a font stack and more of a CSS value, system-ui, representing the default user interface font. It is widely supported on all modern operating systems.
• The fonts shown are the default fonts for UI in each modern OS.

Transitional

Transitional typefaces are a mix between Old Style and Modern typefaces that was developed during The Enlightenment. One of the most famous examples of a Transitional typeface is Times New Roman, which was developed for the Times of London newspaper.

CSS Font Stack

font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Charter				●			●		●
Bitstream Charter				●			●
Sitka Text				●			●
Cambria				●			●
Noto Serif¹				●			●

Notes

• Charter is a fantastic and timeless typeface designed by Matthew Carter in 1987 for low-resolution 300dpi fax machines and laser printers. It has a large x-height helping with readability, and holds up beautifully on today's screens.
• Charter for macOS has an odd wide non-breaking space ( ). This bug has been reported to Apple.
• Sitka is another beautiful typeface designed by Matthew Carter that slightly resembles Charter. Sitka was designed in collaboration Microsoft's Advanced Reading Technologies to optimize readability.
• Android uses Noto Serif as its default serif font, so no need to specify in the stack.

Old Style

Old Style typefaces are characterized by diagonal stress, low contrast between thick and thin strokes, and rounded serifs, and were developed in the Renaissance period. One of the most famous examples of an Old Style typeface is Garamond.

CSS Font Stack

font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Iowan Old Style				●			●		●
Palatino Linotype				●			●
URW Palladio L				●			●
P052				●			●
Noto Serif¹				●			●

Notes

• Android uses Noto Serif as its default serif font, so no need to specify in the stack.

Humanist

Humanist typefaces are characterized by their organic, calligraphic forms and low contrast between thick and thin strokes. These typefaces are inspired by the handwriting of the Renaissance period and are often considered to be more legible and easier to read than other sans-serif typefaces.

CSS Font Stack

font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Seravek		●	●	●	●		●
Gill Sans Nova			●	●			●	●
Ubuntu	●		●	●	●		●
Calibri			●	●			●
DejaVu Sans	●			●			●
Source Sans Pro				●		●	●

Notes

• Gill Sans Nova is available as a supplemental downloadable font.
• Source Sans Pro uses name source-sans-pro under Android, so this font only targets Android devices.

Geometric Humanist

Geometric Humanist typefaces are characterized by their clean, geometric forms and uniform stroke widths. These typefaces are often considered to be modern and sleek in appearance, and are often used for headlines and other display purposes. Futura is a famous example of this classification.

CSS Font Stack

font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Avenir			●	●	●			●	●
Montserrat	●	●	●	●	●	●	●	●	●
Corbel			●	●			●
URW Gothic			●			●
Source Sans Pro				●		●	●

Notes

• Avenir was chosen over Avenir Next for macOS because the weight 300 is much more legible on the web over the 200 weight that Avenir Next has. If you're looking for an ultra-light or ultra-black, feel free to swap Avenir for Avenir Next.
• Source Sans Pro uses name source-sans-pro under Android, so this font only targets Android devices.

Classical Humanist

Classical Humanist typefaces are characterized by how the strokes subtly widen as they reach the stroke terminals without ending in a serif. These typefaces are inspired by classical Roman capitals and the stone-carving on Renaissance-period tombstones.

CSS Font Stack

font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Optima				●			●		●
Candara			●	●			●
Noto Sans	●	●	●	●	●	●	●	●	●
Source Sans Pro				●		●	●

Notes

• Source Sans Pro uses name source-sans-pro under Android, so this font only targets Android devices.

Neo-Grotesque

Neo-Grotesque typefaces are a style of sans-serif that was developed in the late 19th and early 20th centuries and is characterized by its clean, geometric forms and uniform stroke widths. One of the most famous examples of a Neo-Grotesque typeface is Helvetica.

CSS Font Stack

font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Inter	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Helvetica Neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Nimbus Sans				●		●	●
Arial				●		●	●

Notes

• Arial Nova is available as a supplemental downloadable font.
• Roboto is used for Linux (MX Linux, ElementaryOS, etc) and manual installs. It will not render Roboto on Android, but Android's generic sans-serif will.

Monospace Slab Serif

Monospace Slab Serif typefaces are characterized by their fixed-width letters, which have the same width regardless of their shape, and its simple, geometric forms. Used to emulate typewriter output for reports, tabular work and technical documentation.

CSS Font Stack

font-family: 'Nimbus Mono PS', 'Courier New', monospace;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Nimbus Mono PS				●			●
Courier New				●			●
Cutive Mono				●

Notes

• Nimbus Mono PS is specified first because many Linux distros create name alias for Courier New and not always represent a slab serif
• Cutive Mono doesn't need to be represented in the stack as Android creates a name alias for Courier New.
• Cutive Mono unfortunately only has one weight

Monospace Code

Monospace Code typefaces are specifically designed for use in programming and other technical applications. These typefaces are characterized by their monospaced design, which means that all letters and characters have the same width, and their clear, legible forms.

CSS Font Stack

font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
SF Mono			●	●	●	●	●	●
Cascadia Code	●	●	●	●		●	●
Source Code Pro		●	●	●	●	●	●	●
Menlo				●			●
Consolas				●			●
DejaVu Sans Mono				●			●
Droid Sans Mono				●

Notes

• SF Mono is only available via ui-monospace on macOS 10.15+ and iOS 13.3+ while using Safari
• Droid Sans Mono for Android does not need to be specified in the stack as monospace is a name alias for it

Industrial

Industrial typefaces originated in the late 19th century and was heavily influenced by the advancements in technology and industry during that time. Industrial typefaces are characterized by their bold, sans-serif letterforms, simple and straightforward appearance, and the use of straight lines and geometric shapes.

CSS Font Stack

font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
DIN Alternate							●
Franklin Gothic Medium					●
Nimbus Sans Narrow				●			●
Roboto Condensed	●	●	●	●	●	●	●	●	●

Notes

• Since this stack is limited on weights across operating systems, it's best to use as a Medium/Bold display font
• Bahnschrift is one of the first variable font added to Windows.
• Roboto Condensed uses name sans-serif-condensed under Android, so this font only targets Android devices.

Rounded Sans

Rounded typefaces are characterized by the rounded curved letterforms and give a softer, friendlier appearance. The rounded edges give the typeface a more organic and playful feel, making it suitable for use in informal or child-friendly designs. The rounded sans-serif style has been popular since the 1950s, and it continues to be widely used in advertising, branding, and other forms of graphic design.

CSS Font Stack

font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
SF Pro Rounded	●	●	●	●	●	●	●	●	●
Hiragino Maru Gothic				●
Quicksand			●	●			●
Comfortaa			●	●			●
Manjari	●			●			●
Arial Rounded MT							●
Arial Rounded MT Bold							●
Calibri			●	●			●
Source Sans Pro				●		●	●

Notes

• SF Pro Rounded is only available via ui-rounded on macOS 10.15+ and iOS 13.3+ while using Safari
• Hiragino Maru Gothic is technically a Japanese typeface but has support for all the latin characters. The Mac font does not include a bold so a faux bold will be displayed on screen.
• Arial Rounded MT is needed for Windows, while Arial Rounded MT Bold is needed for iOS, Mac, and older Windows installs
• Source Sans Pro uses name source-sans-pro under Android, so this font only targets Android devices. It's not a rounded typeface, but it's better than Roboto here.

Slab Serif

Slab Serif typefaces are characterized by the presence of thick, block-like serifs on the ends of each letterform. These serifs are usually unbracketed, meaning they do not have any curved or tapered transitions to the main stroke of the letter.

CSS Font Stack

font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Rockwell				●			●
Rockwell Nova			●	●			●	●
Roboto Slab	●		●	●			●
DejaVu Serif				●			●
Sitka Small				●			●
Noto Serif				●			●

Notes

• Rockwell is included with Windows Office
• Rockwell Nova is available as a supplemental downloadable font.
• Android uses Noto Serif as its default serif font, so no need to specify in the stack.

Antique

Antique typefaces, also known as Egyptians, are a subset of serif typefaces that were popular in the 19th century. They are characterized by their block-like serifs and thick uniform stroke weight.

CSS Font Stack

font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
Bookman Old Style				●			●
URW Bookman			●			●
Georgia Pro			●	●		●	●		●
Georgia				●			●
Noto Serif¹				●			●

Notes

• Georgia Pro is available as a supplemental downloadable font.
• Android uses Noto Serif as alias for Georgia, so no need to specify in the stack.

Didone

Didone typefaces, also known as Modern typefaces, are characterized by the high contrast between thick and thin strokes, vertical stress, and hairline serifs with no bracketing. The Didone style emerged in the late 18th century and gained popularity during the 19th century.

CSS Font Stack

font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni MT				●			●		●
Noto Serif Display	●	●	●	●	●	●	●	●	●
URW Palladio L				●			●
P052				●			●
Sylfaen				●
Noto Serif¹				●			●

Notes

• Android uses Noto Serif as its default serif font, so no need to specify in the stack.
• Sylfaen does not include a bold so a faux bold will be displayed on screen.

Handwritten

Handwritten typefaces are designed to mimic the look and feel of handwriting. Despite the vast array of handwriting styles, this font stack tend to adopt a more informal and everyday style of handwriting.

CSS Font Stack

font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

   💻 View in Your Browser (Article View / Characters)

Font Weights	100	200	300	400	500	600	700	800	900
Segoe Print				●			●
Bradley Hand							●
Chilanka				●
TSCu_Comic				●
Coming Soon				●

Notes

• Coming Soon uses name casual under Android, so this font only targets Android devices.

Additional Features

Emoji Support

Looking to add native emojis to your page? Append these fonts at the end of your font stack:

'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

Anti-Aliasing

Render your text with anti-aliasing by using these CSS properties:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Operating System Support

• Windows 7 or newer
• Android 10 or newer (Very limited with 8 fonts)
• iOS 9.3 or newer
• macOS 10.9 (Mavericks) or newer
• Linux (Sampled 12 popular distros)

Plugins and Extensions

• Modern Font Stacks for Tailwind CSS by BorisAnthony
• Modern Font Stacks for WordPress by LittleBigThing
• Modern Font Stacks are supported natively by Webstudio