Only Framework uses a font stack based on system fonts across all common desktop and mobile platforms, in the following order:
- Segoe UI
- Fira Sans
- Droid Sans
- Helvetica Neue
Additionally, for the
<code> font Only uses:
- Inconsolata (loaded through Google Fonts CDN)
If you don't use
<code> fonts, just remove the CDN call from the
<head> to save a bit of performance.
Headings (H1-H6) uses sizes set in variables found in _fonts.scss.
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
Font sizes relate directly to heading sizes to get consistent scale.
4em on 1.8 line-height
2.8em on 1.8
2.1em on 1.8
1.35em on 1.6
1em on 1.6
0.8em on 1.45
0.65em on 1.3
The following classes set the sizes above:
Three different weights are provided. Names in parenthesis are the class names you should use.
.light: set weight to weight 100
.regular: set weight to weight 300
.bold: set weight to weight 500
Fonts scale globally in size and line-height at set intervals. You can tweak these values in
$global-font-size in _fonts.scss.
- 1.0x size and 1.0x line-height @ 1024px
- 0.85x and 0.95x line-height @ 768px
- 0.75x and 0.95x line-height @ 320px
Standard HTML elements for bold or strong and emphasized text should normally be used.
- Bold text using
- Strong text using
- Emphasized text using
If you somehow don't want, or can't, use the more semantically correct
<strong> elements you can use span classes to make bold text. You can also use those classes to make text with italics or why not an underline when you don't want an
<span class="italic bold underline">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
Blockquote and cite
Confucius, The Confucian Analects
I am not one who was born in the possession of knowledge; I am one who is fond of antiquity, and earnest in seeking it there.
(551 BC - 479 BC)