Components
Inputs
Page Elements
Filters
Feedback

Typography

Ticketmaster provides a constrained, purposeful set of typographic styles. These styles map as much as possible to functional roles, so you know when each can be used.

Font

The design system brand typeface is Averta. It has been carefully designed to meet Ticketmaster's needs as a global technology company and reflect Ticketmaster's spirit, beliefs and design principles.

Averta

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Weights

Aa

Regular

fontWeight: 400

Aa

Semibold

fontWeight: 600

Aa

Light

fontWeight: 300

Aa

Extra Bold

fontWeight: 800

Desktop

NameSizeDescriptionWeights

Main Heading

46 /​ 58 /​ 2.875 em
H1
Extra Bold, Light

Sub Header - Large

32 /​ 40 /​ 2.000 em
H2
Regular

Sub Header - Medium

24 /​ 30 /​ 1.500 em
H3
Regular, Light

Sub Header - Small

20 /​ 25 /​ 1.250 em
H4
Regular
Body
16 /​ 20 /​ 1.000 em
p
Semibold, Regular
Body - Small
14 /​ 18 /​ 0.875 em
p2
Semibold, Regular
Secondary
12 /​ 15 /​ 0.750 em
p3
Semibold, Regular
Small
10 /​ 13 /​ 0.625 em
p4
Semibold, Regular
Code
<div>
  <Typography.H1>
    Main Heading
  </Typography.H1>
  <Typography.H2>
    Sub Header - Large
  </Typography.H2>
  <Typography.H3>
    Sub Header - Medium
  </Typography.H3>
  <Typography.H4>
    Sub Header - Small
  </Typography.H4>
  <Typography.P1>
    Body
  </Typography.P1>
  <Typography.P2>
    Body - Small
  </Typography.P2>
  <Typography.P3>
    Secondary
  </Typography.P3>
  <Typography.P4>
    Small
  </Typography.P4>
</div>

Tablet

NameSizeDescriptionWeights

Sub Header - Large

32 /​ 40 /​ 2.000 em
H1
Extra Bold, Light

Sub Header - Medium

24 /​ 30 /​ 1.500 em
H2
Regular, Light

Sub Header - Small

20 /​ 25 /​ 1.250 em
H3
Regular
Body
16 /​ 20 /​ 1.000 em
p
Semibold, Regular
Body - Small
14 /​ 18 /​ 0.875 em
p2
Semibold, Regular
Secondary
12 /​ 15 /​ 0.750 em
p3
Semibold, Regular
Small
10 /​ 13 /​ 0.625 em
p4
Semibold, Regular
Code
<div>
  <Typography.H1>
    Sub Header - Large
  </Typography.H1>
  <Typography.H2>
    Sub Header - Medium
  </Typography.H2>
  <Typography.H3 style={{"fontWeight":600}}>
    Sub Header - Small
  </Typography.H3>
  <Typography.P1>
    Body
  </Typography.P1>
  <Typography.P2>
    Body - Small
  </Typography.P2>
  <Typography.P3>
    Secondary
  </Typography.P3>
  <Typography.P4>
    Small
  </Typography.P4>
</div>

Mobile

NameSizeDescriptionWeights

Sub Header - Medium

24 /​ 30 /​ 1.500 em
H2
Extra Bold, Light

Sub Header - Small

20 /​ 25 /​ 1.250 em
H3
Regular
Body
16 /​ 20 /​ 1.000 em
p
Semibold, Regular
Body - Small
14 /​ 18 /​ 0.875 em
p2
Semibold, Regular
Secondary
12 /​ 15 /​ 0.750 em
p3
Semibold, Regular
Small
10 /​ 13 /​ 0.625 em
p4
Semibold, Regular
Code
<div>
  <Typography.H1>
    Sub Header - Medium
  </Typography.H1>
  <Typography.H2>
    Sub Header - Small
  </Typography.H2>
  <Typography.P1>
    Body
  </Typography.P1>
  <Typography.P2>
    Body - Small
  </Typography.P2>
  <Typography.P3>
    Secondary
  </Typography.P3>
  <Typography.P4>
    Small
  </Typography.P4>
</div>