How to improve your typography skills

• improve, typography

4 min. (762 words)

Learning about type doesn’t need to be daunting.

Dave Smyth

Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice-looking fonts and hoping for the best.

Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.

Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?

There’s no quick fix, but here are 20 top resources for web typography today.

The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.

Practical Typograph

A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.

The Elements of Typographic Style Applied to the Web

A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.

Typewolf

One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.

Rafal Tomal

Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.

Better Web Type

A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.

OpenType Features in CSS

OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.

These tools can help you decide and improve on typographical choices.

Modular Scale

If you want your font sizes to feel coherent, rather than random, a scale can help.

Tanaguru Contrast Finder

To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.

Font Playground

This tool lets you experiment with variable fonts and their different feature sets.

Font Style Matcher

If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.

There’s more to life than Adobe Fonts, Google Fonts and Monotype.

Use & Modify

A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.

Open Foundry

This is another collection of high-quality open-source fonts.

Font Stand

I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.

Typewolf

I know, this was mentioned above…but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration — a fantastic resource.

Typespiration

Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.

Font Combinations Library

A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.

FontPair

Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif serif, sans-serif serif, etc).

Typ.io

What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.

Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.

These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.

Axis Praxis

Variable Fonts

There are lots of resources to get you started here, wherever you are on your typographical journey. Type on the web has many nuances and CSS developments mean there are always new things to learn.

If there are other resources you’ve found to be particularly useful, I’d love to hear about them in the responses.

