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 to16px - a default line height,
$line-height-base, is set to1.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.
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.
<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>Links
These styles are applied globally, and are usually inherited by other styles, to give a consistent link style.
- a default link colour,
$link-color, is set - an underline is applied on hover
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><mark></code> tag for <mark>highlighting text</mark>.</p>
<p>Use the <code><del></code> tag for <del>deleted text</del>.</p>
<p>Use the <code><s></code> tag for <s>text which is no longer accurate</s>.</p>
<p>Use the <code><ins></code> tag for <ins>additional, or inserted, text</ins>.</p>
<p>Use the <code><b></code> tag for <b>highlighting text without denoting additional importance</b>.</p>
<p>Use the <code><i></code> tag for <i>technical terms</i>.</p>
<p>Use the <code><small></code> tag for <small>text with less importance</small>.</p>
<p>Use the <code><u></code> tag for <u>underlined text</u>.</p>
<p>Use the <code><strong></code> tag for <strong>emboldened text</strong>.</p>
<p>Use the <code><em></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.
<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.
<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.
<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.
Some common and recommended examples are shown below. More examples can be found in Testbed sample #0036.
British Antarctic Survey
High Cross, Madingley Road
Cambridge
CB3 0ET
United Kingdom
Email: magic@bas.ac.uk
Tel: +44 (0)1223 221400
Web: www.bas.ac.uk/team/magic Connie Watson
Atmospheric Chemist
British Antarctic Survey
Email: conwat@bas.com
ORCiD: https://sandbox.orcid.org/0000-0001-8373-6934
<address>
<strong>Mapping and Geographic Information Centre (MAGIC)</strong><br>
<strong>British Antarctic Survey</strong><br>
High Cross, Madingley Road<br>
Cambridge<br>
CB3 0ET<br>
United Kingdom<br>
<i class="far fa-fw fa-at" aria-hidden="true"></i> <abbr title="Email address">Email:</abbr> magic@bas.ac.uk<br>
<i class="far fa-fw fa-phone-rotary" aria-hidden="true"></i> <abbr title="Telephone">Tel:</abbr> +44 (0)1223 221400<br>
<i class="far fa-fw fa-globe" aria-hidden="true"></i> <abbr title="Website">Web:</abbr> <a href="https://www.bas.ac.uk/team/magic">www.bas.ac.uk/team/magic</a>
</address>
<address>
<strong>Connie Watson</strong><br>
<strong><em>Atmospheric Chemist</em></strong><br>
<strong>British Antarctic Survey</strong><br>
<i class="far fa-fw fa-at" aria-hidden="true"></i> <abbr title="Email address">Email:</abbr> <a href="mailto:#">conwat@bas.com</a><br>
<i class="fab fa-fw fa-orcid bsk-orcid-id" aria-hidden="true"></i> <abbr title="ORCID iD">ORCiD:</abbr> <a href="https://sandbox.orcid.org/0000-0001-8373-6934">https://sandbox.orcid.org/0000-0001-8373-6934</a>
</address>Horizontal rule
Use to separate content. Add the .bsk-hr-dashed class for an alternative style.
<hr/><hr class="bsk-hr-dashed" />Muted text
De carne animata corpora quaeritis.
De carne animata corpora quaeritis.
<p class="bsk-text-muted">De carne animata corpora quaeritis.</p>
<p>De carne animata corpora quaeritis.</p>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>