archetypeapp.com Open in urlscan Pro
151.101.1.195  Public Scan

Form analysis
1 forms found in the DOM

Name: mc-embedded-subscribe-form — POST //ourownthing.us13.list-manage.com/subscribe/post?u=681a149593b1c973639ef8a6e&id=1e49eaf158

<form action="//ourownthing.us13.list-manage.com/subscribe/post?u=681a149593b1c973639ef8a6e&amp;id=1e49eaf158" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
  <div id="mc_embed_signup_scroll">
    <div class="mc-field-group"><input type="email" value="" name="EMAIL" class="ty-input required email" id="mce-EMAIL" placeholder="Your Email"><input type="submit" value="g" name="subscribe" id="mc-embedded-subscribe"
        class="icon-mail btn-newsletter-signup-submit"></div>
    <div id="mce-responses">
      <div class="response" id="mce-error-response" style="display: none;"></div>
      <div class="response" id="mce-success-response" style="display: none;"></div>
    </div>
    <div aria-hidden="true" style="position: absolute; left: -5000px;"><input type="text" name="b_681a149593b1c973639ef8a6e_1e49eaf158" tabindex="-1" value=""></div>
  </div><span class="newsletter-signup-form-note">Fear not, absolutely no spam</span>
</form>

Text Content

 * Mobile
 * Desktop


 * 1. PICK FONTS
   
   HEADINGS
   
   Montserrat
   
   BODY COPY
   
   LoraDone


 * 2. DEFINE SIZES
   
   ROOT (HTML) FONT SIZE (PX)
   
   BASE (PARAGRAPH) FONT SIZE (EMS)
   
   SCALE RATIO
   
   Done


 * 3. ADJUST SPACING
   
   GLOBAL LINE HEIGHT (REMS)

View Preview
Download Fonts
Download selected Google fonts to install locally
Export to Figma
Export your typography design to Figma with fully defined text components ready
to use in your design templates
Export to Sketch
Export your typography design to Sketch with fully defined text styles ready to
use in your design templates
Export as CSS
Generate your typography design as developer-friendly CSS styles they can use
immediately
Receive Updates

Fear not, absolutely no spam
Save Current Project

Sign in With Google
 * Menu


MENU:

 * How Do I Use This?
 * Product Hunt
 * Give Us Feedback
 * Share
 * Terms & Conditions


SIGN IN TO SAVE YOUR CURRENT PROJECT

Don’t lose your all your hard work, sign in securely with Google to save the
project you’re working on.

Sign In and Save


