Typography

Heading tags, wherever possible, should have an accompanying Header class applied to them to change their appearance. Thanks to the HTML5 document outline algorithm, multiple content roots are available on any HTML5 marked up webpage, therefore, in short, multiple <h1> tags can be used.

Typeface and type styles explained

We use DIN Pro for all of our typography at varying sizes and weights. DINDin is a realist sans-serif typeface and it plays a major role in our brand and reinforces each message by its consistent use.

Din Pro Regular

Din Pro Regular is implemented through standard <p>, <li>, <span> and <label> tags.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnpqrstuvwxyz
123456789

Din Pro Medium

Din Pro Medium is implemented through standard <b> tags.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnpqrstuvwxyz
123456789

Type Styles

Careful consideration has been taken to make headings work at different sizes with a consistent letter-spacing and line-height for each. The following are examples of main heading sizes listed from H1 to H6.

Global header tag replacement

There is the option to include the class rc-replace-header-styles on any element and any h1-h6 tag will then inherit the styles below alpha-zeta. This is a convenient way to style the heading tags but explicit class use is preferred as styles should not be bound to markup. An example of when this class would fail would be when we have a page with a H1 title that should be styled as alpha, but the page also includes some section or article elements that also contain h1 tags.

Type examples

Heading tags, wherever possible, should have an accompanying Header class applied to them to change their appearance. Thanks to the HTML5 document outline algorithm, multiple content roots are available on any HTML5 marked up webpage, therefore, in short, multiple <h1> tags can be used. Typography styles are documented below in suggested display variation and size. Font sizes can be handled with the appropriate classes on implementation. A modifier class can be used to change the colour of the Heading.

Examples

Heading examples

Typography styles are documented below in suggested display variation and size. Font sizes can be handled with the appropriate classes on implementation. A modifier class can be used to change the colour of the Heading.

Global heading tag replacement

There is the option to include the class rc-replace-header-styles on any element and any h1-h6 tag will then inherit the styles below alpha-zeta. This is a convenient way to style the heading tags but explicit class use is preferred as styles should not be bound to markup.
An example of when this class would fail would be when we have a page with a H1 title that should be styles as alpha, but the page also includes some section or article elements that also contain h1 tags.

Incredible in every detail
Heading 1 (.rc-alpha)
Heading 1 (.rc-alpha) hyperlink
Incredible in every detail
Heading 2 (.rc-beta)
Heading 2 (.rc-beta) hyperlink
Incredible in every detail
Heading 3 (.rc-gamma)
Heading 3 (.rc-gamma) hyperlink
Incredible in every detail
Heading 4 (.rc-delta)
Heading 4 (.rc-delta) hyperlink
Incredible in every detail
Heading 5 (.rc-espilon)
Heading 5 (.rc-espilon) hyperlink
Incredible in every detail
Heading 6 (.rc-zeta)
Heading 6 (.rc-zeta) hyperlink
Incredible in every detail
Intro text (.rc-intro)
Incredible in every detail
Large context intro text (.rc-large-intro)
Incredible in every detail
Body text (.rc-body)
Incredible in every detail
Large context body text (.rc-large-body)
Incredible in every detail
Meta/taxonomy text (.rc-meta)
Incredible in every detail
Numeric (.rc-numeric)

Modifier Classes

The Design Language has a selection of modifiers for various type styles. These modifiers allow us to keep the Design Language codebase lean and ensure that our digital properties are easy to scale and upgrade.

Hero styling

Hero styling is to be used only for brand hero messages where appropriate. The hero style is also used in primary navigation items for visual balance. The hero class modifier will change the primary style from Sentence case to Uppercase. .rc-header--hero

Medium styling

This class will change the primary style from DINPro Regular to DINPro Medium. It is used particularly for hyperlinks and should be used sparingly. It is not recommended to use DINPro medium for navigation items. .rc-header--md

Dark styling

