Typography
Arranging type to be legible, readable, and appealing when displayed. The arrangement involves selecting typefaces, sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), etc.
Font Sets
Consistent and accurate usage of our approved typefaces reinforce our brand identity.
-
Sans
Aa
Figtree
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- abcdefghijklmnopqrstuvwxyz
- (.,;:'"$#@!&*) 0123456789
-
Serif
Aa
Literata
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- abcdefghijklmnopqrstuvwxyz
- (.,;:'"$#@!&*) 0123456789
-
mono
Aa
JetBrains Mono
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- abcdefghijklmnopqrstuvwxyz
- (.,;:'"$#@!&*) 0123456789
-
Websafe
Aa
Arial
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- abcdefghijklmnopqrstuvwxyz
- (.,;:'"$#@!&*) 0123456789
Google Fonts Embed
Example Google Fonts head link markup for use in your application or sample prototype.
<link href="//fonts.googleapis.com" rel="preconnect" />
<link href="//fonts.gstatic.com" rel="preconnect" />
<link href="//fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap" rel="stylesheet" />
CSS
CSS font stack with fallback.
--prs-ff-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--prs-ff-serif: Literata, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--prs-ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--prs-ff-websafe: Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';