130 comments

  1. Undeniably believe that which you stated.
    Your favorite justification seemed to be on the web the simplest
    thing to be aware of. I say to you, I certainly get annoyed
    while people think about worries that they plainly do not know
    about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people could take a signal.
    Will likely be back to get more. Thanks

  4. Hi there this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or
    if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get advice from
    someone with experience. Any help would be enormously appreciated!

    Here is my site: http://www.meteoritegarden.com

  5. Hello my friend! I want to say that this post is awesome, nice written and come with approximately all vital infos.
    I would like to peer extra posts like this.

    Here is my website DFine8

  6. I don’t know whether it’s just me or if everyone else experiencing
    problems with your blog. It appears as though some of the text in your
    content are running off the screen. Can somebody else please comment and let me know if this is happening to them as well?
    This may be a problem with my internet browser because I’ve
    had this happen previously. Thank you

    My web page … OracleLeaf CBD

  11. I precisely needed to thank you so much again. I’m not
    certain the things that I would’ve created in the absence of those ideas
    revealed by you regarding this situation. It was a very difficult problem
    in my position, but spending time with your expert strategy you processed the issue forced me to weep
    over fulfillment. Extremely happier for the work and then believe you are aware of a great
    job you were undertaking instructing many people using your website.
    I know that you haven’t come across all of us.

    Review my webpage … Spore Mens Vitality Mix Side Effects

  13. Please let me know if you’re looking for a
    author for your blog. You have some really great articles
    and I feel I would be a good asset. If you ever want to take some of
    the load off, I’d absolutely love to write some articles
    for your blog in exchange for a link back to mine. Please shoot me
    an e-mail if interested. Many thanks!

    Here is my blog Bio Wellness CBD Gummies Cost

  14. I would like to thank you for the efforts you’ve
    put in penning this site. I really hope to view the same high-grade
    content from you in the future as well. In truth, your
    creative writing abilities has motivated me to get my very own website now 😉

    Also visit my website IQ SuperCharger

  16. Hiya! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest
    writing a blog post or vice-versa? My website discusses a lot of
    the same subjects as yours and I think we could greatly benefit from each other.
    If you happen to be interested feel free to send me an email.
    I look forward to hearing from you! Fantastic
    blog by the way!

    Also visit my web site; Keto Fat Burn Review

  17. Howdy! Someone in my Myspace group shared this website
    with us so I came to check it out. I’m definitely loving the information.
    I’m book-marking and will be tweeting this to my followers!
    Terrific blog and brilliant style and design.

    Visit my web blog; IQ SuperCharged

  19. Excellent weblog here! Additionally your site so much up
    very fast! What host are you the usage of? Can I am getting your associate link in your
    host? I wish my website loaded up as quickly as yours lol.

    Here is my page Ultra Cut Keto

  22. I was wondering if you ever thought of changing
    the structure of your site? Its very well written; I love what
    youve got to say. But maybe you could a little
    more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having 1 or two images.
    Maybe you could space it out better?

    Look at my website – Mia

  31. Hello, i think that i saw you visited my website thus i came to “return the favor”.I’m trying to find things to improve my site!I suppose
    its ok to use a few of your ideas!!

  40. My brother recommended I would possibly like this blog. He used to be entirely right.
    This submit truly made my day. You cann’t believe just how much
    time I had spent for this information! Thanks!

  43. Hi just wanted to give you a brief heads up and let you know a few
    of the images aren’t loading properly. I’m not sure why but I think its a linking issue.

    I’ve tried it in two different browsers and
    both show the same results.

  44. Hello! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up losing
    several weeks of hard work due to no data backup.
    Do you have any solutions to protect against hackers?

  45. Yesterday, while I was at work, my cousin stole
    my apple ipad and tested to see if it can survive a thirty foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views.
    I know this is entirely off topic but I had to share it with someone!

    Also visit my blog post; http://www.saraykapi.com

  49. Howdy just wanted to give you a quick heads up. The text in your post
    seem to be running off the screen in Opera.

    I’m not sure if this is a format issue or something to do with web browser
    compatibility but I figured I’d post to let you know.
    The layout look great though! Hope you get the issue fixed soon. Kudos

    Feel free to visit my web blog – http://www.koan.at

  53. Hey! This is my 1st comment here so I just wanted
    to give a quick shout out and tell you I really enjoy
    reading through your blog posts. Can you suggest any other blogs/websites/forums that deal with the same topics?
    Thanks a ton!

  54. Thank you for your site post. Thomas and I are already
    saving for just a new guide on this subject matter and
    your blog post has made us all to save money.

    Your thinking really clarified all our concerns. In fact, greater than what we had thought of
    before we came upon your wonderful blog. We no longer nurture doubts and also a troubled
    mind because you have attended to our needs right here.
    Thanks

    Also visit my blog – True Keto 1800 Review

  56. Hey there just wanted to give you a quick heads up and let you know a few of the images aren’t loading
    correctly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different web browsers and
    both show the same results.

  57. Oh my goodness! Incredible article dude! Thank you so much, However I am having difficulties with
    your RSS. I don?t know the reason why I can’t subscribe to it.
    Is there anybody having identical RSS problems?
    Anyone that knows the solution will you kindly respond? Thanks!!

    Also visit my web blog … Glacier Portable AC

  58. I enjoy what you guys tend to be up too. This sort of clever work and reporting!
    Keep up the awesome works guys I’ve included you guys to my
    own blogroll.

  61. May I simply say what a comfort to discover someone
    that truly knows what they are talking about on the internet.
    You actually understand how to bring a problem to light
    and make it important. More and more people should look at this and understand
    this side of the story. I was surprised that you aren’t more popular because you definitely possess the gift.

  64. Somebody essentially lend a hand to make significantly
    posts I’d state. This is the very first time I frequented your website
    page and to this point? I amazed with the research you made to create this particular submit amazing.
    Magnificent activity!

  69. I’m extremely impressed with your writing skills as well as
    with the layout on your weblog. Is this a paid theme or did
    you customize it yourself? Anyway keep up the excellent
    quality writing, it’s rare to see a great
    blog like this one these days.

    Also visit my site – polywebhost.com

  70. Hi, Neat post. There’s a problem along with your web site in web explorer, may check this?

    IE still is the market leader and a good component of other folks will omit your wonderful writing due to this problem.

    Feel free to visit my blog: Molten Keto

  73. Unquestionably believe that which you said. Your favorite justification appeared to be on the internet
    the simplest thing to be aware of. I say to you, I certainly get annoyed while people consider
    worries that they just don’t know about. You managed to hit the nail upon the top as well
    as defined out the whole thing without having side-effects , people can take a signal.
    Will likely be back to get more. Thanks quest bars http://bit.ly/3C2tkMR quest bars

  77. Just want to say your article is as astounding. The clarity to your post is simply cool
    and i can assume you are a professional on this subject.
    Well along with your permission let me to grab your feed to keep updated with
    drawing close post. Thank you 1,000,000 and please keep up the rewarding work.
    ps4 games https://bit.ly/3nkdKIi ps4

  84. Its like you read my mind! You seem to know so much about this,
    like you wrote the book in it or something. I think
    that you could do with a few pics to drive the message home a bit,
    but other than that, this is wonderful blog. A
    fantastic read. I will certainly be back.

    my site – http://bogema.anapacenter.info/modules.php?name=Your_Account&op=userinfo&username=HartmannMinerva

  89. Hello there! This post could not be written any better!
    Reading this post reminds me of my good old room mate! He
    always kept chatting about this. I will forward this page to him.
    Fairly certain he will have a good read. Thank you for sharing!

    Feel free to visit my web page: diet lacking

  95. Wonderful beat ! I would like to apprentice even as you amend
    your site, how can i subscribe for a weblog web site?
    The account helped me a applicable deal. I have been a little bit familiar of this
    your broadcast provided vibrant clear concept.

    Feel free to visit my web page: Napoleon

  98. hello there and thank you for your information ?
    I have certainly picked up something new from right here.
    I did however expertise some technical issues using this site, as I experienced to reload the website lots of times previous to I could
    get it to load properly. I had been wondering if your web host is OK?
    Not that I’m complaining, but slow loading instances times will often affect your placement in google and
    could damage your high quality score if ads and marketing with Adwords.
    Anyway I?m adding this RSS to my e-mail and could
    look out for much more of your respective intriguing content.
    Make sure you update this again very soon..

    Here is my web-site … http://www.aniene.net

  102. I almost never leave a response, but I read through some comments here How to improve your typography skills –
    Pavvy Designs. I do have a few questions for you if you do not mind.
    Is it simply me or do some of the comments come across as
    if they are written by brain dead individuals? 😛 And, if you are writing at other social sites, I’d like to keep up with anything fresh you have to post.

    Would you list of every one of all your social sites like your linkedin profile,
    Facebook page or twitter feed?

    my blog Noemi

  104. I haven’t checked in here for a while because I thought it
    was getting boring, but the last few posts are great quality so I guess I’ll
    add you back to my everyday bloglist. You deserve it
    friend 🙂

    Look at my website … heal eczema

  109. Hmm it looks like your site ate my first comment (it was extremely long) so I guess I’ll just sum it
    up what I had written and say, I’m thoroughly
    enjoying your blog. I too am an aspiring blog writer but I’m still
    new to the whole thing. Do you have any recommendations for rookie blog writers?
    I’d genuinely appreciate it.

    Also visit my site: carb nite pdf

  111. It is the best time to make some plans for
    the longer term and it is time to be happy. I’ve read this publish and if I may I desire to suggest you
    few attention-grabbing things or tips. Maybe you can write subsequent articles relating to this article.
    I desire to learn more issues about it!

    my web page http://www.hltkd.tw/

  115. Hey there! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up losing several weeks of
    hard work due to no back up. Do you have any solutions
    to stop hackers?

    My web-site :: sex tips for men

  118. It’s appropriate time to make some plans for the future and it is time to be happy.
    I have read this publish and if I may just I want to recommend you few interesting issues or tips.
    Maybe you could write next articles relating to this article.
    I want to learn even more things approximately it!

    My blog post; Kazuko

  119. This is very interesting, You’re a very skilled
    blogger. I’ve joined your feed and look forward to seeking
    more of your magnificent post. Also, I have shared your site in my social networks!

    Feel free to surf to my web site … try weed doctor

  121. The other day, while I was at work, my sister stole my iphone and tested to see if it can survive a
    forty foot drop, just so she can be a youtube sensation. My iPad
    is now destroyed and she has 83 views. I know this is entirely off topic but
    I had to share it with someone!

    Here is my website http://www.zgyssyw.com

  123. Please let me know if you’re looking for a writer for your site.
    You have some really good articles and I feel I would be a good
    asset. If you ever want to take some of the load off, I’d love to write some content
    for your blog in exchange for a link back to
    mine. Please shoot me an e-mail if interested. Regards!

    My homepage – email marketing

  128. Very great post. I simply stumbled upon your blog and
    wanted to mention that I’ve really enjoyed browsing your weblog posts.

    In any case I will be subscribing on your rss feed and I’m hoping you write
    again very soon!

  130. Pingback: keto hot chocolate

Leave a Reply

Your email address will not be published.