Style Guide
Fonts
We are using all system fonts so far. PT Serif is a font we also use on Thought Catalog.
Serif Font Stack
“PT Serif”, Charter, “Noto Serif”, Palatino, Palatino Linotype, Times, Times New Roman, serif
Sans Serif Stack
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
Font Sizes
We use a fluid font size. It’s calculated like this:
( 15/16 * Browser Font Size ) + ( 1/320 * Viewport Width )
Here are the values at a few screen sizes where it results in whole numbers:
- 320px Screen = 16px font
- 640px Screen = 17px font
- 960px Screen = 18px font
- etc…
2em Heading 1
1.5em Heading 2
1.375em Heading 3
1.25em Heading 4
1.125em Heading 5
1em Heading 6
1em Paragraph text
0.875em Small
0.75em Extra Small
Content Widths



Buttons
I can’t insert SVGs in post content. There are buttons that handle SVGs too. In any of these button styles, the SVG fill color works just like the text color.