Webfonts used on the website were selected with weight, legibility and cost in mind. The webfonts selected for the website are currently:
- Noto Sans - (free google font: used in Main titles)
- Rokkitt - (free google font similar to Rockwell: used in sub titles)
- P22 Freely - (cost per usage script font: used in sub titles)
- Verdana - (free system font: used in body copy)
Non Web font used primarily in images:
- Serial Sue - (cost per usage script font: used in image titles)
Web font sizes (desktop)
Titles
H1 - Noto Sans - 30px
H2 - Rokkitt - 30px
H3 - Rokkitt - 24px
Navigation
Main Navigation – Noto Sans – 16px
Main Navigation dropdown primary – Rokkitt 18px
Main Navigation dropdown secondary – Verdana 12px bold
Main Navigation dropdown tertiary –Verdana 12px
Website header
Header Icon Text & cookies – Verdana 12px
Header site search input field - Noto Sans 24px
Header call us - open times - Rokkitt 20px
Header call us - phone number - Rokkitt 30px
Header call us - link - Verdana 12px
Header holiday search title - P22 freely 30px
Header holiday search form fields - Verdana 12px
Breadcrumbs – Verdana 12px
Tabbed Navigation Level 1 & 2 – Noto Sans 15px
Campsite name rules
Campsite page
Campsite name: H1
Region & Country: H3
Site number: 11px Verdana
Campsite & Apartment list Campsite name: 20px Noto Sans
Region & Country: 18px Rokkitt
Search results page
Campsite name: 24px Noto Sans
Region & Country: 20px Rokkitt
Site number: 11px Verdana
Typography in images
The fonts often used in images are Serial Sue, P22 Freely and Rokkitt. When placing fonts in images it is recommended that the following pointers are considered.
- Legibility of type
consider contrast of background, especially when a overlay image goes responsive in a custom component. - Size of type
Due to the variable sizes of mobile devices it is recommended that the minimum font size to use in images is 28px. Also consider the size of fonts across devices. - Shadows
Drop shadows on type do not follow brand guidelines so it is reccommended not to use drop shadows. - Capital letters
The Serial Sue font has some capital letters that look inconsistent to the rest of the font (i.e. M). Where nessasary it is recommended to either use a lowercase letter with an increased size, or possibly consider P22 freely as a replacement.