This will change the primary type style from ‘Brand1’ to ‘Text’. It is specifically used for hyperlinks. .rc-header--iconography

Interactive styling

This will change the primary style to uppercase, default colour of ‘Text’, hover state of ‘Brand1’ and an active class of ‘Brand1’. This interactive style does not have a visited state as its expected use is primarily in page navigation. .rc-header--interactive

Font-family fallbacks

In some case it's not possible to use our proprietary DIN font family on digital projects. This is usually the case on non Royal Canin external websites such as retail partners and email templates. The CSS font-family hierarchy in such cases is as follows:

  • RC TYPE
  • Helvetica
  • Arial
  • Sans-serif

Usage of paragraph typography

Paragraph

As well as any paragraphs, <p> tags should be wrapped around any text as a default until another tag becomes more appropriate. Media queries can be used to increase the overall size of the default body copy, which is inherited by all paragraphs, but it should not be any smaller than font-size: 0.875em. Any change in font size should be expressed in em or rem units and not pixels.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Paragraph with inline icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Use with inline icon. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Use with inline icon. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Use with inline icon. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="rc-inline-icon"><span class="rc-icon rc-watchdog rc-iconography"></span>Use with inline icon. </span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="rc-inline-icon"><span class="rc-icon rc-nutritional rc-iconography"></span>Use with inline icon. </span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="rc-inline-icon"><span class="rc-icon rc-grooming rc-iconography"></span>Use with inline icon. </span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Paragraph - enforced typeface

When working with third party plugins/extensions etc sometimes a different typeface might be applied and may not gain the properties from the casecading styles. To overcome this you can use the rc--font class to enforce the Royal Canin type style.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p class="rc--font">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Paragraph with image

Images can be inserted within blocks of paragraph text and positioned so that the text floats around the image. Available classes are:

  • media--alignleft
  • media--alignright
  • media--aligncenter
These classes are intended strictly for positioning <img /> and <figure> tags around paragraph text and will not work when applied to any other element. For positioning any other element or outside the context of positioning images around paragraph text, please use the available grid and layout classes. The align[value] rules impose a maximum width on the <img /> or <figure> tag to which it is applied. This is to ensure that text is able to wrap around it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

An awesome picture
This image is wrapped inside a figure tag with the alignleft class. This is the figcaption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure class="rc-media--alignleft">
  <img src="/assets/images/img-paragraph-with-image.jpg" alt="An awesome picture">
  <figcaption>This image is wrapped inside a figure tag with the alignleft class. This is the figcaption.</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Horizontal rule, divider

Horizontal rules are used to help visually define the start and end of components, help break up sections of content in a clean and minimalistic way. There are two colour and two thickness versions. Classes you can use to create dividers:

  • rc-divider
  • rc-divider--light
  • rc-divider--thick
Can be used with the 40px margin spacer to space between content sections and forms.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr class="rc-divider rc-margin-y--md" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr class="rc-divider--light rc-margin-y--md" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr class="rc-divider rc-divider--thick rc-margin-y--md" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr class="rc-divider--light rc-divider--thick rc-margin-y--md" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        

Inline Anchor Link

This text contains an inline anchor link
html
            This text contains an <a class="rc-styled-link" href="#">inline anchor link</a>
        

Abbreviation

Provide a description for an abbreviated term, such as RCDL.
html
            Provide a description for an abbreviated term, such as <abbr title="Royal Canin Web Design Langugae">RCDL</abbr>.
        

Bold

Stylistically different from normal text, without conveying any special importance or relevance.
html
            <b>Stylistically different</b> from normal text, without conveying any special importance or relevance.
        

Line Break

Produces a line break
wherever it is placed.
html
            Produces a line break <br />
wherever it is placed.
        

Citation

Use as a reference to the source of some information. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite Provide a description for an abbreviated term, such as RCDL.
html
            Use as a reference to the source of some information. <cite>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite</cite>
