Hey guys! Today, I’m trying to make the world a better place by talking about typography. I’m not just talking FONTS, but really about the use of typography in design, specifically on the web.
If you don’t care about typography, then here is the Instagram feed of Aslan Creampuff Atwood. You are welcome.
When you are designing a website, creating a style guide for consistency is the first step you take toward framing your content in a custom design. A style guide is simply a document outlining your palette (with hexidecimal values) , design elements, and typography choices.
1. 3 fonts per site is ideal, 5 max.
Take some time to learn and understand the best practices for typeface combination. This will make your site more beautiful, and will help you with understanding design in general.
Take a look at this article about Best Practices of Combining Typefaces.
2. Create a font style guide based on type roles.
Assign fonts to directions, information, connection, and other goals on the site. This role-based assignment creates continuity and establishes a trust relationship with your audience.
For example, you might choose one font for post headers, and mirror that in a different size for the sidebar headers indicating “titles”. You might choose a different font for calls to action or connection, “Go here” “buy this” “follow me”.
3. Learn a bit about Websafe fonts and CSS Font stacks.
Your site will load quickest if you use a websafe font for the bulk of the content. Most developers will use a FONTSTACK for this. A fontstack is a directive for the code that instructs the site to show whichever font is available on that computer that aligns with the fontstack.
For example, if you choose Baskerville as your serif font, it will choose Baskerville, if it’s available, or it will try Hoefler, Garamond, Times New Roman or “serif” – the default serif on that computer.
You can learn more about Font stacks at CSS Font Stack.
It used to be that websafe fonts were the only option. These fonts existed as digital versions of typefaces that had been optimized for print. In this day & age, Google fonts, Typekit, and a number of other options make it possible for you to choose from 10, 000 different fonts for your site. This gives designers a ton more flexibility in design, but can also set you up for failure if your choices aren’t readable in large blocks, or if they don’t have the right weights for their roles. Take time to test your layouts and be sure that you’re not sacrificing usability for your font choices.
Also, it should be noted that using embedded fonts does have an effect on overall site load speed. If you have issues with this, you should consider minimizing your use of non-websafe fonts.
4. Follow standards for body copy size.
Standards say 14- 16 pixels is the standard for body copy. You should make this choice based on your audience and whether or not your site will be responsive. If your site is responsive, readability shouldn’t be an issue on mobile devices. If you audience is generally 20 – 35, you’re safe with 14 pixel height, but the reality is that over the age of 40, most people only get half the light through their retina that they did at 20 years old. From a design perspective, it’s my opinion that aesthetics drop off at 16 pixels. It can look a little junior to have copy so big, but since it’s best practice never to sacrifice usability for aesthetics, you have to make that choice based on your audience.
5. Padding, Padding, PADDING.
All good designers know that composition is everything. Nothing makes a site design look more amateur than a lack of padding around type or design elements. This is in reference to content graphics as well.You have to give your elements room to breathe, and give them balance. White space is a tool that you use to draw the eye through a site design. White space is not necessarily white. It’s just an invisible frame that gives each element importance. The space should be equal and balanced. Padding also benefits the overall legibility for your typographic elements.
Bonus note: FORBIDDEN FONTS
I have very recently decided it’s a waste of time to tell clients what fonts they can & can’t use. Truthfully, I’m learning it’s a little like religion. Everyone is at a different place in their journey, and if you’re in a place where Curlz is your favorite font, then I guess, you should just keep on going with that until you burn out and move on to Papyrus. You can’t force someone to have good font taste. Trust me, I’ve tried. All you can do is show them the future and hope they get on board. Nobody says it better than EPIC designer Jessica Hische — Go visit her at http://jessicahische.is/