Required files
SCSS files required: _trumps.typography.scss
Size definitions
Note that it is recommeded that all font sizes are defined in REMs as explained here.
(However the sizes are outlined below in pixels to make it easier to understand)
The size variables used in the classes below are defined in settings: _settings.typography.scss and can be reasigned to suit your project.
Headings
Use default heading tags or the classes are also available .h1, .h2, .h3 etc
Note: When a heading is the first child, the top padding is removed to keep it at the top of it's wrapping element
There are mixins available to create responsive heading styles here here
Heading 1 style (24px/28px)
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus.
Heading 2 style (22px/26px)
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus.
Heading 3 style (20px/24px)
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus.
Heading 4 style (18px/22px)
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus.
Heading 5 style (16px/20px)
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus.
Heading 6 style (14px/18px)
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus.
Font sizes
All font sizes have desktop and mobile sizes which change at the medium screen size (50em/800px)
Padding is used for the spacing of all typography, so the global padding helper classes can be used to override if required
The file _settings.typography.scss contains all the size variables (variables can be reassigned directly after the file if required)
There are mixins available for the font sizes here here
Extra small typography (10px/12px)
Use the class font-size-xs for extra small typography styling
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus. Nam risus arcu, malesuada id lectus eget, pretium blandit mi. Quisque molestie, sem nec rhoncus porttitor, lectus libero pretium mi, et mattis mauris erat at tellus. Sed ultricies dignissim volutpat.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat.
- Sed sagittis cursus semper. Aenean feugiat, nisl quis scelerisque rhoncus, orci elit consequat arcu.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
Small typography (12px/14px)
Use the class font-size-sm for small typography styling
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus. Nam risus arcu, malesuada id lectus eget, pretium blandit mi. Quisque molestie, sem nec rhoncus porttitor, lectus libero pretium mi, et mattis mauris erat at tellus. Sed ultricies dignissim volutpat.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat.
- Sed sagittis cursus semper. Aenean feugiat, nisl quis scelerisque rhoncus, orci elit consequat arcu.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
Base typography (14px/16px)
Use the class font-size-md for base/medium typography styling
Note that this is the size defined on the body already.
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus. Nam risus arcu, malesuada id lectus eget, pretium blandit mi. Quisque molestie, sem nec rhoncus porttitor, lectus libero pretium mi, et mattis mauris erat at tellus. Sed ultricies dignissim volutpat.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat.
- Sed sagittis cursus semper. Aenean feugiat, nisl quis scelerisque rhoncus, orci elit consequat arcu.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
Large typography (16px/20px)
Use the class font-size-lg for large typography styling
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus. Nam risus arcu, malesuada id lectus eget, pretium blandit mi. Quisque molestie, sem nec rhoncus porttitor, lectus libero pretium mi, et mattis mauris erat at tellus. Sed ultricies dignissim volutpat.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat.
- Sed sagittis cursus semper. Aenean feugiat, nisl quis scelerisque rhoncus, orci elit consequat arcu.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
Extra large typography (20px/36px)
Use the class font-size-xl for extra large typography styling
Aenean sapien est, convallis sit amet euismod sit amet, porttitor at quam. Suspendisse consectetur nulla odio, et fringilla magna feugiat et. Quisque nec est non scelerisque rhoncus, orci elit consequat arcu, et dictum sapien risus id lectus. Nam risus arcu, malesuada id lectus eget, pretium blandit mi. Quisque molestie, sem nec rhoncus porttitor, lectus libero pretium mi, et mattis mauris erat at tellus. Sed ultricies dignissim volutpat.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat.
- Sed sagittis cursus semper. Aenean feugiat, nisl quis scelerisque rhoncus, orci elit consequat arcu.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
- Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
- Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
Font weights
Regular and bold helpers: .font-weight-regular, .font-weight-bold
Text transforms
Uppercase and lowercase helpers: .font-uppercase, .font-lowercase
Text formatting
Use the default tags or the same name classes to format text
Note there are some helper classes are also available for font colours, weights and transforms here.
strong = <strong> or .strong or .bold
italic = <i> or <em> or .em or .italic
small = <small> or .small
strikethrough = <s> or .s or .strikethrough
highlight = <mark> or .mark or .highlight
Text palette
Note the base colour is already the default, but the class can be used to override if required.
Base font colour (#333) = .colour-base
Light font colour (#999) = .colour-light
Very light font colour (#d6d6d6) = .colour-very-light
Inverted font colour (#fff) = .colour-inverted
Primary font colour (#8cc63f) .colour-primary