Adjust the spacing between all your type elements

(Click 'Edit Element' to edit it's spacing individually)

H1: What Can I Do With Archetype?

Heading 1

Paragraph: Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all underpinned by established typographic best practices meaning less guesswork and more harmonious designs.

Paragraph

Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Paragraph

H2: Sounds Great, Where Do I Start?

Heading Two

Paragraph: It's easy peasy: 1) Start by selecting a visually compatible font pair. 2) Define harmoniously proportioned sizes for all the standard typographic elements your design might require. 3) Set the optimal vertical spacing of all elements in your design. 4) Tweak and refine individual elements to get everything looking exactly the way you want. 5) Export as CSS ready to send to a developer. Job Done.

Paragraph

H3: Help Us Improve

Heading Three

Paragraph: This is version 1 of Archetype and we'd love your feedback and suggestions on how we can improve it to make it even more useful. Please use the feedback link in the header to let us know what you think. Be as critical as you like, we have thick skin.

Paragraph

H4: Still Reading?

Heading Four

Well here's some inspirational quotes for you: “Good design is making something intelligible and memorable. Great design is making something memorable and meaningful”: Dieter Rams.

Paragraph
H5: More? Ok
Heading Five

Paragraph: “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away”: Antoine de Saint-Exupery.

Paragraph
H6: One For the Road
Heading Six

Paragraph: “The best activities for your health are pumping and humping”: Arnold Schwarzenegger.

Paragraph

H1

Heading One

H2

Heading Two

H3

Heading Three

h4

Heading Four
h5
Heading Five
H6
Heading Six

Toil Free Typography

Choose font families, set sizing and spacing based on typographic rules then export as CSS. Easy-peasy.

Let’s Go...

Select well proportioned sizes for all your type elements

  • 149px (14.90em)
    Lorem Ipsum Dolor Amet
  • 119.2px (11.92em)
    Lorem Ipsum Dolor Amet
  • 95.4px (9.54em)
    Lorem Ipsum Dolor Amet
  • 76.3px (7.63em)
    Lorem Ipsum Dolor Amet
  • 61px (6.10em)
    Lorem Ipsum Dolor Amet
  • 48.8px (4.88em)
    Lorem Ipsum Dolor Amet
  • 39.1px (3.91em)
    Lorem Ipsum Dolor Amet
  • 31.3px (3.13em)
    Lorem Ipsum Dolor Amet
  • 25px (2.50em)
    Lorem Ipsum Dolor Amet
  • 20px (2.00em)
    Lorem Ipsum Dolor Amet
  • 16px (1.60em)
    Lorem Ipsum Dolor Amet
  • 12.8px (1.28em)
    Lorem Ipsum Dolor Amet
  • 10.2px (1.02em)
    Lorem Ipsum Dolor Amet
  • 8.2px (0.82em)
    Lorem Ipsum Dolor Amet

Edit global settings for Heading 1

Tweak spacing between this element and following elements to get perfect results in every situation

Heading 1
Global

Heading One

Heading 1
Followed By
Paragraph

Heading One

Tweak bottom margins between paragraphs and specific elements if required. Note that customising the margin-bottom of indivdual elements could take you off the baseline grid.

Heading 1
Followed By
Heading 1

Heading One

H1

Heading 1
Followed By
Heading 2

Heading One

H2

Heading 1
Followed By
Heading 3

Heading One

H3

Heading 1
Followed By
Heading 4

Heading One

h4

Heading 1
Followed By
Heading 5

Heading One

h5
Heading 1
Followed By
Heading 6

Heading One

H6

Edit Settings for Heading 1

Font Family

Montserrat

Font Size (ems)

Line Height (rems)

Letter Spacing (em)

Bottom Margin (rems)

H1: What Can I Do With Archetype?

Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all underpinned by established typographic best practices meaning less guesswork and more harmonious designs.

Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS so everyone's happy!

Font Size-Line Height-Letter Spacing-Margin Bottom-

H2: Sounds Great, Where Do I Start?

Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: It's easy peasy: 1) Start by selecting a visually compatible font pair. 2) Define harmoniously proportioned sizes for all the standard typographic elements your design might require. 3) Set the optimal vertical spacing of all elements in your design. 4) Tweak and refine individual elements to get everything looking exactly the way you want. 5) Export as CSS ready to send to a developer. Job Done.

Font Size-Line Height-Letter Spacing-Margin Bottom-

H3: Help Us Improve

Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: This is version 1 of Archetype and we'd love your feedback and suggestions on how we can improve it to make it even more useful. Please use the feedback link in the header to let us know what you think. Be as critical as you like, we have thick skin.

Font Size-Line Height-Letter Spacing-Margin Bottom-

H4: Still Reading?

Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: Well here's some inspirational quotes for you: “Good design is making something intelligible and memorable. Great design is making something memorable and meaningful”: Dieter Rams.

Font Size-Line Height-Letter Spacing-Margin Bottom-
H5: More? Ok
Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away”: Antoine de Saint-Exupery.

Font Size-Line Height-Letter Spacing-Margin Bottom-
H6: One For the Road
Font Size-Line Height-Letter Spacing-Margin Bottom-

Paragraph: “The best activities for your health are pumping and humping”: Arnold Schwarzenegger.

Font Size-Line Height-Letter Spacing-Margin Bottom-

H1

Font Size-Line Height-Letter Spacing-Margin Bottom-

H2

Font Size-Line Height-Letter Spacing-Margin Bottom-

H3

Font Size-Line Height-Letter Spacing-Margin Bottom-

h4

Font Size-Line Height-Letter Spacing-Margin Bottom-
h5
Font Size-Line Height-Letter Spacing-Margin Bottom-
H6
Font Size-Line Height-Letter Spacing-Margin Bottom-

^-^

Looking for a lovely, compatible pair of fonts for your project? Use this tool to find them.

Close

^-^

Use a modular scale to set the correct sizing relationships for all the typographic elements your design will need.

Close

^-^

Adjust the line height of your design to get the vertical rythm just right.

You can then tweak any element you like individually to get your design looking exactly how you want it

Close