Product Hunt logo dark
  • Launches
    Coming soon
    Upcoming launches to watch
    Launch archive
    Most-loved launches by the community
    Launch Guide
    Checklists and pro tips for launching
  • Products
  • News
    Newsletter
    The best of Product Hunt, every day
    Stories
    Tech news, interviews, and tips from makers
    Changelog
    New Product Hunt features and releases
  • Forums
    Forums
    Ask questions, find support, and connect
    Streaks
    The most active community members
    Events
    Meet others online and in-person
  • Advertise
Subscribe
Sign in
Subscribe
Sign in

Archetype

Create beautiful web typography designs, in the browser

4.0
•1 review•

7 followers

Create beautiful web typography designs, in the browser

4.0
•1 review•

7 followers

Visit website
Interface design tools
•
Design resources
Archetype makes beautiful web typography designs quick and easy to create. Pick the right fonts then set harmonious sizing and spacing relationships directly in the browser with just a few clicks. See your design how your users will then export as CSS to send to a developer or a Sketch file to become part of a design system.
  • Overview
  • Launches1
  • Reviews1
  • Alternatives
  • Team
  • Awards
  • More
Company Info
archetypeapp.com
Archetype Info
Launched in 2017View 1 launch
Forum
p/archetype-2
  • Blog
  • •
  • Newsletter
  • •
  • Questions
  • •
  • Forums
  • •
  • Product Categories
  • •
  • Apps
  • •
  • About
  • •
  • FAQ
  • •
  • Terms
  • •
  • Privacy and Cookies
  • •
  • X.com
  • •
  • Facebook
  • •
  • Instagram
  • •
  • LinkedIn
  • •
  • YouTube
  • •
  • Advertise
© 2025 Product Hunt

Similar Products

Typewolf
Typewolf
Less talk. More type.
Design inspiration websitesGraphic design tools
Whitespaces+
Boost your typography accuracy with a quick copy paste
Writing assistants
Letrs
Letrs
To change the way agencies, design studios.
Design & CreativeInterface design tools
Discover.typography
Discover.typography
Discover great fonts through themes.
Archetype gallery image
Archetype gallery image
Archetype gallery image
Launch tags:
Web App•Design Tools•Typography
Launch Team
Martin OllivereJamie Gilman

What do you think? …

Martin Ollivere
Martin Ollivere
Reflection

Reflection

Maker
Hi there, we'd love to know what you think of our latest offering: a tool to help designers quickly and easily create typography for digital projects live in the browser. We hope that it can become an integral part of designing a system of consistent, re-useable components. See how it works here in this video: https://youtu.be/lN-O-JonhDI Thank you very much in advance for your input.
Report
8yr ago
Dre Durr💡
Dre Durr💡
I was confused on where to start until I watched the youtube video. Very Dope🚬🚬
Report
8yr ago
Martin Ollivere
Martin Ollivere
Reflection

Reflection

Maker
@dredurr Hi Deandre, thank you very much for your comment. We created the video as a first pass at some onboarding but have some plans for some more integrated guides as to what to do and why when first landing on the site. We also had ideas for a 'Typeschool' that can teach more about the underlying best practices Archetype is based on. If you'd find any of those things useful would be very keen to hear your thoughts
Report
8yr ago
Samantha Zhang
Samantha Zhang
FindTheCompany

FindTheCompany

Nice project! I hope the text can be aligned on baseline not in the middle of the horizontal grid tho.
Report
8yr ago
Martin Ollivere
Martin Ollivere
Reflection

Reflection

Maker
@moyicat Hi Samantha, thank you very much for your feedback. The text currently sits in the middle of the lines due to the way CSS line-height works, it adds padding above and below the text to achieve the desired spacing. There are some fiddly work arounds to try and set the text to the baseline but we wanted to keep things as simple as possible with this first version. I'll let @jamiegilman wade in here if required as he is the front-end expert. Thank you again for the comment, just the kind of feedback we need. If you have any other thoughts do please let us know
Report
8yr ago
Samantha Zhang
Samantha Zhang
FindTheCompany

FindTheCompany

@martinollivere @jamiegilman Yay so happy that you want to look into it. Check out https://github.com/jakegiltsoff/... . I like their approach for baseline alignment with SASS mixins.
Report
8yr ago
Martin Ollivere
Martin Ollivere
Reflection

Reflection

Maker
@moyicat @jamiegilman That's great, thanks for sharing
Report
8yr ago
Jamie Gilman
Jamie Gilman

Yourganize

Maker
@moyicat @martinollivere Thanks for your input Samantha, and for the Sassline link, it's very interesting. The difficulty with aligning directly to the baseline of the grid is that the cap-size of the font family is required for the calculation, which is different for each font family and isn't available from the Google fonts API. It could be that we provide an input field for the user for the cap-size of the font family, and in the same way as Sassline, the user would tweak this to get the right value. It's an interesting feature we'll certainly consider, especially if we have more similar feedback. Thanks!
Report
8yr ago
Samantha Zhang
Samantha Zhang
FindTheCompany

FindTheCompany

@jamiegilman @martinollivere Yup definitely more complicated to allow that ... I think a dynamic slider would be a nice UI for people who are not familiar with the cap-size concept.
Report
8yr ago
Brand API
Brand API — Speed up your onboarding with 1 API call
Speed up your onboarding with 1 API call
Promoted

Do you use Archetype?

4.0
Based on 1 review
Review Archetype?
Pros
Cons
Reviews
Helpful

You might also like

Typewolf
Typewolf
Less talk. More type.
Whitespaces+
Boost your typography accuracy with a quick copy paste
Letrs
Letrs
To change the way agencies, design studios.
Discover.typography
Discover.typography
Discover great fonts through themes.
View more
Ľubomír “Človek Milión” Krestián
Ľubomír “Človek Milión” Krestián
•1 review
that is a fine product though
Report
2yr ago