Typography

Our type system includes 5 different sizes and 3 different weights. All type is set in Graphik with support for Cyrillic and Latin characters.

Design Links

Open in Sketch Cloud

Open in Figma

Licensing information

Licensing is done on a per domain basis and a license can be purchases at Commercial Type.

@import 'node_modules/@hospitality-digital/design-system/css/components/heading.css';
@import 'node_modules/@hospitality-digital/design-system/css/components/label.css';
@import 'node_modules/@hospitality-digital/design-system/css/components/paragraph.css';

Install typeface

After purchasing the typeface you can install and use it with CSS @font-face. Make sure your client can access the font files as static files and implement the follow css example:

@font-face {
  font-family: 'Graphik LCG Web';
  src: url('<path-to-font-files>/Graphik-Bold-Cy-Gr-Web.woff2') format('woff2'),
    url('<path-to-font-files>/Graphik-Bold-Cy-Gr-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik LCG Web';
  src: url('<path-to-font-files>/Graphik-Medium-Cy-Gr-Web.woff2') format('woff2'),
    url('<path-to-font-files>/Graphik-Medium-Cy-Gr-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik LCG Web';
  src: url('<path-to-font-files>/Graphik-Regular-Cy-Gr-Web.woff2') format('woff2'),
    url('<path-to-font-files>/Graphik-Regular-Cy-Gr-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

Desktop

Mobile

On smaller devices only the sizing of Heading 1 and Heading 2 are adjusted. The correct breakpoints are included when using the respective CSS classes. The examples shown below are only meant for documentation purposes.