How To Create Great Web Typography in 10 Minutes

How To Create Great Web Typography in 10 Minutes

Typography in web design can be a lot more complex than it seems. Being able to read content easily is a leading usability concern, but typography is also very much an aesthetic concern. For many designers, creating the perfect typography can be a mystery. Switching back and forth between type sizes, heading proportions, font styles, and spacing can give any designer a headache. After hours of fiddling, it can still just “not feel right.

How To Create Great Web Typography in 10 Minutes

In this article we’ll go over how to adjust typography from a more official and mathematical standpoint – and we can get the typography of any website perfected in 10 minutes or less.

Set a Baseline / Vertical Rhythm

Imagine back in grade school when you used lined notebook paper for everything. You wrote titles, paragraphs, and lists for notes, and they all adhered to the rules of the horizontal lines guiding them. Everything was evenly spaced and proportioned onto the set lines, and everything was kept organized. This is vertical rhythm. On the web, we don’t have horizontal lines guiding us to create typography, but the effect can still be the same when we adhere to those imaginary horizontal lines. For easily legible typography that gives off a great aesthetic effect and put-together look, adhere everything to that imaginary notebook – web typography’s baseline or vertical rhythm.

Vertical Rhythm
Image credit: pinksherbet

  1. Determine a base font size. A 0.75em font size is common; adjust as necessary to fit needs or preferences. EM’s are most appropriate so IE users can adjust font size if necessary, but if you think in points or pixels better, use this for now and convert later with this tool: PXtoEM.com.
  2. Set a line height of around 1.5x the base font size. So if you have a 0.75em base font size, the line height would be 1.125em, or 1.12em-1.13em. This is a good starting point and is the most common. It’s also the most legible in many situations. However, this set amount is not essential to creating vertical rhythm. Adjust slightly as necessary, but be sure not to sway the line height too short or too long.
  3. Apply a line height to all other text on the page: paragraphs, lists, headings, etc. Your line height is like the height of each line on a piece of notebook paper. To calculate this line height: baseline (regular text) line height / font size. So, if one of our heading tags is at a height of 1.5em, then we would take our baseline height (1.125em) / current font size (1.5em), which would make us set our heading line height to 0.75em.
  4. Set the bottom margin of text elements. The bottom margin on elements that need it should be equal to their line height. This acts as an extra line that has not been used on our “notebook paper.”

Below is an example of what we just did in CSS:

h1{
	font-size: 1.5em;
	line-height: .75em; // (1.125 / 1.5)
}
h2{
	font-size: 1.3em;
	line-height: .87em; // (1.125 / 1.3)
}
//("1.13" is our rounded "1.125")
p,ol,ul,pre,code{font-size: .75em; line-height: 1.13em;}

Pick a Font Family

The font style you choose may very much depend on the rest of the web design style. More contemporary websites will want sans-serif fonts, or blockier serif fonts. Web designs with a more traditional or rusty look will want serif fonts. As a designer, that portion is up to you. Don’t necessarily over think it though. Decide between serif or sans-serif depending on 1) readability and 2) design style.

Then, use a tool like Typechart to browse font styles. Find a decent font stack to go with it from a post like this: 8 Definitive Web Font Stacks.

Type Chart

Also use a service like Font Squirrel and CSS3’s @font-face to get a more unique font for headings or larger pieces of text.

Font Squirrel

Visual Hierarchy & Headings

Designing headings can be tricky as well. Hopefully, the issue of margins and spacing between headings has been made easier with the use of vertical rhythm above. Top margins may be what designers are more concerned with, as headings should have enough space from the content above it to be distinguished from it. Feel free to add a top margin, but adhere it to multiples of the line height to keep to baseline rhythm.

Headings

Otherwise, creating different font styles for headings can be relatively easy — not a whole lot of science to it, so feel free to be creative. Below are a few tips:

  • Contrasting colors stand out more, so use them for main section headings.
  • It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bolds.
  • The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simpler; closer to the base font style.

Choose Font Colors

Finding color for your text can also be tricky. Straight black text on a white background can be a little harsh so many designers find themselves experimenting with variations of darker grays. A charcoal gray seems to be the most common (#333333), however some websites like to go as light as (#666666). With dark backgrounds the same applies, only opposite. Backgrounds may not be necessarily straight black, and the lighter font color may not be straight white, but a light gray instead.

Contrast in color is important because it can either be too harsh, or too little for illegibility. Either follow trends to know what works best, or try reading a few paragraphs yourself to get a feel for the contrast. Is it enough? Should it be increased? Decreased?

Of course, not all pages are black and white. That was just a quick lesson in contrast. The same principles apply when using dark blue vs. light blue, or shades of beige and browns.

There’s no set rule for choosing font colors either. Use instinct and read through the text yourself in order to determine if it’s legible and visually appealing. Below are a few more things to keep in mind for other areas:

  • Don’t be afraid to use variations in contrast! On many websites, the base font color may be a dark gray, yet certain areas of text may be a lighter gray, such as the meta info on a blog post. Using these variations can make for a much more interesting text visually, as well as help create hierarchy.
  • Use color for headings. It can help them stand out better, and in the right order. Brighter colors will gain more attention, contrasting colors will gain more attention, and the opposite of these will gain less attention. Use color wisely in headings to create the right effect. This may just take some experimentation, but don’t overthink it.
  • Links should be colored, with similar contrast to the base text contrast. It’s a standard for links to be a different color from the rest of the text, whether or not other styles are put into place to differentiate them, such as boldness. It can be considered a usability issue if not placed in a separate color. Use a color that compliments the design and branding of the site to help any links fit in to the design.

Conclusion

Web typography does not have to be hard, although it still is for many designers. For much of it, there can be a set standard and the use of mathematics can solve a lot of problems into perfection. Other choices do take more thought and design instinct, but that can come with experience. Many designers tend to use the same font styles in many of their designs, merely because their own unique designs mimic one another as well, and their font style can be shared across different projects. Feel free to re-use your own set of rules after a first few times of debating the smaller details. It can speed up this portion of web design dramatically, both from a design and coding perspective.
Feel free to share any further tips on creating great typography, and any methods you use to figure out how to implement great typography quickly and sure-proof.

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    This is one really good and useful article, I’ve always been struggling with the typography but this looks like a very good approach. Thank you :)

  2. / Reply

    I know – web typography is my weakest point – and this article will definitely help me improve. Thank you!

    • Michael Stevens,
    • June 7, 2011
    / Reply

    Just went to a great web conference in Portland last week and some other great options they suggested were using vendors like typekit which use the @font-face code and allow you to micro manage your fonts via a sweet cms and simplify the embedding process and browser compatibility by only requiring a simple line of javascript to make it work. If you haven’t yet I highly suggest you read Jason Cranford Teague, Fluid Web Typography. Don’t get scared by the cover because it’s hideous but the content is actually extremely good and valid.

    • Adam,
    • June 8, 2011
    / Reply

    Liking the maths angle, I guess in the end the human eye method of what ‘looks right’ is probably just our minds trying to get it to align with the vertical grid.

    • Josh,
    • June 9, 2011
    / Reply

    The tips are great, but for me 10 minutes doesn’t seem all that reasonable of a time limit. I’ve been known to spend an hour just trying out link color combinations.. But i’m a little crazy about colors :)

  3. / Reply

    Quite helpful post to solve some typography problems occured while designing.
    Here you are some other inspiration resource http://blog.websitetemplates.bz/website_templates_news/inspiring-typography-showcase.html to get fresh typography ideas
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.