ArticlesBlog

Typography Tutorial – 10 rules to help you rule type

Typography Tutorial – 10 rules to help you rule type


[ Music ] Typography Manual. 01. Justify 02. Use One Font 03. Skip A Weight 04. Double Point Size 05. Align To One Axis 06. Pick Any Font 07. Group By Using Rules 08. Avoid The Corners 09. Mind The Gap 10. Be Bold Or Italic, Never Regular THE END.

Comments (100)

  1. Typography course is now on sale. Save $20 when you order ahead of the product launch. http://academy.thefutur.com/p/typography-01

  2. I feel the sound bumped up suddenly, very informative video, thanks!

  3. Thank you for this wonderful video

  4. Thumbs up! This video is perfect and it was really helpful!

  5. this is like the most obvious stuff ever

  6. Thank you for this really informative and helps understand for visual learners like me.

  7. I could watch this forever

  8. 1:43 I'm so relived, Avenir is my go to font ALL THE TIME.

  9. Can you explain, what's wrong with regular?

  10. what kind of fonts that he use for the animation

  11. This is really helpful, Thank you.

  12. why is this so aesthetically pleasing i love it

  13. 11 – You can break the rules, if you know the rules.

    Design is a conscious choice and should never be accidental. It might look random but if you, as the designer, can present solid arguments for whatever choice taken, it's legit.

  14. nice video! although why only those fonts mentioned? theres looooads more good ones?

  15. Knowledge was not special but video was great

  16. San Francisco > Helvetica

    Ps. Where is FF DIN??????

  17. How do u make the animation?

  18. I didn't like this video because: It didn't give enough time to read, and it had some animations between explanations, which were distracting. I think this would work best if someone was narrating it. I had to pause for every explanation to be able to read it all.

  19. This might come in handy if I need to make an essay. Thank you, The Futur.

  20. Rule #1 for video creation: Watch the final result and check if you can actually read and understand everything before progressing to the next scene 😉
    (This was way too fast)

  21. For those struggling with the speed, click the 3 small dots on the top right corner (if you're on mobile) and set playback speed to 0.75x

  22. 👍🏻 well done

  23. excuse me , why dont you regular? I don't understand this rule

  24. Hmm, 10 – Be Bold or Italic, never Regular… does this apply to everything or only in certain instances? If everything, why didn't you use Bold or Italic in your credits?

  25. This was so satisfying and helpful! Thank you!

  26. use any font you want, as long as it's one of the following?? why? + why specifically them typefaces?

  27. No one:
    The Futur: Waistcoat succulents DIY flannel locavore lumbersexual pop-up nah mi chambray, truffaut neutra mixtape

  28. The information was absolutely great but it was too fast to understand the concept had to pause multiple times

  29. Nowdays half of this dont apply

  30. what is good font name please help 🙂

  31. What font was used in this video? I just love it. (rule 01)

  32. Thanks, your video is helpful!

  33. God damn this video s a mess. Maybe I’m just stupid, but I had trouble finding out where to look first.

  34. Thanks for the video.

  35. I learned more about typography in less than 4 minutes than an entire paid online course

  36. Here's the font list, you're welcome:

    Akzidenz Grotesque,
    Avenir, Avant
    Garde,
    Bell Gothic
    Bodoni
    Bembo,
    Caslon,
    Clarendon,
    Courier,
    Din Mittelschrift,
    Franklin Gothic,
    Frutiger,
    Futura,
    Garamond,
    Gill Sans,
    Gotham.,
    Helvetica,
    Letter Gothic,
    Memphis,
    Meta.
    OCRB,
    Rockwell.
    Sabon,
    Trade Gothic,
    Trajan,
    Univers.

  37. can someone tell me what font are used in this video?

  38. Helvetian neue light is annoying its like it fades in to background .

  39. Sub indo plizzz

  40. If I used that manual, all my creations would look similar, if not the same. Luckily, David Carson exists as a counterpart to your proposal.

  41. Wait why is the placing along the edges so bad?? Because it's difficult to print in bigger amounts? Or are you just talking about the corners specifically?
    It's a beautiful element and I know a lot of people who use it, never heard a doubt about it :/

  42. Very good but too fast.

  43. @1:43 It would have been better if each of those font names were actually in that font. I would have chosen my next font right there. But that's just my lazy ass. Amazing video though 😀

  44. I just need this in my l i f e ❤

  45. I cant believe i missed this, its spectacular!!! The animation and the content, loved it

  46. why does the music feel like im about to do a scifi mission lol

  47. Love the vid! It's so useful for me

  48. I've had this question for a while. When you say stick to one font family and that family has a condensed version that is also regular, medium, bold, black, etc. would you now consider these two different fonts? considering that one is condensed and one is not. Would you advise that if I was to use the condensed version, then use all of the weights for my body text, headlines and subheadlines? or can I combine them. I hope I made sense. Thank you!

  49. It's the perfect epitome of "Brevity is the soul of a wit"

  50. sound design here is incredible

  51. "Use any font you like as long as it's one of the following…" Do you guys think that's truly educational?

  52. Isn't this video a bit satirical? First of all, why would I use only those selected fonts? I mean how boring would the Internet be to only see those fonts all the time… Second of all, what's wrong with using "regular"?

  53. Look for graffiti and see what stands out or captures your attention.

  54. Font list:
    Akzidenz Grotesque

    Avenir

    Avant Garde

    Bell Gothic

    Bodoni

    Bembo

    Caslon

    Clarendon

    Courier

    Din Mittelschrift

    Franklin Gothic

    Frutiger

    Futura

    Garamond

    Gill Sans

    Gotham

    Helvetica

    Letter Gothic

    Memphis

    Meta

    OCRB

    Rockwell

    Sabon

    Trade Gothic

    Trajan

    Univers

  55. very interesting, just wondering what font you used on the video

  56. I agree with almost everything but what do you guys mean with „use any font (as long it’s one of these)“ that’s like super restrictive and feels like something a 78 year old Sunday paper executive would say.

  57. A beautiful way to illustrate the importance of typography

  58. Thank you so much for this tutorial. Really help me understanding typography.

  59. Splendid as always.

  60. The animation was great but too fast for the blocks of text. It might have helped to have a narrator to dictate the speed.

  61. Is Roboto not considered an elegant font?

  62. Final Rule: Abandon all rules as insisted by your client. #clientfromhell

  63. Really you did a great job

  64. So clean (and so speed too)

  65. This made me very happy

  66. I found this to be a good primer, well presented. I especially liked your list of typefaces. It pleased me to see Akzidenz Grotesque get some love and attention. I would humbly suggest adding one more: Eurostile.

  67. Cool vid. It reminded me of being on the start menu of The Sims

  68. Note to self: 1:44

  69. This is so well explained. But unfortunately some clients turn a blind eye to all these pointers which makes the end product look like garbage.

  70. Rule 11: See Butterick’s Practical Typography

  71. couldn't ask for more perfect video – animations are too lit ! Thanks for Sharing

  72. Very cool tip! But try and be creative and break the rules once in a while. If everyone’s doing the same thing then design gets boring.

  73. i'm not sure about the 08. I'm living in japan and they avoid this rule for everything. that means you need to study the target first of all.

  74. CAN WE TALK ABOUT THE SOUND EFFECTS!>!? Sound designer killed it. I love the sound in this video, it steps the animtation up to 10000%

  75. This vid is an art piece on its own

  76. 11. Break rules in the right way.

  77. "Use any font you want…"

    "…as long as it's [lists fonts only two of which are even on my computer]"

    (P.S. "Never force justify"? Screw that. It looks so much better when it's squared off.)

  78. is this just graphic design satire

  79. its ok to use corners sometimes

  80. I'm assuming rule No. 6 was a joke

  81. One rule is missing: Ignore the spirit of the time.

  82. Your animation skills are Great !!!

  83. 18 seconds in and there are already orphans. This isn't a typography manual to rule type, it's guide on how to have clean and organised typesetting.

    Brilliant animation, and nails the most important parts of clear typesetting in a 3 minute video, but let down as this video is a little like saying a twig is the whole tree.

  84. What do you mean "Bold or Italic, never Regular"?

    What about for body?

  85. Rule to make a tutorial. Make sure you give enough time for people to read the content you are providing. Good tut otherwise.

  86. Subs in spanish 🙏🏻 ???

  87. If you're capable of doing something better, do it.
    Formulaic mediocrity is nice standard for the apathetic and all encompassing design. That's why they call it basic.

  88. For number 8, is there a rule of thumb for when to push an element off the page? Or just any other guide on that? Can't seem to string the right words together on google to find an effective answer. 🙂

  89. Chris seems like a douchebag

Comment here