Styles - Typography
Our fonts and typographic styles, and how to apply them.
Arial
Arial and Helvetica Neue are the established brand fonts for the HSE as part of our visual identity. In the digital design sphere, we primarily use Arial for its wider availability and compatibility across platforms.
Fallback font
Default to sans-serif when Arial isn't available.
font-family: Arial, sans-serif;
Headings
<h1 class="hse-heading-xl">hse-heading-xl</h1>
<h2 class="hse-heading-l">hse-heading-l</h2>
<h3 class="hse-heading-m">hse-heading-m</h3>
<h4 class="hse-heading-s">hse-heading-s</h4>
<h5 class="hse-heading-xs">hse-heading-xs</h5>Paragraphs
Body
The default paragraph font size is 19px.
<p class="hse-body">hse-body</p>You can also add classes to create a lead paragraph or smaller body copy to convey hierarchy in your page.
Lead paragraph
A lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content. Lead paragraphs use 24px type on desktop and should only be used once per page if needed.
<p class="hse-body-l">hse-body-l</p>Body small
You can use the hse-body-s class sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
The majority of your body copy should use the standard 19px paragraph size.
<p class="hse-body-s">hse-body-s</p>Font override classes
In special cases you might need to set the font size or font weight of an element outside of the predefined heading and paragraph classes. For this you can use the font override classes in your HTML or reference the typography mixins in your own components.
It's important to note here, however, that such cases should be exceptions rather than the norm. Our design system aims to standardise styles across our UI elements. Deviations from the design system can lead to inconsistencies in the UI, making it less predictable and harder to maintain. If they occur frequently, it might indicate a need to revise and update our styles.
Font size
The full HSE.ie typography scale goes from 16px up to 64px on large screens. You can add these font size override classes to any other typographic class or element and they will change the font size.
<p class="hse-u-font-size-64">hse-u-font-size-64</p>
<p class="hse-u-font-size-48">hse-u-font-size-48</p>
<p class="hse-u-font-size-32">hse-u-font-size-32</p>
<p class="hse-u-font-size-24">hse-u-font-size-24</p>
<p class="hse-u-font-size-22">hse-u-font-size-22</p>
<p class="hse-u-font-size-19">hse-u-font-size-19</p>
<p class="hse-u-font-size-16">hse-u-font-size-16</p>
<p class="hse-u-font-size-14">hse-u-font-size-14</p>Font weight
As with the font size, you can add a font weight override class to any other typographic class or element to change the font weight to regular or bold weight.
<p class="hse-u-font-weight-normal">hse-u-font-weight-normal</p>
<p class="hse-u-font-weight-bold">hse-u-font-weight-bold</p>Links
Links are blue and underlined by default with a styled focus state for people who use keyboards or other devices to navigate through a page.
If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
<a href="#" class="hse-link">Link</a>If it's not helpful to distinguish between visited and unvisited states, for example when linking to pages with frequently-changing content, such as the dashboard for an admin interface, use the hse-link--no-visited-state modifier class.
<a href="#" class="hse-link hse-link--no-visited-state">Link hse-link--no-visited-state</a>Lists
Use lists to make blocks of text easier to read, and to break information into manageable chunks.
<ul class="hse-list">
<li><a href="#">Money, work and benefits</a></li>
<li><a href="#">Care after a hospital stay</a></li>
<li><a href="#">Support and benefits for carers</a></li>
</ul>Bulleted lists
Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.
<p>Symptoms can include:</p>
<ul class="hse-list hse-list--bullet">
<li>tiredness and lack of energy</li>
<li>shortness of breath</li>
<li>noticeable heartbeats (heart palpitations)</li>
<li>pale skin</li>
</ul>Numbered lists
Use numbered lists instead of bulleted lists when the order of the items is relevant.
You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.
<h3>How to gargle with salt water</h3>
<ol class="hse-list hse-list--number">
<li>Dissolve half a teaspoon of salt in a glass of warm water.</li>
<li>Gargle with the solution then spit it out – don't swallow it.</li>
<li>Repeat as often as you like.</li>
</ol>Section break
You can use the hse-section-break classes on an <hr> element to create a thematic break between sections of content. hse-section-break has class-based modifiers for different size margins.
By default hse-section-break is only visible by its margin. You can add the hse-section-break--visible class to make it visible with a separator line.
<hr class="hse-section-break hse-section-break--xl hse-section-break--visible">
<hr class="hse-section-break hse-section-break--l hse-section-break--visible">
<hr class="hse-section-break hse-section-break--m hse-section-break--visible">
<hr class="hse-section-break hse-section-break--visible">Text alignment
Left-align text in English. Text is left-aligned by default.
The straight edge of left-aligned text helps people who use screen magnifiers. It saves them having to search around the screen for the next line or item. People who use magnifiers may miss things that are not left-aligned.
Some people with cognitive differences have difficulty with blocks of text that are justified (aligned to left and right margins).
Only centre-align or fully justify text if you can show a clear clinical or user need.
Text alignment override classes
For translations into languages that run right to left (like Arabic), right-align instead. You need to use the text alignment override class in your HTML to right-align text.
Here is an example of Arabic.
<p class="hse-u-text-align-right">تعديل اتجاه الكتابة باللغة العربية ليكون من اليمين الى اليسار</p>Updated: September 2023