GOING PRO CANCELLED :(

Your Pro upgrade was cancelled because you either chose to or because of a
technical issue. If you need help get in touch and we hope to have you on board
as a Pro user soon.

Return to Project


YOU ARE NOW PRO!

You now have full Sketch/CSS export access and have just made our day!

Your support is really appreciated, thank you!
Martin & Jamie, Creators of Archetype.

Return to Project


EXPORT YOUR TYPOGRAPHY AND HELP SUPPORT US

Going Pro will not only allow you to export your beautiful typography to Figma,
Sketch or as developer-ready CSS but will also help support us as we strive to
improve Archetype and build the features you want most.

Thank you very much.
Martin & Jamie, Creators of Archetype.

50% Off For Limited Time
$99 $49 / Year
Pay for 1 Year’s access securely via Stripe, renews annually (we'll remind
you!).Sign in to Get StartedMaybe Later
Grid
a
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 


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 1Edit Element

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.

ParagraphEdit Element

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!

ParagraphEdit Element


H2: SOUNDS GREAT, WHERE DO I START?

Heading TwoEdit Element

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.

ParagraphEdit Element


H3: HELP US IMPROVE

Heading ThreeEdit Element

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.

ParagraphEdit Element

H4: STILL READING?

Heading FourEdit Element

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.

ParagraphEdit Element

H5: MORE? OK

Heading FiveEdit Element

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.

ParagraphEdit Element

H6: ONE FOR THE ROAD

Heading SixEdit Element

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

ParagraphEdit Element


H1

Heading OneEdit Element


H2

Heading TwoEdit Element


H3

Heading ThreeEdit Element

H4

Heading FourEdit Element

H5

Heading FiveEdit Element

H6

Heading SixEdit Element


TOIL FREE TYPOGRAPHY

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

Let’s Go...


SELECT FONT

 * Google Fonts
 * Local Fonts

 * All Styles
 * Serif
 * Sans Serif
 * Display
 * Handwriting
 * Monospace


ABeeZee regularABeeZee italicADLaM Display regularAR One Sans regularAR One Sans
500AR One Sans 600AR One Sans 700Abel regularAbhaya Libre regularAbhaya Libre
500Abhaya Libre 600Abhaya Libre 700Abhaya Libre 800Aboreto regularAbril Fatface
regularAbyssinica SIL regularAclonica regularAcme regularActor regularAdamina
regularAdvent Pro 100Advent Pro 200Advent Pro 300Advent Pro regularAdvent Pro
500Advent Pro 600Advent Pro 700Advent Pro 800Advent Pro 900Advent Pro
100italicAdvent Pro 200italicAdvent Pro 300italicAdvent Pro italicAdvent Pro
500italicAdvent Pro 600italicAdvent Pro 700italicAdvent Pro 800italicAdvent Pro
900italicAfacad regularAfacad 500Afacad 600Afacad 700Afacad italicAfacad
500italicAfacad 600italicAfacad 700italicAgbalumo regularAgdasima
regularAgdasima 700Aguafina Script regularAkatab regularAkatab 500Akatab
600Akatab 700Akatab 800Akatab 900Akaya Kanadaka regularAkaya Telivigala
regularAkronim regularAkshar 300Akshar regularAkshar 500Akshar 600Akshar
700Aladin regularAlata regularAlatsi regularAlbert Sans 100Albert Sans 200Albert
Sans 300Albert Sans regularAlbert Sans 500Albert Sans 600Albert Sans 700Albert
Sans 800Albert Sans 900Albert Sans 100italicAlbert Sans 200italicAlbert Sans
300italicAlbert Sans italicAlbert Sans 500italicAlbert Sans 600italicAlbert Sans
700italicAlbert Sans 800italicAlbert Sans 900italicAldrich regularAlef
regularAlef 700Alegreya regularAlegreya 500Alegreya 600Alegreya 700Alegreya
800Alegreya 900Alegreya italicAlegreya 500italicAlegreya 600italicAlegreya
700italicAlegreya 800italicAlegreya 900italicAlegreya SC regularAlegreya SC
italicAlegreya SC 500Alegreya SC 500italicAlegreya SC 700Alegreya SC
700italicAlegreya SC 800Alegreya SC 800italicAlegreya SC 900Alegreya SC
900italicAlegreya Sans 100Alegreya Sans 100italicAlegreya Sans 300Alegreya Sans
300italicAlegreya Sans regularAlegreya Sans italicAlegreya Sans 500Alegreya Sans
500italicAlegreya Sans 700Alegreya Sans 700italicAlegreya Sans 800Alegreya Sans
800italicAlegreya Sans 900Alegreya Sans 900italicAlegreya Sans SC 100Alegreya
Sans SC 100italicAlegreya Sans SC 300Alegreya Sans SC 300italicAlegreya Sans SC
regularAlegreya Sans SC italicAlegreya Sans SC 500Alegreya Sans SC
500italicAlegreya Sans SC 700Alegreya Sans SC 700italicAlegreya Sans SC
800Alegreya Sans SC 800italicAlegreya Sans SC 900Alegreya Sans SC 900italicAleo
100Aleo 200Aleo 300Aleo regularAleo 500Aleo 600Aleo 700Aleo 800Aleo 900Aleo
100italicAleo 200italicAleo 300italicAleo italicAleo 500italicAleo 600italicAleo
700italicAleo 800italicAleo 900italicAlex Brush regularAlexandria 100Alexandria
200Alexandria 300Alexandria regularAlexandria 500Alexandria 600Alexandria
700Alexandria 800Alexandria 900Alfa Slab One regularAlice regularAlike
regularAlike Angular regularAlkalami regular

Font Name
Enter the full name of the local font you want to use. NB: It won't be displayed
in the live preview until you hit 'Apply'
Font Weight
Currently you can only enter normal (400) or bold (700)
Font Style
Enter the full name of your desired font style (normal or italic)
Apply Local FontApply and CloseNB: This is a basic first pass at selecting your
own fonts. Please let us know via the feedback form if this is a feature we
should improve
Cancel

Copy the code below for use in the Archetype to Figma or Sketch plugin. Follow
these instructions for Figma or instructions for Sketch to see how.

Copy code to clipboard







SITTING COMFORTABLY?

Then let’s begin. Use the panel on the left to select a visually compatible pair
of fonts & preview them here. You can pick more fonts for specific headings etc
later on. Save your favourite font pairs for later using the heart.

Save
a
a
I Need Inspiration
 * Pair Suggestions
 * My Favourite Pairs

What Makes a Good Font Pair?


 * IF IT BLEEDS WE CAN KILL IT
   
   Dutch has a code of honor which he will not violate, even when his life
   depends on it. Paradoxically, his code of honor gives
   
   
   MONTSERRAT SEMI BOLD + LORA REGULAR
   
   Try This PairSave


 * IF IT BLEEDS WE CAN KILL IT
   
   Dutch has a code of honor which he will not violate, even when his life
   depends on it. Paradoxically, his code of honor gives
   
   
   ABRIL FATFACE REGULAR + LATO REGULAR
   
   Try This PairSave


 * IF IT BLEEDS WE CAN KILL IT
   
   Dutch has a code of honor which he will not violate, even when his life
   depends on it. Paradoxically, his code of honor gives
   
   
   LILITA ONE REGULAR + OPEN SANS REGULAR
   
   Try This PairSave


 * IF IT BLEEDS WE CAN KILL IT
   
   Dutch has a code of honor which he will not violate, even when his life
   depends on it. Paradoxically, his code of honor gives
   
   
   MERRIWEATHER HEAVY ITALIC + LATO REGULAR
   
   Try This PairSave


 * IF IT BLEEDS WE CAN KILL IT
   
   Dutch has a code of honor which he will not violate, even when his life
   depends on it. Paradoxically, his code of honor gives
   
   
   OSWALD BOLD + MERRIWEATHER REGULAR
   
   Try This PairSave


 * IF IT BLEEDS WE CAN KILL IT
   
   Dutch has a code of honor which he will not violate, even when his life
   depends on it. Paradoxically, his code of honor gives
   
   
   PLAYFAIR DISPLAY BOLD + SOURCE SANS PRO REGULAR
   
   Try This PairSave


KEEP ALL YOUR FAVOURITE FONT PAIRS IN ONE PLACE FOR EASY ACCESS

Sign in securely with Google in one click to save any font pairs you want to
keep for future reference.

Sign In with Google


SELECT WELL PROPORTIONED SIZES FOR ALL YOUR TYPE ELEMENTS

 * 149.01px (14.90em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 119.21px (11.92em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 95.37px (9.54em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 76.29px (7.63em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 61.04px (6.10em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 48.83px (4.88em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 39.06px (3.91em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 31.25px (3.13em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 25px (2.50em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 20px (2.00em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 16px (1.60em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 12.8px (1.28em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 10.24px (1.02em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * 8.19px (0.82em)Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   Lorem Ipsum Dolor Amet
 * Select Elementh1h2h3h4h5h6p
   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
Margin Bottom (Rems)


HEADING ONE


Heading 1
Followed By
Paragraph
Margin Bottom (Rems)


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
Margin Bottom (Rems)


HEADING ONE




H1

Heading 1
Followed By
Heading 2
Margin Bottom (Rems)


HEADING ONE




H2

Heading 1
Followed By
Heading 3
Margin Bottom (Rems)


HEADING ONE




H3

Heading 1
Followed By
Heading 4
Margin Bottom (Rems)


HEADING ONE



H4

Heading 1
Followed By
Heading 5
Margin Bottom (Rems)


HEADING ONE



H5

Heading 1
Followed By
Heading 6
Margin Bottom (Rems)


HEADING ONE



H6


EDIT SETTINGS FOR HEADING 1

Color (#)
All Caps
TT

FONT FAMILY

Montserrat

FONT SIZE (EMS)

LINE HEIGHT (REMS)

LETTER SPACING (EM)

BOTTOM MARGIN (REMS)

Done
Pixel Sizes


H1: WHAT CAN I DO WITH ARCHETYPE?

----

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!

----


H2: SOUNDS GREAT, WHERE DO I START?

----

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.

----


H3: HELP US IMPROVE

----

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.

----

H4: STILL READING?

----

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.

----

H5: MORE? OK

----

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.

----

H6: ONE FOR THE ROAD

----

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

----


H1

----


H2

----


H3

----

H4

----

H5

----

H6

----


SAVE THIS PROJECT?

You have an existing Archetype project, do you want to overwrite it with this
one?

Yes, Overwrite ExisitingNo, Load Existing Instead

If you'd like to be able to save multiple projects, please let us know


WELCOME ABOARD !

Watch Demo VideoStart Designing


KEEP ALL YOUR FAVOURITE FONT PAIRS IN ONE PLACE FOR EASY ACCESS

Sign in securely with Google in one click to save any font pairs you want to
keep for future reference.

Sign In with Google
Close


^-^

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

Don’t show me again
Close


^-^

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

Don’t show me again
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

Don’t show me again
Close
Advertise here
🍪

This site uses cookies in order to provide certain features such as sign in and
payments, and allows us to measure usage analytics. By continuing to use
Archetype you agree to our Terms & Conditions

👍  Ok, Close