Font Family

"PT Sans" is the only font family to be used for the Star104.5 web designs. We chose to use a sans-serif font instead of the condensed font face used in the logotype for better readability. The various weights and styles of the font help differentiate hierarchy amidst the content.

Font-Family

Base Font Size & Line Height

The Base font size used for this project will be 20px. All font sizes will be defined in em units.The line height will always be 1.3 * font size across all breakpoints.

Typography

Text Contrast

Text contrast is important when using font across the website. The text colour is defined on contrast to better use the right text colour with respect to the background colour. The contrast grid below provides acceptable usage based on contrast.

Contrast
Background Text
#FFFFFF
#AAAAAA
#231F20
#CE0E2D
White
#FFFFFF
Text
DNP 2.3
Text
AAA 16.3
Text
AA 5.6
Gray
#AAAAAA
Text
DNP 2.3
Text
AAA 7
Text
DNP 2.4
Star Black
#231F20
Text
AAA 16.3
Text
AAA 7
Text
DNP 2.8
Effective on Extremes
#CE0E2D
Text
AA 5.6
Text
DNP 2.4
Text
DNP 2.8
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
About WCAG 2.0 contrast

Font Usage in Cards

Use appropriate font style and weight to clearly define hierarchy of fonts within cards.Heavier weights should mainly be used for headlines, titles and special links – basically anything interactive or that needs to shout.

Cards-Fonts

Typography Code

Disclaimer : Noob @ work ¯\_(ツ)_/¯ . This is the variable definitions and mixins which will allow changes to be made globally in the code base with just base variable changes instead of finding each and every instance of the value manually and updating it.