Typography

Typography Approach

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

General

The system uses Clamp to create fluid type while maintaining accessibility each class and default has custom calculations for type to adjust use This Link.Simply the REM values you wish to use and the calculation will provide the accessible CSS.

You can also use this for line height matching the spacing as it scales.

If you wish to replace clamp for Variables, you can and the structure is already set.

Family
Screen
Variable
Size
Line Height
Color
Anthro
Desktop
Base
clamp(1rem, 0.94rem + 0.216vw, 1.25rem)
clamp(1.2rem, 1.067rem + 0.474vw, 1.75rem)
Darkest

H Tag Setting

H Tag sizes can defined in the variables panel, By default we use clamp for defining fluid tech which conforms to accessability

Primary h1

Primary h2

Primary h3

Primary h4

Primary h5
H Tag
Min Size (448px)
Max Size (2304px)
Value
Line Height
H1
28px
70px
clamp(1.75rem, 1.116rem + 2.263vw, 4.375rem)
clamp(2.125rem, 1.401rem + 2.586vw, 5.125rem)
H2
20px
48px
clamp(1.25rem, 0.828rem + 1.509vw, 3rem)
clamp(1.5rem, 1.078rem + 1.509vw, 3.25rem)
H3
18px
40px
clamp(1.125rem, 0.793rem + 1.185vw, 2.5rem)
clamp(1.25rem, 0.888rem + 1.293vw, 2.75rem)
H4
18px
32px
clamp(1.125rem, 0.914rem + 0.754vw, 2rem)
clamp(1.25rem, 1.009rem + 0.862vw, 2.25rem)
H5
16px
20px
clamp(1rem, 0.94rem + 0.216vw, 1.25rem)
clamp(1.25rem, 1.19rem + 0.216vw, 1.5rem)

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
Inherit
1.4rem
Inherit
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
For displaying with form elements
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.
H Tag
Min Size (448px)
Max Size (2304px)
Value
Line Height
extra-large
28px
70px
clamp(1.75rem, 1.116rem + 2.263vw, 4.375rem)
clamp(2.125rem, 1.401rem + 2.586vw, 5.125rem)
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
Set max character widths
These widths set a maximum character length for paragraphs and text lengths. Max width is set to allow text to shrink.
These widths set a maximum character length for paragraphs and text lengths. Max width is set to allow text to shrink.
These widths set a maximum character length for paragraphs and text lengths. Max width is set to allow text to shrink.
Class Name
value
set-text-width-small
25ch
set-text-width-medium
45ch
set-text-width-large
25ch

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