Typography
Typeface
The main font used for official communications, headings, and key navigational elements.
Font Name:
- Calibri, as it ensures wide compatibility and readability.
- Weight(s): 700, 600, 400, 300.
- Usage: Primarily used for headings (H1-H5), body content, and navigation menus.
- Fallback font: Helvetica, Arial, Verdana, Sans-serif.
Headings
Headings H1 (Title image)
H1 at 76px for page/article titles.
H2 is not used
Headings (H3-H5): H3 at 50px for main titles, scaling down to H5 at 16px for subheadings.
Body Text
Body Text:
16px with 24px line height for optimal readability on digital platforms.
Captions Image Slider: 14px.
Text Colour Scheme
Headings
Headings for Hero images/video H1 are:
• Hex: #FFFFFF
• RGB: RGB(255, 255, 255)
Headings (H1and H3 to H5) follow the pillar colour palette for each H1 elements within that pillar e.g. H1and H3 to H5 Headings in 'Council' pillar are:
• #D31D20
• rgb(211,29,32)
|
|
Visitor |
Resident |
Business |
Council |
|---|---|---|---|---|
|
HEX |
#015b53 |
#177994 |
#0F2E50 |
#D31D20 |
|
RGB |
rgb(1,91,83) |
rgb(23,121,148) |
rgb(15,46,80) |
rgb(211,29,32) |
Body Text
Body text:
• Hex: #4B5056
• RGB: RGB(75, 80, 86)
Background Color
Off-white (#F9F9F9) for most content areas to reduce glare and improve readability.
Accessibility
Contrast Ratios
Ensuring all text meets or exceeds WCAG 2.1 AA guidelines for text contrast.
Font Size Adjustments
Text is resizable without loss of content or functionality for accessibility.