Archetype

Create beautiful web typography designs, in the browser

8 followers

Create beautiful web typography designs, in the browser

8 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.

Launch tags:Web App•Design Tools•Typography

Launch Team

CloudflareStill paying to deploy your apps? Try Cloudflare Workers for free

Promoted

…Did anyone else spend time creating a type system with the intention of download the sketch file … to find out it's "Coming Soon"? 😭

Report

9yr ago

Reflection

Maker

@richardsison Hi Richard, thanks for that feedback, we'll look to change the UI so the 'coming soon' link is visible at all times and not just on hover to avoid that happening in future. If that export feature is something you are keen on we'll let you know when it's up and running. If you have any other thoughts please do let us know, all feedback is very much appreciated

Report

9yr ago

@martinollivere thanks for getting back to me. I definitely would like to be informed when it's up! Cheers. Does the sketch export create text styles or just a document? Would be good to be able to many the styles before exporting. Only other future idea would be having an account with projects. Awesome start though!

Report

9yr ago

Reflection

Maker

@richardsison This is great to hear as those are the 2 features we are going to be working on as a priority (export to sketch and saving projects). We'll be sure to let you know when these are ready to try out. Also in answer to your question we're just scoping out exactly what we want from the Sketch export. When you said above 'good to many the styles before export' what were you referring to? This would be great to know as we spec this up. Thanks again for your time

Report

9yr ago

@martinollivere Whoops… was on the train when I wrote that. Bloody autocorrect. What I meant to say was "name the styles before exporting". So if you could create extra styles, and name them that'd be awesome.

Report

9yr ago

Reflection

Maker

@richardsison that makes more sense :) Great, thank you again Richard, I've added that to our list

Report

9yr ago

Thanks for the work on this. We're trying this out now in our production workflow. My question is why is the base 1em set to 10px instead of 16px or have it recognize the current browsers default font-size? The 10px default makes it a bit more cumbersome to share this with developers even if it's for reference only.

Report

8yr ago

@milesroxas I came here to ask the same question. Shouldn't 16px be the equivalent of 1em, since it seems to be the default browser font size? The only explanation I could figure out (since I couldn't find one reason documented anywhere) was that it makes typography sizes easier to convert from ems to px. If 10px = 1em, then 1.6em = 16px, 2.5em = 25px, and so on. If 16px = 1em, then 1.6em = 25px (which is not so easy to deduct), 2.5em = 40px. Do you see what I see? One would stop needing the px to em convertors. Or I may be getting to the wrong conclusion, but I can't find any more information on why 1em should be set to 10px.

Report

7yr ago

Yourganize

Maker

@milesroxas @mauricio_gonzalez1 Hey, you can now set the root font size now so it's not fixed at 10px - we had a lot of feedback on this. It's in the modular scale settings. Hope that's helpful...

Report

6yr ago

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!

Report

9yr ago

Reflection

Maker

@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

Report

9yr ago

Yourganize

Maker

@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

Report

9yr ago

FindTheCompany

Nice project! I hope the text can be aligned on baseline not in the middle of the horizontal grid tho.

Report

9yr ago

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

9yr ago

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

9yr ago

Reflection

Maker

@moyicat @jamiegilman That's great, thanks for sharing

Report

9yr ago

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

9yr ago

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

9yr ago

Great tool. I'd love to start using it in real life, but my settings seem to reset after I close the export to css modal. Am I doing something wrong?

Report

6yr ago

Yourganize

Maker

@mauricio_gonzalez1 Hmm, that's odd.. it's probably causing a page refresh - if you sign in then your settings are saved online and then they won't be reset? We've made some updates in the last month but let me know if this is still happening for you. Thanks!

Report

6yr ago

New Custom

Love this! You guys should consider adding more global options for headings. Modifying character spacing for each heading is a pain when you want them to share the same value. You should also let people add headings/paragraphs into the initial view. I wanted to test out an H1 + H2 + p, for example. Should also consider showing the start of a given category for fonts if a user provides the name of a font and there are no results - currently, that input retains whatever font you put in, even when I'm done applying that font and moving onto the next. You could show a 'no results found for `x`' to cover users when they change up the category. Performance in general could use some love, as well. It got pretty bogged down after I was invested in the work I'd put in - became generally unresponsive, especially when searching fonts. Great work!

Report

9yr ago

Reflection

Maker

@joeyfigaro Fantastic feedback, thank you very much Joey, much appreciated. Really glad you like it thus far. We'll be sure to keep you abreast of future updates in line with your feedback. If you have any other thoughts please do let us know but this is really valuable stuff

Report

9yr ago

What a great tool! I will passive-aggressively share this with the designer in my company, and maybe we will , at last, get a style guide that makes sense!

Report

9yr ago

Reflection

Maker

@d4nyll Thank you very much for the support Daniel, I hope they find it useful, let us know if yourself or the designer have any feedback at all

Report

9yr ago

1 2 3

Reviews