Skip to main content

Possible online services disruption due to Internet related outage

A worldwide technology outage is causing disruption to some State of Illinois online systems.  We are aware of this issue and are diligently working on restoration.

Typography

System Font Stack

-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif,

  • Specifies the most apt system fonts for each operating system.
  • System fonts require no download time by the browser because they’re built into the user’s operating system.
  • System fonts have lots of styles and broad language coverage, unlike many webfonts.
  • Mobile sites feel more native when they use system font faces.
 

Typography Scale & Style

Extra-Large, H1

Hero Banner 
With Two Lines

Desktop
Weight: Regular
Color: Theme Based
Size: 64px
Line Height: 70px 
Tracking: 0px

Mobile
Weight: Regular
Color: Theme Based
Size: 40px
Line Height: 48px 
Tracking: 0px

H1

Heading One
With Two Lines

desktop
Weight: Regular
Color: Theme Based
Size: 48px
Line Height: 54px
Tracking: 0px

MOBILE
Weight: Regular
Color: Theme Based
Size: 32px
Line Height: 40px 
Tracking: 0px

H2

Heading Two
With Two Lines

desktop
Weight: Regular
Color: Theme Based
Size: 40px
Line Height: 44px
Tracking: 0px

mobile
Weight: Regular
Color: Theme Based
Size: 24px
Line Height: 30px
Tracking: 0px

H3

Heading Three
With Two Lines

desktop
Weight: Bold
Color: #000e14
Size: 21px
Line Height: 27px
Tracking: 0px

mobile
Weight: Bold
Color:  #000e14
Size: 18px
Line Height: 27px
Tracking: 0px

H4 - H6

Heading Four to
Six With Two Lines

desktop
Weight: Bold
Color: #000e14
Size: 18px
Line Height: 27px
Tracking: 0px

mobile
Weight: Bold
Color:  #000e14
Size: 16px
Line Height: 24px
Tracking: 0px

TITLE

TITLE Four to
Six With Two Lines

desktop
Weight: Bold
Color: #000e14
Size: 18px
Line Height: 27px
Tracking: 0px
Letter Spacing: 100

mobile
Weight: Bold
Color:  #000e14
Size: 16px
Line Height: 24px
Tracking: 0px
Letter spacing: 100

Body Text with some more lines of text ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat

desktop
Weight: Regular
Color: #000e14
Size: 18px
Line Height: 27px
Tracking: 24px

mobile
Weight: Regular
Color:  #000e14
Size: 16px
Line Height: 24px
Tracking: 24px

Captions with some more lines of text ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat

desktop
Weight: Regular
Color: #000e14
Size: 16px
Line Height: 24px
Tracking: 24px

mobile
Weight: Regular
Color:  #000e14
Size: 14px
Line Height: 21px
Tracking: 24px

Legal Copy lacus vestibulum sed arcu non odio

desktop
Weight: Regular
Color: #000e14
Size: 14px
Line Height: 21px
Tracking: 24px

mobile
Weight: Regular
Color:  #000e14
Size: 12px
Line Height: 18px
Tracking: 24px