Provide a description for an abbreviated term, such as <abbr title="Royal Canin Web Design Langugae">RCDL</abbr>.
        

Delete/Insert

Used to display edits to some a piece of text.
html
            Used to display edits to <del>some</del> <ins>a piece of</ins> text.
        

Defining Instance

The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
html
            <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
        

Emphasis

Used to add stress emphasis to some text.
html
            Used to add <em>stress emphasis</em> to some text.
        

Italic

Used to represent text that is set off from the normal text. Examples include technical terms, foreign language phrases, or fictional character thoughts.
html
            Used to represent text that is <i>set off</i> from the normal text. Examples include technical terms, foreign language phrases, or fictional character thoughts.
        

Keyboard Input

To copy text on a Mac, use the cmd + c keys.
html
            To copy text on a Mac, use the <kbd>cmd</kbd> + <kbd>c</kbd> keys.
        

Highlight

Used to highlight some text.
html
            Used to <mark>highlight</mark> some text.
        

Inline Quotation

Used to represent short inline quotations where the cite attribute points to the source. For long quotations use the blockquote element.
It is not enough to have a good mind; the main thing is to use it well. - Rene Descartes
html
            Used to represent short inline quotations where the cite attribute points to the source. For long quotations use the blockquote element. <br /> <q cite="https://www.brainyquote.com/quotes/quotes/r/renedescar100799.html">It is not enough to have a good mind; the main thing is to use it well.</q> - Rene Descartes
        

Outdated

Used to represent some information that is no longer accurate.
html
            Used to represent <s>some information</s> that is no longer accurate.
        

Small

Used to represent smallprint.
html
            Used to represent <small>smallprint</small>.
        

Span

A generic inline container. Can be used for styling or to represent shared values. Should only be used when no other semantic element is apporpriate.
html
            A generic inline container. Can be used for <span class="color: red;">styling</span> or to represent shared values. Should only be used when no other semantic element is apporpriate.
        

Strong

Used to give text importance.
html
            Used to give text <strong>importance.</strong>
        

Subscript

Used to represent sub text, such as H2O.
html
            Used to represent sub text, such as H<sub>2</sub>O.
        

Superscript

Used to represent superscript text.
html
            Used to represent <sup>superscript</sup> text.
        

Time

html
            <time datetime="1989-11-18T00:00">November 18 1989</time>
        

Underline

Used to underline a piece of text.
html
            Used to <u>underline a piece of text.</u>
        

Inline icon

Use with inline icon

Use with inline icon

Use with inline icon

Use with inline icon

Use with inline icon
Use with inline icon
Use with inline icon Use with inline icon
html
            <h1 class="rc-alpha rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h1>
<h2 class="rc-beta rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h2>
<h3 class="rc-gamma rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h3>
<h4 class="rc-delta rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h4>
<h5 class="rc-espilon rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h5>
<h6 class="rc-zeta rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h6>
<span class="rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</span>
<span class="rc-header-with-icon rc-header-with-icon--gamma"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</span>
        

Accessibility

Text contrast ratios

