Typography
Font
If your service is on a subdomain of gov.gr you must use the Roboto font.
Headings
Headings with captions
Sometimes you may need to make it clear that a page is part of a larger section or group. To do this, you can use a heading with a caption above it.
If the caption should be considered part of the page heading, you can also nest
the caption within the <h1>.
Paragraphs
Body
The default paragraph font size is 19px on large screens and 16px on small screens.
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.
Body small
You can use the govgr-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.
Font override classes
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.
Font size
The full GOV.GR typography scale goes from 14px up to 72px 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.
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.
Bold text
You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.
For example, “Your reference number is ABC12345678. Use this to track your application. Updates will be sent to name@example.com“
Use bold sparingly. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.
Hint
Hint can be used in form pages as secondary label text. It gives an extra hint description to the form.
Links
Links use the link colors and they are underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
External links
If it’s an external link to a non-government website, make that clear in the link text. For example, ‘read advice on writing link text from [name of organisation]’. There’s no need to say explicitly that you’re linking to an external site. Do not use an external link icon.
Opening links in a new tab
Avoid opening links in a new tab or window. It can be disorienting - and can cause accessibility problems for people who cannot visually perceive that the new tab has opened.
If you need a link to open in a new tab - for example, to stop the user losing information they’ve entered into a form - then include the words ‘opens in new tab’ as part of the link. There’s no need to say ‘tab or window’, since opening in a new tab is the default behaviour for most browsers.
Include rel="noreferrer noopener" along with target="_blank" to reduce the risk of reverse tabnabbing. The following example shows how to do this in HTML.
If you’re displaying lots of links together and want to save space and avoid repetition, consider doing both of the following:
- adding a line of text before the links saying ‘The following links open in a new tab’
- including
<span class="govgr-visually-hidden">(opens in new tab)</span>as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers
Links without underlines
Use the govgr-link--no-underline modifier class to remove underlines from links.
Only do this if the context tells the user that the text is a link, even without the underline.
For example, links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are, at the same place, across different pages.
Links on dark backgrounds
Use the govgr-background-dark class to show white links on dark backgrounds — for example, in headers, custom components, and patterns with darker backgrounds.
Make sure all users can see the links — the white links and background colour must have a contrast ratio of at least 4.5:1.
Links on dark backgrounds and no underline
Use the govgr-background-dark class to show white links on dark backgrounds — for example, in headers, custom components, and patterns with darker backgrounds.
Make sure all users can see the links — the white links and background colour must have a contrast ratio of at least 4.5:1.
Lists
Use lists to make blocks of text easier to read, and to break information into manageable chunks.
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.
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.
Adding extra spacing between list items
If a list is hard to read because the items run across multiple lines you can add extra spacing.
Section break
You can use the govgr-section-break classes on an <hr> element to create a thematic break between sections of content. govgr-section-break has class-based modifiers for different size margins.
By default govgr-section-break is only visible by its margin. You can add the govgr-section-break--visible class to make it visible with a separator line.