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)
Incredible in every detail
Heading 2 (.rc-beta)
Incredible in every detail
Heading 3 (.rc-gamma)
Incredible in every detail
Heading 4 (.rc-delta)
Incredible in every detail
Heading 5 (.rc-espilon)
Incredible in every detail
Heading 6 (.rc-zeta)
Incredible in every detail
Intro text (.rc-intro)
Incredible in every detail
Body text (.rc-body)

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

Header with icons

This class .rc-header-with-icon can be use to add inline icon to heading.

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

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

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

  • 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.