The rationale behind text contrast ratios is to make sure that users can read text that is presented over a background. This is especially important for people with moderately low vision. The defined ratios are the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). If the background is a solid color then the relative luminance of the text can be maintained by making sure that each of the text letters have 4.5:1 contrast ratio with the background. For Success Criterion 4.5:1, this technique relaxes the 7:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold). Minimum: 4.5:1 Preferred: 7:1 Contrast ratios can be checked and validated using the following link ‘Text’ is colour compliant to a AA standard at any type size and to a AAA standard at 18pt and above (https://snook.ca/technical/colour_contrast/colour.html#fg=666666,bg=FFFFFF).

Text sizes

We recommend for accessibility on any Royal Canin digital projects that text size does not fall below 14pt or 12pt if bold as an absolute minimum if required. These guidelines follow general best practice considerations for accessibility. More info can be found on the The World Wide Web Consortium site

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 24th October 2018 [ui_assets/brand_identity/typography.yml]
    Update divider example
  • 17th October 2018 [ui_assets/brand_identity/typography.yml]
    Add documentation and example of divider element.
  • 16th October 2018 [ui_assets/brand_identity/typography.yml]
    Update typography.yml
  • 12th October 2018 [ui_assets/brand_identity/typography.yml]
    Add option for adding hyperlink to typography elements.
  • 21st September 2018 [ui_assets/brand_identity/typography.yml]
    Add header with icons example to typography page
  • 13th September 2018 [ui_assets/brand_identity/typography.yml]
    Grammar fixes
  • 25th July 2018 [ui_assets/brand_identity/typography.yml]
    prefix styled-link
  • 12th July 2018 [ui_assets/brand_identity/typography.yml]
    Portal now gets the icon data over the cdn.
  • 11th July 2018 [ui_assets/brand_identity/typography.yml]
    Added prefix to cards and type. Added prefix test page.
  • 6th April 2018 [ui_assets/brand_identity/typography.yml]
    Standardised small, medium, large to sm, md, lg for consistency
  • 6th April 2018 [ui_assets/brand_identity/typography.yml]
    Updated spacer classes across all templates
  • 7th March 2018 [ui_assets/brand_identity/typography.yml]
    Removed redundant icon class from alert tip
  • 27th February 2018 [ui_assets/brand_identity/typography.yml]
    Replaced icon classes
  • 19th February 2018 [ui_assets/brand_identity/typography.yml]
    Convert all multi line text to use
  • 4th February 2018 [ui_assets/brand_identity/typography.yml]
    Update alert classes to use btn--icon
  • 4th February 2018 [ui_assets/brand_identity/typography.yml]
    Made headings smaller and removed bottom border on typography examples
  • 1st February 2018 [ui_assets/brand_identity/typography.yml]
    Updated icon classes
  • 22nd January 2018 [ui_assets/brand_identity/typography.yml]
    Reworded usage of medium and regular fonts.
  • 18th January 2018 [ui_assets/brand_identity/typography.yml]
    Added alerts for typography. Removed redundant background colour utility class examples. Added extra info to gulp release task.
  • 20th December 2017 [ui_assets/brand_identity/typography.yml]
    Fixed documentation that wasn't render or missing.
  • 14th December 2017 [ui_assets/brand_identity/typography.yml]
    Added html attribute for code highlighting. Added improved class names.
  • 14th December 2017 [ui_assets/brand_identity/typography.yml]
    Added typography template. Added content for typography page. Amended medium-up classes.
  • 13th December 2017 [ui_assets/brand_identity/typography.yml]
    Merged type face with type styles to make typography. Updated medium up class in templates.
  • 1st December 2017 [ui_assets/brand_identity/typography.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/brand_identity/typography.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/brand_identity/typography.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 9th October 2017 [ui_assets/brand_identity/typography.yml]
    Changed div to span on Type Styles page
  • 9th October 2017 [ui_assets/brand_identity/typography.yml]
    Added gap between type styles
  • 28th September 2017 [ui_assets/brand_identity/typography.yml]
    Correct yml formatting.
  • 28th September 2017 [ui_assets/brand_identity/typography.yml]
    Included information about global type style class.
  • 12th September 2017 [ui_assets/brand_identity/typography.yml]
    REduced p tags used in type style intro text.
  • 8th September 2017 [ui_assets/brand_identity/typography.yml]
    Update portal to 1.4.2 and fix typo in typestyles path.
  • 19th July 2017 [ui_assets/brand_identity/typography.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/brand_identity/typography.yml]
    Git commit message sync improvements. Folder restructure.
  • 15th July 2017 [ui_assets/brand_identity/typography.yml]
    Copy and markup improvements.
  • 11th July 2017 [ui_assets/brand_identity/typography.yml]
    Added remaining content.