Support GitHub Home Style Guide Logotype Icons Colours Typography Web Applications Corporate UI JS Frameworks Scania Bootstrap UIaaS Support Mobile Apps

Scania Sans

The typeface that we use in our internal och external communication is called Scania Sans. The typeface comes in a few cuts; Regular, Bold, Italic, Headline, Headline Bold as well as Condensed, Condensed Bold and a Condensed Italic version. The typeface is an important part of how we communicate the Scania brand.

Scania Sans Regular
Scania Sans Bold
Scania Sans Italic
Scania Sans Headline
Scania Sans Headline Bold
Scania Sans Condensed
Scania Sans Condensed Bold
Scania Sans Condensed Italic

Public Headers

Public headers are used on sites where we communicate with users outside of the Scania Network, for example fleet owners, potential new customers and journalists. Basically, the public headers are stronger and bolder than what we use for internal applications. They are most often written in uppercase and the headers should be short, yet still descriptive. Most headers for external use are center aligned.

Header 1

<h1>Your text</h1>

Header 2

<h2>Your text</h2>

Header 3

<h3>Your text</h3>

Header 4

<h4>Your text</h4>
Header 5
<h5>Your text</h5>
Header 6
<h6>Your text</h6>

Article Headers

Headers within the HTML article element should be used for traditionall documents like reports and news articles. The headers are smaller than our other headers to balance better with a smaller bread text. Basically, they are styled for high readability and to work good in print.

Header 1

<h1>Your text</h1>

Header 2

<h2>Your text</h2>

Header 3

<h3>Your text</h3>

Header 4

<h4>Your text</h4>
Header 5
<h5>Your text</h5>
Header 6
<h6>Your text</h6>

Application Headers

We use the headers slightly differently when it comes to external and internal communication. Below you'll find basic styles and corresponding HTML tags to be used to achive the correct header.

Header 1

<h1>Your text</h1>

Header 2

<h2>Your text</h2>

Header 3

<h3>Your text</h3>

Header 4

<h4>Your text</h4>
Header 5
<h5>Your text</h5>
Header 6
<h6>Your text</h6>

Stylesheets

<link rel="stylesheet" type="text/css" href="https://static.scania.com/resources/fonts/scania-sans/scania-sans.css">

The Scania Sans stylesheet should be linked into your application using the tag above. This ensures us that every user of the font has the latest version of it.

Cyrillic Fonts

All Scania Sans fonts are available in cyrillic versions. They are included in the Corporate UI setup. If needed for applications on a stand alone basis, then include the CSS mentioned above and the cyrillic fonts will be loaded when needed.

Лорем ипсум долор сит амет Scania Sans Regular
еу ерат дефиниебас про Scania Sans Bold
еу ерат дефиниебас про Scania Sans Italic
Яуи иусто омниум но Scania Sans Headline
ин денияуе репримияуе пер Scania Sans Headline Bold
ид ест сонет малорум легимус Scania Sans Condensed
Ат мутат епицури перципитур дуо Scania Sans Condensed Bold
ан сеа епицури пертинациа Scania Sans Condensed Italic