Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

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. DIN 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 .rc-alpha--impact)
Heading 1 (.rc-alpha .rc-alpha--impact) hyperlink

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

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.

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

Copied!

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.

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

Copied!

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:

Utility Class Description
.media--alignleft Aligns image to left
.media--alignright Aligns image to right
.media--aligncenter Aligns image to center

Copied!

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:

Utility Class Description
.rc-divider Adds a default divider line
.rc-divider--light Adds a light divider line
.rc-divider--thick Adds a thick divider line

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.

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

Copied!

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.

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

Copied!

Inline Anchor Link

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

Copied!

Abbreviation

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

Copied!

Bold

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

Copied!

Line Break

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

Copied!

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.
<cite>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite</cite>
<abbr title="Royal Canin Web Design Langugae">RCDL</abbr>

Copied!

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.
<dfn id="def-internet">The Internet</dfn>

Copied!

Delete insert

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

Copied!

Emphasis

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

Copied!

Italic

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

Copied!

Keyboard input

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

Copied!

Highlight

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

Copied!

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

Copied!

Outdated

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

Copied!

Small

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

Copied!

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.
<span class="color: red;">styling</span>

Copied!

Strong

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

Copied!

Subscript

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

Copied!

Superscript

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

Copied!

Time

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

Copied!

Underline

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

Copied!

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

Copied!

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