Skip to main content
Sign Up for Service Updates

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

Footer

Popular Training Links

Getting Help

We have a variety of resources to assist you with using AEM to build your website.

Check out our video tutorials to see AEM authoring in action. 

Internal Resources

External Resources

Popular Browser Plugins