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

Name	Size	Description	Weights
Main Heading	46 / 58 / 1.25	H1	Extra Bold, Light
Sub Header - Large	32 / 40 / 1.25	H2	Regular
Sub Header - Medium	24 / 30 / 1.25	H3	Regular, Light
Sub Header - Small	20 / 25 / 1.25	H4	Regular
Body	16 / 20 / 1.5	p	Semibold, Regular
Body - Small	14 / 18 / 1.5	p2	Semibold, Regular
Secondary	12 / 15 / 1.5	p3	Semibold, Regular
Small	10 / 13 / 1.5	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

Name	Size	Description	Weights
Sub Header - Large	32 / 40 / 1.25	H1	Extra Bold, Light
Sub Header - Medium	24 / 30 / 1.25	H2	Regular, Light
Sub Header - Small	20 / 25 / 1.25	H3	Regular
Body	16 / 20 / 1.5	p	Semibold, Regular
Body - Small	14 / 18 / 1.5	p2	Semibold, Regular
Secondary	12 / 15 / 1.5	p3	Semibold, Regular
Small	10 / 13 / 1.5	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

Name	Size	Description	Weights
Sub Header - Medium	24 / 30 / 1.25	H2	Extra Bold, Light
Sub Header - Small	20 / 25 / 1.25	H3	Regular
Body	16 / 20 / 1.5	p	Semibold, Regular
Body - Small	14 / 18 / 1.5	p2	Semibold, Regular
Secondary	12 / 15 / 1.5	p3	Semibold, Regular
Small	10 / 13 / 1.5	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>

Helpful Links

Portfolio

Partners