Typography
Type use default bootstrap scaling (1rem = 16px). On smaller screens, sizes downscale based on desktop sizes: mobile h1 takes desktop h2 values, mobile lead takes desktop lead. Intermediate heading sizes are scaled as per desktop.
Headings
All headings are set in Museo 700, RMIT Blue (#000054) as per brand guidelines. This thicker weight provides good contrast with body text, making the difference between headings and body content very clear.
Body text
Body text is set in Helvetica Neue, Dark Grey (#333333) at font-weight 400. Bold or strong text uses font-weight 600. Note the lead paragraph style uses font-weight 500.
To view the mobile styles, either resize your browser window, or use Chrome dev tools to view the pages at different breakpoints
Core type stack
This is h1 heading
<h1>This is h1 heading</h1>
This is h2 heading
<h2>This is h2 heading</h1>
This is h3 heading
<h3>This is h3 heading</h1>
This is h4 heading
Sized to be the same size as the lead paragraph.
<h4>This is h4 heading</h1>
This is h5 heading
This heading is sized to match the default paragraph text. Avoid placing it directly before a lead paragraph; use an h4 heading or higher instead.
<h5>This is h5 heading</h1>
This is h6 heading
Same size as h5, use sparingly.
<h6>This is h6 heading</h1>
Lead paragraph is usually used at the start of pages, after the main page heading (h1). It is uses a font-weight of 500. Don't display too much content in this style, 400 characters is a suggested limit.
<p class="lead">Lead paragraph is usually used at the start of pages...</p>
Default paragraph. Almost all of the text will be displayed using this style.
A summary is an overview of a work. Summaries are much shorter than the works themselves, but still need to contain the author’s original ideas.
<p>Default paragraph. Almost all of the text will be displayed using this style.</p>
Small text, this style has increased letter-spacing to aid type legibility at small sizes.
A summary is an overview of a work. Summaries are much shorter than the works themselves, but still need to contain the author’s original ideas.
<p class="small">Small text, this style has increased letter-spacing...</p>
Lists
Lists are styled to reduce the amount of identation, giving more room for content on smaller screens. In addition, extra margin is added at the bottom of nested lists to provide adaquate separation. Nested lists use the square list-style-type to increase visibility for low vision users.
- Nunc at commodo est. Sed ex sem, lobortis id leo finibus, gravida posuere est.
- Cras luctus purus a facilisis molestie.
- Donec laoreet vel metus a ornare. Nunc rhoncus est lorem.
- Nunc at commodo est. Sed ex sem, lobortis id leo finibus, gravida posuere est.
- Cras luctus purus a facilisis molestie.
- Donec laoreet vel metus a ornare. Nunc rhoncus est lorem.
- Donec laoreet vel metus a ornare. Nunc rhoncus est lorem, eget bibendum dolor accumsan
- Donec laoreet vel metus a ornare. Nunc rhoncus est lorem, eget bibendum dolor accumsan
Text wrapping
To control how phrases or hypenated words are wrapped over lines, use the nowrap class rather than a line break. This accounts for multiple screen widths. Try to limit the number of words that are wrapped in the tag.
<span class="nowrap">RMIT Library</span>Pseudo headings
Use sparingly, when you want to display a certain size heading without disrupting the symantics.
This is h1 heading
<p class="h1">This is h1 heading</p>
This is h2 heading
<p class="h2">This is h2 heading</p>
This is h3 heading
<p class="h3">This is h3 heading</p>
This is h4 heading
Sized to be the same size as the lead paragraph.
<p class="h4">This is h4 heading</p>
This is h5 heading
This heading is sized to match the default paragraph text. Avoid placing it directly before a lead paragraph; use an h4 heading or higher instead.
<p class="h5">This is h5 heading</p>
This is h6 heading
Same size as h5, use sparingly.
<p class="h6">This is h6 heading</p>
Referencing
When displaying references, it might be appropriate to use the class small to reduce to the text size. To display the reference in asa format, simply use the class asa. This will display the reference with a hanging indent.
Cherrington DJ and England JL (1980) 'The desire for an enriched job as a moderator of the enrichment-satisfaction relationship', Organizational Behavior and Human Performance, 25(1)139-159, doi:10.1016/0030-5073(80)90030-6.
Solomon, L.J., & Rothblum, E.D. (1984). Academic procrastination: Frequency and cognitive-behavioral correlates. Journal of Counseling Psychology, 31(4), 503-509. https://doi.org/10.1037/0022-0167.31.4.503
<p class="small">Reference goes here</p>
<p class="apa small">Reference goes here</p>
