Archetype

Create beautiful web typography designs, in the browser

#5 Product of the DayMay 10, 2017

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.

Around the web

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
Martin Ollivere
Maker
@martinollivere · Product Designer
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.
Deandre Durr☀️@dredurr · Growth Hacker
I was confused on where to start until I watched the youtube video. Very Dope🚬🚬
Martin Ollivere
Maker
@martinollivere · Product Designer
@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
Likalo@likalo_llc · Founder @ Likalo
This is very useful! I will forward this our designers... Thank you!
Martin Ollivere
Maker
@martinollivere · Product Designer
@likalo_llc Hi there, thank you very much indeed, please tell them to get in touch with any feedback they might have after using it. Much appreciated
Samantha Zhang@moyicat · Maker @ Graphiq.com, Inc.
Nice project! I hope the text can be aligned on baseline not in the middle of the horizontal grid tho.
Martin Ollivere
Maker
@martinollivere · Product Designer
@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
Samantha Zhang@moyicat · Maker @ Graphiq.com, Inc.
@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.
Martin Ollivere
Maker
@martinollivere · Product Designer
@moyicat @jamiegilman That's great, thanks for sharing
Jamie Gilman
Maker
@jamiegilman · Web Developer
@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!
Samantha Zhang@moyicat · Maker @ Graphiq.com, Inc.
@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.
Jamie Gilman
Maker
@jamiegilman · Web Developer
Yes, thanks for your suggestions, it's very helpful. We'll be sure to let you know if we implement this
Nimrod Gavish@nimrodgavish_ · Senior Product Designer at Wix.com
Super usefull! really like it, but - i need to use it with Helvetica Neue which you don't support... a small UX feedback -I wantted to see how it exports the CSS - I've seen the download fonts and download for sketch (and clicked them both) before i saw the "Send to your developer" button... Even tough you've tried to seperate and turn it to the main CTA, imo it made it feel like a regular button that apply settings or something..I've almost missed it. Do the conditions of the spacing between different html elements are appearing as well in the CSS files? thanks!
Martin Ollivere
Maker
@martinollivere · Product Designer
@nimrodgavish_ Hi Nimrod, thank you kindly for your great feedback. One of the features we are looking into doing next is adding the ability to use fonts that you currently have on your machine so hopefully this would be a valuable addition for you. Also I appreciate the UI feedback, we'll be tweaking bits and bobs over time and that's just the kind of input we need to improve things so thank you. I'll let @jamiegilman answer your CSS question as he is the front-end developer on this project and I am a mere designer
Jamie Gilman
Maker
@jamiegilman · Web Developer
@nimrodgavish_ Hi Nimrod, thanks for your input! The CSS does indeed provide the spacing between different HTML elements you may have set up. This is done using the adjacent sibling CSS selector and calculating the margin-top of the following element. For example, if you wanted to close the gap under an h1 where an h2 follows, the CSS output would be h1 + h2 { margin-top: -3rem } (or whatever the correct calculation is for your settings, which is dependent on the margin bottom of the h1). The CSS output is fairly crude at the moment as a first version, but we will discuss improving the output to group common styles, and perhaps provide as Sass syntax also. Do let us know if you have any problems or would like to see further improvements. Thanks