Typography

Typography Approach

Body

All type within the framework is based on the body font size with all others in em's.
To set the body font open the variables panel and update the body sizes under typography
Family
Screen
Variable
Size
Line Height
Color
Anthro
Desktop
Base
16px
1em
Darkest

H Tag Setting

H Tag sizes are defined in the variables panel, We also use clamp for defining fluid tech which conforms to accessability

Primary h1

Primary h2

Primary h3

Primary h4

Primary h5
Primary h6
H Tag
Screen
Variable
Size
Line Height
Color
H1
Desktop
Largest
64px / 4em
1em
Inherit
H1
Tablet
Larger
48px / 3em
1em
Inherit
H1
Mobile
Large
38px / 2.375em
1em
Inherit
H2
Desktop
Larger
42px / 2.625em
1em
Inherit
H2
Tablet
Large
38px / 2.375em
1em
Inherit
H2
Mobile
Mid
32px / 2em
1em
Inherit
H3
Desktop
Large
40px / 2.5em
1em
Inherit
H3
Tablet
Mid
34px / 2.125em
1em
Inherit
H3
Mobile
Small
28px / 1.75em
1em
Inherit
H4
Desktop
Mid
34px / 2.125em
1em
Inherit
H4
Tablet
Small
30px / 1.875em
1em
Inherit
H4
Mobile
Smaller
28px / 1.75em
1em
Inherit
H5
Desktop
Small
30px / 1.875em
1em
Inherit
H5
Tablet
Smaller
28px / 1.75em
1em
Inherit
H5
Mobile
Smallest
24px / 1.5em
1em
Inherit
H6
Desktop
Smaller
28px / 1.75em
1em
Inherit
H6
Tablet
Smallest
24px / 1.5em
1em
Inherit
H6
Mobile
Tiny
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.

This is the rich text feature

it is used for the feature component. We do not add images or any other styling beyond title and text, this allows us to set the title tag and also bold and italicise text as well as add links to the body copy

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
This is some text inside of a div block.
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
tiny
16px/0.645em
16px/0.645em
16px/0.645em
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
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
Tiny
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
Misc
These are additional unique classes which can be extended based on purpose.
Caption