Skip to main content

Typography

The table of contents for this page will appear broken as it includes headings used in examples.

Typographic base

These styles are applied globally, and are usually inherited by other styles, to give a consistent typographic base.

  • a default font size, $font-size-base, is set to 16px
  • a default line height, $line-height-base, is set to 1.429
  • a default font family, which applies to most elements, is set to "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

Font families

Three font families are used in the BAS Style Kit, for distinct purposes:

  • a default, sans-serif, font family is used as a catch-all including paragraph text, buttons, etc.
  • a brand, sans-serif, font family is used for high impact areas, such as headings, to match BAS logo font face
  • a monotype, sans-serif, font family is used for distinguishing code from normal text

For each family, a series of fall-back fonts are defined where the primary fonts cannot be loaded.

Font Family Primary Font Fall-back Fonts
Default Open Sans “Helvetica Neue”, Helvetica, Arial, sans-serif
Brand Gill Sans “Helvetica Neue”, Helvetica, Arial, sans-serif
Monotype Menlo Monaco, Consolas, “Courier New”, monospace

Fall-back fonts shown in italics will depend on the browser and operating system used.

For each family, a series of variants are defined for styles such as italics and bold.

Font Family Variant Font Weight Sample
Default (Open Sans) Regular Light (300) Open Sans regular light
Default (Open Sans) Italics Light (300) Open Sans italics light
Default (Open Sans) Regular Regular Open Sans regular regular
Default (Open Sans) Italics Regular Open Sans italics regular
Default (Open Sans) Regular Bold Open Sans regular bold
Default (Open Sans) Italics Bold Open Sans italics bold
Brand (Gill Sans) Regular Light (100) Gill Sans regular light
Brand (Gill Sans) Italics Light (100) Gill Sans italics light
Brand (Gill Sans) Regular Book (200) Gill Sans regular book
Brand (Gill Sans) Italics Book (200) Gill Sans italics book
Brand (Gill Sans) Regular Roman (300) Gill Sans regular roman
Brand (Gill Sans) Italics Roman (300) Gill Sans italics roman
Monotype (Menlo) Regular Regular Menlo regular regular

BAS brand font

Gill Sans is the BAS logo font used for high impact areas such as headings and top-level navigation.

Gill Sans is a protected work and may not be used without a licence

BAS has a licence to use this font its official websites and applications. This licence does not cover non-BAS projects, including personal projects of BAS Staff.

Contact the Web & Applications Team if you are unsure whether a website or application can use the BAS license.

The brand font is applied to these elements:

Element/Component Selector Font Variant Modifications
Footer .bsk-footer-bsk Gill Sans Light Base font + 1px
Navbar .bsk-navbar-bsk Gill Sans Book Base font + 1px
Header .bsk-header-bsk Gill Sans Book Base font + 1px
Headings h1, h2, h3, h4, h5, h6, .bsk-h1, .bsk-h2, .bsk-h3, .bsk-h4, .bsk-h5, .bsk-h6 Gill Sans Book N/A

Headings

In addition to heading elements, you can also use .bsk-h1 - .bsk-h6 classes for styling other elements to look like headings.

Heading 1

De carne animata corpora quaeritis.

Heading 2

De carne animata corpora quaeritis.

Heading 3

De carne animata corpora quaeritis.

Heading 4

De carne animata corpora quaeritis.
Heading 5
De carne animata corpora quaeritis.
Heading 6
De carne animata corpora quaeritis.
<h1>Heading 1</h1>
De carne animata corpora quaeritis.
<h2>Heading 2</h2>
De carne animata corpora quaeritis.
<h3>Heading 3</h3>
De carne animata corpora quaeritis.
<h4>Heading 4</h4>
De carne animata corpora quaeritis.
<h5>Heading 5</h5>
De carne animata corpora quaeritis.
<h6>Heading 6</h6>
De carne animata corpora quaeritis.

Secondary header text

Use the <small> element or the .bsk-small class for adding secondary text to any header.

Heading 1 secondary text
De carne animata corpora quaeritis.
Heading 2 secondary text
De carne animata corpora quaeritis.
Heading 3 secondary text
De carne animata corpora quaeritis.
Heading 4 secondary text
De carne animata corpora quaeritis.
Heading 5 secondary text
De carne animata corpora quaeritis.
Heading 6 secondary text
De carne animata corpora quaeritis.
<div class="bsk-h1">Heading 1 <small>secondary text</small></div>
De carne animata corpora quaeritis.
<div class="bsk-h2">Heading 2 <small>secondary text</small></div>
De carne animata corpora quaeritis.
<div class="bsk-h3">Heading 3 <small>secondary text</small></div>
De carne animata corpora quaeritis.
<div class="bsk-h4">Heading 4 <small>secondary text</small></div>
De carne animata corpora quaeritis.
<div class="bsk-h5">Heading 5 <small>secondary text</small></div>
De carne animata corpora quaeritis.
<div class="bsk-h6">Heading 6 <small>secondary text</small></div>
De carne animata corpora quaeritis.

This example uses header classes instead of elements to avoid issues with the automatic table of contents.

Paragraphs

Paragraphs receive a bottom margin of half their computed line-height (10px by default).

The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to global problems. We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar regions.

<p>The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to global problems.
We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure
that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar
regions.</p>

Lead paragraph

The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to global problems.

We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar regions.

<p class="bsk-lead">The British Antarctic Survey (BAS) is an international leader in Antarctic science that is relevant to
global problems.</p>
<p>We deliver science that is excellent, exciting, and innovative. We also provide world-leading research infrastructure
that enables scientists from the UK, and colleagues from many nations, to work safely and effectively in the polar
regions.</p>

These styles are applied globally, and are usually inherited by other styles, to give a consistent link style.

Inline text elements

Use the <mark> tag for highlighting text.

Use the <del> tag for deleted text.

Use the <s> tag for text which is no longer accurate.

Use the <ins> tag for additional, or inserted, text.

Use the <b> tag for highlighting text without denoting additional importance.

Use the <i> tag for technical terms.

Use the <small> tag for text with less importance.

Use the <u> tag for underlined text.

Use the <strong> tag for emboldened text.

Use the <em> tag for italicised text.

<p>Use the <code>&lt;mark&gt;</code> tag for <mark>highlighting text</mark>.</p>
<p>Use the <code>&lt;del&gt;</code> tag for <del>deleted text</del>.</p>
<p>Use the <code>&lt;s&gt;</code> tag for <s>text which is no longer accurate</s>.</p>
<p>Use the <code>&lt;ins&gt;</code> tag for <ins>additional, or inserted, text</ins>.</p>
<p>Use the <code>&lt;b&gt;</code> tag for <b>highlighting text without denoting additional importance</b>.</p>
<p>Use the <code>&lt;i&gt;</code> tag for <i>technical terms</i>.</p>
<p>Use the <code>&lt;small&gt;</code> tag for <small>text with less importance</small>.</p>
<p>Use the <code>&lt;u&gt;</code> tag for <u>underlined text</u>.</p>
<p>Use the <code>&lt;strong&gt;</code> tag for <strong>emboldened text</strong>.</p>
<p>Use the <code>&lt;em&gt;</code> tag for <em>italicised text</em>.</p>

The <i> tag is also recommended for icons.

Abbreviations

Use to explain/expand abbreviations and acronyms. Additional styles will be applied where a title attribute is used.

BAS is an international leader in Antarctic science that is relevant to global problems.
<abbr title="British Antarctic Survey">BAS</abbr> is an international leader in Antarctic science that is relevant to
global problems.

Blockquotes

Use for quotes, or highlighting portions of an article (pull-quotes).

I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further and discover more than ever before.

<blockquote>
  <p>I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired
  to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest
  oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further
  and discover more than ever before.</p>
</blockquote>

Blockquotes with a source

Use a <cite> wrapped in a <footer> to add source to a blockquote.

I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further and discover more than ever before.

Sir David Attenborough on the naming of the new BAS research ship, from BAS press release.
<blockquote>
  <p>I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired
  to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest
  oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further
  and discover more than ever before.</p>
  <footer>Sir David Attenborough on the naming of the new BAS research ship, from  <cite title="BAS press release">
  <a href="https://www.bas.ac.uk/media-post/uks-200m-polar-research-ship-named-in-honour-of-sir-david-attenborough/">
  BAS press release</a></cite>.</footer>
