Typography
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.
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. 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.
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.
Hyperlinks
As a general rule, we don’t recommend using hyperlinks in heading copy. Headings should be used as information or section titles, so in a case where you want to add a hyperlink we recommend adding a button.
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.
Heading 1 - Alpha Impact
This display type can give greater impact where necessary, especially on larger screen sizes. The impact class is intended as an alternative class style for alpha and should not be used with any other typography class. We recommend that it is only used when paired with an emblematic image and where there is adequate white space around the text.
When using this impact class, copy should be kept short and punchy to ensure maximum impact on the page. Using the impact font with long lines of copy will impose too much on the rest of the page content and should be avoided.
We recommend the impact font is used with no more than 3 lines of copy on desktop and no more than 4 lines of copy on mobile. It is recommended that these 5 rules are followed before the impact font is considered:
- No more than 3 lines of copy on desktop and no more than 4 lines of copy on mobile.
- Only to be used on the first visible content block.
- Content block to include an emblematic image.
- Adequate white space within the content block.
- Device or window width must be 1400px or above on large devices. Devices between mobile breakpoint and 1400px should revert back to using the Alpha font.
Incredible in every detail
<h1 class="rc-alpha rc-alpha--impact">Incredible in every detail</h1>Copied!
Heading 1 - Alpha Text
Incredible in every detail
<h1 class="rc-alpha">Incredible in every detail</h1>Copied!
Heading 2 - Beta Text
Incredible in every detail
<h2 class="rc-beta">Incredible in every detail</h2>Copied!
Heading 3 - Gamma Text
Incredible in every detail
<h3 class="rc-gamma">Incredible in every detail</h3>Copied!
Heading 4 - Delta Text
Incredible in every detail
<h4 class="rc-delta">Incredible in every detail</h4>Copied!
Heading 5 - Espilon Text
Incredible in every detail
<h5 class="rc-espilon">Incredible in every detail</h5>Copied!
Heading 6 - Zeta Text
Incredible in every detail
<h6 class="rc-zeta">Incredible in every detail</h6>Copied!
Type Styles
Careful consideration has been taken to make text work at different sizes with a consistent letter-spacing and line-height for each. The following are examples of main copy sizes. 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 copy.
Intro Copy
Incredible in every detail
<p class="rc-intro">Incredible in every detail</p>Copied!
Large Intro Copy
Incredible in every detail
<p class="rc-large-intro">Incredible in every detail</p>Copied!
Body Copy
Incredible in every detail
<p class="rc-body">Incredible in every detail</p>Copied!
Large Body Copy
Incredible in every detail
<p class="rc-large-body">Incredible in every detail</p>Copied!
Meta Text
<span class="rc-meta">Incredible in every detail</span>Copied!
Numeric Copy
<span class="rc-numeric">Incredible in every detail</span>Copied!
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 |
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. 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.
<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
<a class="rc-styled-link" href="#">inline anchor link</a>Copied!
Abbreviation
<abbr title="Royal Canin Web Design Langugae">RCDL</abbr>Copied!
Bold
<strong>Stylistically different</strong>Copied!
Line Break
wherever it is placed.
<br />Copied!
Citation
<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
<dfn id="def-internet">The Internet</dfn>Copied!
Delete insert
<del>some</del>
<ins>a piece of</ins>Copied!
Emphasis
<em>stress emphasis</em>Copied!
Italic
<i>set off</i>Copied!
Keyboard input
<kbd>cmd</kbd>
<kbd>c</kbd>Copied!
Highlight
<mark>highlight</mark>Copied!
Inline quotation
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
<s>some information</s>Copied!
Small
<small>smallprint</small>Copied!
Span
<span class="color: red;">styling</span>Copied!
Strong
<strong>importance.</strong>Copied!
Subscript
<sub>2</sub>Copied!
Superscript
<sup>superscript</sup>Copied!
Time
<time datetime="1989-11-18T00:00">November 18 1989</time>Copied!
Underline
<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
<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!
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
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