Typography

Tablet Gothic Narrow Extra Bold is used for article headlines for editorial impact. This is the primary brand font.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwqyz

1 2 3 4 5 6 7 8 9 0

Bebas Neue is used whenever match scores are displayed on the site.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1 2 3 4 5 6 7 8 9 0

Helvetica Neue is our default paragraph font for all standard text. It is optimized for legibility across print, web, and mobile interfaces.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwqyz

1 2 3 4 5 6 7 8 9 0

Merriweather is selected for maximum legibility in news articles, Merriwaether should be set with ample line-height and paragraph spacing.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwqyz

1 2 3 4 5 6 7 8 9 0

Open Sans is our default paragraph font for all standard text. It is optimized for legibility across print, web, and mobile interfaces.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwqyz

1 2 3 4 5 6 7 8 9 0

Type Scale

Modular scale: 1.25 Major Third1.125 Major Second

Rule: Element name | class name | rem value (px conversion) / line-height

A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. We are using a 1.125 Major Second scale for small devices and 1.25 Major Third scale for larger devices. If we need to use a specific H tag for SEO purposes adjust the font size by using the t classes only.

.t0This size is typically used for a primary feature article.

H1 heading .t0 | 3.052rem (49px) / 1

H1 heading .t0 | 1.802em (29px) / 1

H1 / .t1This size is typically used for a page heading or primary feature article.

H1 heading .t1 | 2.441rem (39px) / 1

H1 heading .t1 | 1.602em (26px) / 1

H2 / .t2These elements denote sections on the page. You should really only need one or two.

H2 heading .t2 | 1.953rem (31px) / 1.2

H2 heading .t2 | 1.424em (23px) / 1.2

H3 / .t3 Consider using H3 headings to separate useful content groups.

H3 heading .t3 | 1.563rem (25px) / 1.2

H3 heading .t3 | 1.266em (20px) / 1.2

H4 / .t4

H4 heading .t4 | 1.25rem (20px) / 1.2

H4 heading .t4 | 1.125em (18px) / 1.2

H5 / .t5
H5 heading .t5 | 1rem (16px) / 1.5
H5 heading .t5 | 1rem (16px) / 1.5
H6 / .t6
H6 heading .t6 | 1rem (16px) / 1.5 ALL CAPS
H6 heading .t6 | 1rem (16px) / 1.5 ALL CAPS
p

Paragraph Text 1rem (16px)/1.5

.p-small

Cricket news from australia and around the world. It has a fixed size, and a custom line height, so you can experiment with it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium.

.p-x-small

Cricket news from australia and around the world. It has a fixed size, and a custom line height, so you can experiment with it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium.

.p-intro1.333rem (19px)/1.5

Cricket news from australia and around the world. It has a fixed size, and a custom line height, so you can experiment with it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium.

Show DesktopMobile Typography Scales

Font Stack

STANDARD

OS Font Family
Windows Segoe UI
MacOS & iOS SF UI Text, SF UI Display
Chrome OS & Android Roboto, Noto Sans (fallback), Droid Sans (fallback)
Ubuntu Ubuntu

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;