</blockquote>

Reversed blockquotes

Blockquotes can be aligned right using .bsk-blockquote-reverse.

I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further and discover more than ever before.

Sir David Attenborough on the naming of the new BAS research ship, from BAS press release.
<blockquote class="bsk-blockquote-reverse">
  <p>I am truly honoured by this naming decision and hope that everyone who suggested a name will feel just as inspired
  to follow the ship’s progress as it explores our polar regions. I have been privileged to explore the world’s deepest
  oceans alongside amazing teams of researchers, and with this new polar research ship they will be able to go further
  and discover more than ever before.</p>
  <footer>Sir David Attenborough on the naming of the new BAS research ship, from  <cite title="BAS press release">
  <a href="https://www.bas.ac.uk/media-post/uks-200m-polar-research-ship-named-in-honour-of-sir-david-attenborough/">
  BAS press release</a></cite>.</footer>
</blockquote>

Addresses

Provides formatting for addresses or contact information. Use <br> elements to preserve structure.

British Antarctic Survey
High Cross, Madingley Road
Cambridge
CB3 0ET
United Kingdom
Email: info@bas.ac.uk
Tel: +44 (0)1223 221400
Fax: +44 (0)1223 362616
Web: www.bas.ac.uk
Connie Watson
Atmospheric Chemist
Email: conwat@bas.com
<address>
  <strong>British Antarctic Survey</strong><br>
  High Cross, Madingley Road<br>
  Cambridge<br>
  CB3 0ET<br>
  United Kingdom<br>
  <i class="fas fa-fw fa-at" aria-hidden="true"></i> <abbr title="Email address">Email:</abbr> info@bas.ac.uk<br>
  <i class="fas fa-fw fa-phone" aria-hidden="true"></i> <abbr title="Telephone">Tel:</abbr> +44 (0)1223 221400<br>
  <i class="fas fa-fw fa-fax" aria-hidden="true"></i> <abbr title="Facsimile">Fax:</abbr> +44 (0)1223 362616<br>
  <i class="fas fa-fw fa-globe" aria-hidden="true"></i> <abbr title="Website">Web:</abbr> <a href="https://www.bas.ac.uk">www.bas.ac.uk</a>
</address>

<address>
  <strong>Connie Watson</strong><br>
  Atmospheric Chemist<br>
  <i class="fas fa-fw fa-at" aria-hidden="true"></i> <abbr title="Email address">Email:</abbr> <a href="mailto:#">conwat@bas.com</a>
</address>

Horizontal rule

Use to separate content. Add the .bsk-hr-dashed class for an alternative style.


<hr/>

<hr class="bsk-hr-dashed" />

Primary text

De carne animata corpora quaeritis.

<p class="bsk-text-primary">De carne animata corpora quaeritis.</p>

Experimental text

De carne animata corpora quaeritis.

<p class="bsk-text-experimental">De carne animata corpora quaeritis.</p>

Contextual colours

The standard contextual colours can be used to apply context to text using these classes:

Standard Context Text Contextual Class
Success .bsk-text-success
Warning .bsk-text-warning
Danger .bsk-text-danger
Info .bsk-text-info

In some edge cases these styles will be overridden by other styles, wrapping text in a <span> should fix this.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

<p class="bsk-text-success">De carne animata corpora quaeritis.</p>
<p class="bsk-text-warning">De carne animata corpora quaeritis.</p>
<p class="bsk-text-danger">De carne animata corpora quaeritis.</p>
<p class="bsk-text-info">De carne animata corpora quaeritis.</p>

Alignment

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

<p class="bsk-text-left">De carne animata corpora quaeritis.</p>
<p class="bsk-text-center">De carne animata corpora quaeritis.</p>
<p class="bsk-text-right">De carne animata corpora quaeritis.</p>
<p class="bsk-text-justify">De carne animata corpora quaeritis.</p>
<p class="bsk-text-nowrap">De carne animata corpora quaeritis.</p>

Transformations

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

De carne animata corpora quaeritis.

<p class="bsk-text-lowercase">De carne animata corpora quaeritis.</p>
<p class="bsk-text-uppercase">De carne animata corpora quaeritis.</p>
<p class="bsk-text-capitalize">De carne animata corpora quaeritis.</p>