How to add your Typography to your Frontify Style Guide?

As promised in my previous article about showing you how to set up a Style Guide in Frontify, here is the second article in the series to set up the next design element – Typography.

Before you set about creating your style guide, you need to ensure you have selected your fonts. Here are a couple of my previous articles that can help you choose your fonts.

In my case, I have chosen two fonts – Lato (a sans-serif font for the headings) and Merriweather (a serif font for the content). Here is a sample I created on Typecast.

Typography Sample created on Typecast
Typography Sample created on Typecast

You can set up your Typography in Frontify Style Guide in a matter of minutes.

You can see the sample Style Guide I created here.

Step #1 Add your Fonts

In Frontify Style Guide, you can add fonts from Google, Typekit or Fontdeck. Alternative you can choose System fonts or upload your fonts. Frontify will automatically display all the variations of the fonts (i.e. font styles and font weights). You can delete the ones you don’t need. This video will show you how I added the two Google fonts I choose for the website.

Step #2 Add Font Styles

Using Frontify Style Guide, you can also add your font styles in a fun and thought-provoking way. First, you create font styles for the various text styles in your website e.g. heading, subheading, paragraph, quote, etc. Then you define the font, font style, font weight, font size, line height and background and text colours. You can immediately see what the style would look like as well.So here goes a video:

It’s a lot more fun to show this to you in a video. So here it is:

Step #3 Add Fonts for Download

Just like how Colour Swatches can be included, fonts can be included for download as well. For this select Font Kit under Packages. It will appear as shown in this image and developers or clients can download the fonts just by clicking the icon.

Font Kit on Frontify
Font Kit on Frontify

 

You can read all the articles in this series about setting up a Style Guide using Frontify by going here.

If you are doing something similar to this, please do get in touch. Let’s band up together and share our thoughts and inspiration. ?

Check Also

Website Header with HTML5 and CSS3

A Simple Website Header with HTML5 and CSS3

Would you like to see the creation process of a simple website header using just HTML5 and CSS3 - from sketch to HTML page to working prototype?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.