Typography

Typography is a big part of our identity. When used correctly it helps to create a consistent and coherent look and feel. Our typeface is almost always present in everything that we do and is therefore, an extremely important ingredient in our brand.

Short description

Typography is used to create clear hierarchy throughout the layout. It is the core structure of well designed interfaces. When type scaling is used appropriately it creates intentional flows, user focus, and progressive emphasis.

Typeface

SEB uses SEB Sans Serif for both its Marketing and Product brands. It is a strong but neutral typeface that lends personality to the page without overpowering the content.

Install the Vanilla package or download the font here: https://seb.brandmanual.se/en

Type scale

Have a look at the different sizes of the SEB Sans Serif type face, for both desktop, tablet and mobile devices:

Leading/line height

The line height controls the space between baselines in a block of a text. A text's line height is propotional to its type size. The body text 16 has a line height of 24 px (1.4 rem).

All of the sizes have a line height devidable with eight or 4. Larger font sizes need smaller leading and smaller font sizes need larger leading.

We specify the line height like this:
For the body text (text size) 16 / (line height) 24

Sentence case

We always use sentence case text. This means that the capitalization is just like a standard sentence e.g. "Welcome to our bank".

We avoid using ALL CAPS. This is usually used to differentiate a word or text from another. If you need to create typographical hierarchies, use different font weights, sizes or colours instead.

Accessibility

We primarily use left-aligned typography. Aligned left (or ragged right) is the most readable alignment - it provides the eye with a common starting point for each line. Make sure the lines aren't too long. Try to aim for 7-10 words or 45-65 characters per line. 

In some cases, centered text is allowed. This is usually in digital contexts or in situations where it helps to present information in a more logical way than left-aligned text. This is only suitable for shorter texts of single words.

Default styles

We recommend you use our Default styles for common elements, such as headlines, links and body font family.

Do's and don'ts

  • Try to limit the font sizes to 2-3
  • Do not use ALL CAPS, not even on single WORDS.

Get default styles for common elements, such as headlines, links and body font family.

Specification

Font-weight
  • Light 300
  • Regular 400
  • Medium 500
  • Bold 700

 

Examples

Desktop (above)

Tablet (above)

Mobile (above)

 

Typography

Desktop (above)

Tablet (above)

Mobile (above)

 

Type scale for desktop, tablet and mobile

Have a look at the different sizes of the SEB Sans Serif type face.

 

1. For desktop

Display

  • font-size 96
  • font-weight Bold
  • line-height 100
  • color #333333

 

H1

  • font-size 48
  • font-weight Bold
  • line-height 56
  • color #333333

 

H2

  • font-size 32
  • font-weight Bold
  • line-height 40
  • color #333333

 

H3

  • font-size 24
  • font-weight Bold
  • line-height 32
  • color #333333

 

H4

  • font-size 20
  • font-weight Medium
  • line-height 28
  • color #333333

 

H5
  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #333333

 

H6
  • font-size 14
  • font-weight Regular
  • line-height 20
  • color #333333

 

Body text

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #333333

 

Inline-links

  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #007AC7

___________________________________________________________

2. For tablet

Display

  • font-size 64
  • font-weight Bold
  • line-height 72
  • color #333333

 

H1

  • font-size 40
  • font-weight Bold
  • line-height 48
  • color #333333

H2

  • font-size 24
  • font-weight Bold
  • line-height 32
  • color #333333

H3

  • font-size 20
  • font-weight Bold
  • line-height 28
  • color #333333

 

H4

  • font-size 20
  • font-weight Medium
  • line-height 28
  • color #333333

 

H5
  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #333333

 

H6
  • font-size 14
  • font-weight Medium
  • line-height 20
  • color #333333

 

Body text

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #333333

 

Inline-links

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #007AC7

___________________________________________________________

3. For mobile

Display

  • font-size 48
  • font-weight Bold
  • line-height 56
  • color #333333

 

H1

  • font-size 32
  • font-weight Bold
  • line-height 40
  • color #333333

 

H2

  • font-size 24
  • font-weight Bold
  • line-height 32
  • color #333333

 

H3

  • font-size 20
  • font-weight Bold
  • line-height 28
  • color #333333

 

H4

  • font-size 20
  • font-weight Medium
  • line-height 28
  • color #333333

 

H5
  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #333333

 

H6
  • font-size 14
  • font-weight Regular
  • line-height 20
  • color #333333

 

Body text

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #333333

 

Inline-links

  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #007AC7