Fonts

Oxfordshire County Council websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields.

We recommend a font system that uses two open-source font families:

• Fira Sans - for headings
• Open Sans - for body text and menu links

Open Sans has a neutral, yet friendly appearance. Both fonts were designed for legibility and can beautifully adapt to a variety of visual styles.

To use our font face, you will need to implement the following line in the head of your project.

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,900|Open+Sans:300,400,600,700" rel="stylesheet">

Or

<style>@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,900|Open+Sans:300,400,600,700&display=swap');</style>

Fira Sans

Font home page - Fira Sans

Open Sans

Font home page - Open Sans

Fonts Sizes

H1 - Main title

Main title Secondary text

<h1>Main title <small>Secondary text</small></h1>

H2 - Main subtitle

Main subtitle Secondary text

<h2>Main subtitle <small>Secondary text</small></h2>

H3 - Section title

Section title Secondary text

<h3>Section title <small>Secondary text</small></h3>

H4 - Section subtitle

Section subtitle Secondary text

<h4>Section subtitle <small>Secondary text</small></h4>

Summary text example

A summary should tell the reader, in one or two short sentences, what the page is about. They can then decide if it is what they were looking for.

<p class="occlss-g-summary-text">A Summary text example.</p>

Paragraph example

A paragraph (from the Greek paragraphos, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

<p>A paragraph text example.</p>

Changelog

1.0.0

• Component Added