Typography

edinburgh.gov.uk uses two typefaces: FF Meta and Open Sans. Both typefaces have fallback system typefaces for if these webfonts fail. No other typefaces are to be used unless approved by contacting web@edinburgh.gov.uk in advance.

FF Meta

FF meta is the City of Edinburgh Council brand typeface. It is used in a variety of ways in print, but on edinburgh.gov.uk it is only used for h1, h2, buttons and very occasional important items (eg. log in/register links in header). It is a commercial typeface that must be used with the correct licence. Under the terms of the licence, this can only be used on websites hosted on subdomains of edinburgh.gov.uk and which are managed by the City of Edinburgh Council. If you are not sure about licensing, please contact web@edinburgh.gov.uk. It replaces the previously used Trebuchet MS. The font stack is MetaWeb-Bold, "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;

Example

The first witness was the Hatter. This is a heading.

Code

HTML

<h1>Header title</h1>

<h2>Header title</h2>

<p class="brand-type">Important item title</p>

Open Sans

Open Sans is the typeface used for everything else on edinburgh.gov.uk. It is optimized for legibility and is available in a large number of weights and styles. It has an open license and was commisioned by Google. It replaces the previously used Verdana. The font stack is 'Open Sans', Verdana, sans-serif;

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsam voluptatem quidem! Officia, atque odit corporis vel qui laudantium dignissimos doloribus mollitia similique, reiciendis quasi in dolores? Consequuntur, dolores quasi. Vero ipsam, minima delectus quia adipisci facere rem quaerat sapiente nesciunt quam dolorem distinctio dolor placeat fugiat doloribus nulla, quos soluta, velit ipsa? Expedita, architecto enim distinctio dolorem atque id.

Code

HTML

<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing</strong> elit. Excepturi ipsam voluptatem quidem! Officia, atque odit corporis <em>vel qui laudantium</em> dignissimos doloribus mollitia similique, reiciendis quasi in dolores? Consequuntur, dolores quasi. Vero ipsam, minima delectus quia adipisci facere rem quaerat sapiente nesciunt quam dolorem distinctio dolor placeat fugiat doloribus nulla, quos soluta, velit ipsa? Expedita, architecto enim distinctio dolorem atque id.</p>

<h2 class="standard-type">Heading title</h2>