Typography

Typography Approach

Color palettes do not use specific color names or incremental values for color instead we go from a range of darkest through to lightest this allows us to change the specific color without affecting the class name and provide us with more flexibility.

To change the colors open the color palette tool in style panel click a color and edit, once you've updated save and those changes apply globally.

Body

All type within the framework is based on the body font size with all others in em's.

To set the body font click this text then in the style selector click the orange text next to Inheriting you can then you can choose the Body (make sure your in the base desktop initially) you can then switch to each breakpoint and adjust the font size accordingly this will then impact all type within the site.
Family
Size
Line Height
Color
Anthro
16px
1em
Darkest

H Tag Setting

All type within the framework is based on the body font size with all others in em's.

To set the body font click this text then in the style selector click the orange text next to Inheriting you can then you can choose the Body (make sure your in the base desktop initially) you can then switch to each breakpoint and adjust the font size accordingly this will then impact all type within the site.

Primary h1

Primary h2

Primary h3

Primary h4

Primary h5
Primary h6
H Tag
Screen
Size
Line Height
Color
H1
Desktop
64px / 4em
1em
Inherit
H1
Tablet
48px / 3em
1em
Inherit
H1
Mobile
38px / 2.375em
1em
Inherit
H2
Desktop
42px / 2.625em
1em
Inherit
H2
Tablet
38px / 2.375em
1em
Inherit
H2
Mobile
32px / 2em
1em
Inherit
H3
Desktop
40px / 2.5em
1em
Inherit
H3
Tablet
34px / 2.125em
1em
Inherit
H3
Mobile
28px / 1.75em
1em
Inherit
H4
Desktop
34px / 2.125em
1em
Inherit
H4
Tablet
30px / 1.875em
1em
Inherit
H4
Mobile
28px / 1.75em
1em
Inherit
H5
Desktop
30px / 1.875em
1em
Inherit
H5
Tablet
28px / 1.75em
1em
Inherit
H5
Mobile
24px / 1.5em
1em
Inherit
H6
Desktop
28px / 1.75em
1em
Inherit
H6
Tablet
24px / 1.5em
1em
Inherit
H6
Mobile
20px / 1.25em
1em
Inherit

Heading Extended Class

We use two classes to extend titles/headings these are primary-header and secondary-header the purpose is to define more properties i.e font family and how is it being used. We can then extended again with color classed like below
Primary Header
Family
Weight
Inherit
Semi-Bold

Aa

Bb

Cc

Dd

Ee

Ff

Gg

Hh

Ii

Jj

Kk

Ll

Mm

Nn

Oo

Pp

Qq

Rr

Ss

Tt

Uu

Vv

Ww

Xx

Yy

Zz

Secondary Header
Family
Weight
Inherit
Medium

Aa

Bb

Cc

Dd

Ee

Ff

Gg

Hh

Ii

Jj

Kk

Ll

Mm

Nn

Oo

Pp

Qq

Rr

Ss

Tt

Uu

Vv

Ww

Xx

Yy

Zz

Paragraphs & Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Family
Size
Margin Bottom
Line Height
Color
Inherit
1em
1em
1.4em
Inherit
rich-text class extends rich text element and the individual elements are inherit to rich-text inside of rich text element.

The example of RT element

An Article

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

a caption
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Writing a good blog article according to chat GPT

Choose a topic and keywords: Choose a topic that is relevant to your audience and conduct keyword research to identify the keywords that your audience is searching for. Include those keywords in your blog title, subheadings, and throughout the content.

  1. Write quality content: Your blog content should be high-quality, informative, and engaging. It should provide value to your readers and answer their questions or provide solutions to their problems.
  2. Optimize your blog post title: Your blog post title should be attention-grabbing and accurately reflect the content of your post. It should include your primary keyword and be no more than 70 characters long.
Decoration
Color
Border
Hover Color
Hover Border
None
Dark
1px Bottom Dark
Primary
1px Bottom Primary
Block Quote
Block Quote
Family
Weight
Size
Line Height
Padding
Margin
Border
Inherit
Semi-Bold
32px/2em
1.2em
0.5em 1em
0 1em
5px Left Primary
Meta
Meta is a class type for displaying structured information simply add the meta class and you can extend with color.
Meta Black
Family
Weight
Case
Size
Line Height
Margin
Letter spacing
Inherit
Semi-Bold
Uppercase
0.745em
1.4em
1.4em
0.1em
Meta Black
Meta Darkest
Meta Darker
Meta Dark
Meta Dark
Meta Dark
Meta Dark
Meta Dark
Meta Dark
Meta Dark
Meta Dark
Meta Primary Dark
Meta Primary
Meta Primary Medium
Meta Primary Light
Meta Secondary Dark
Meta Secondary
Meta Secondary Medium
Meta Secondary light
Meta Tertiary dark
Meta Tertiary
Meta Tertiary Medium
Meta Tertiary Light
Meta Notification success
meta notification error
Meta Notification caution
Labels
Meta is a class type for displaying structured information simply add the meta class and you can extend with color.
Meta Black
Family
Weight
Case
Size
Line Height
Margin
Letter spacing
Inherit
Semi-Bold
Uppercase
0.745em
1.4em
1.4em
0.1em
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Family
Weight
Size
Line Height
Margin
Inherit
Semi-Bold
1em
1.2em
0.5em
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Extended Size Classes
The classes allow us to be consistent when we want to have more control over the sizing on our type in relation to the design. e.g we have a H3 to maintain good html structure but we don't want it to be so large we can extend like so. primary-header small there are utilities for control.

You can also extend these classes with color
Extra Large
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Name
Desktop Size
Tablet Size
Mobile Size
Weight
Line Height
extra-large
80px/5em
50px/3.214em
40px/2.5em
Medium
1.125em
largest
60px/4em
40px/2.5em
34px/2.125em
Medium
1.2em
larger
50px/3.125em
38px/2.375em
32px/2em
Medium
1em
large
38px/2.375em
32px/2em
28px/1.75em
Medium
1em
mid
32px/2em
28px/1.75em
24px/1.5em
Medium
1em
small
24px/1.5em
20px/1.25em
18px/1.125em
Medium
1.25em
smaller
18px/1.125em
18px/1.125em
16px/1em
Medium
1.2em
smallest
16px/1em
16px/1em
16px/1em
Medium
1.4em
Extra Large
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Largest
asfdasdf
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Larger
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Large
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Mid
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Small
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Smaller
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Smallest
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz