WhatTheFont : MyFonts. The League of Moveable Type. Five simple steps to better typography. – April 13th, 2005 – Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography. Call me a little bit purist but this bothers me. So, in an attempt to spread the word here’s the first of five simple steps to better typography. Measure the Measure. The Measure is the name given to the width of a body of type. One point = 1/72 of an inchOne pica = 12 pointsOne em = The distance horizontally equal to the type size, in points, you are using. But, with the advent of DTP packages and the website design the following are also now used: MillimetresPixels There is an optimum width for a Measure and that is defined by the amount of characters are in the line.
CSS and fluid? What is interesting here is fluid designs on the web. The Measure and leading. Reversing out? Tracking Your responsibility The series Further reading. Erik Spiekermann’s Typo Tips. 8 Simple Ways to Improve Typography In Your Designs - Smashing Magazine. Advertisement Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there.
But there is much more to achieving good typography and it’s in the details that designers often neglect. These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. 1. The measure is the length of a line of type. A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30.
I’m using px because it makes the math easier but this also works with em’s. 2. Leading is the space between the lines of type in a body of copy that plays a big role in readability. Many factors affect leading: typeface, type size, weight, case, measure, wordspacing, etc. This takes some finessing to get the right spacing but here is an example of what the code would look like: 3. 4. 5. 6. 7. 8.
It's done. AisleOne - Graphic Design, Typography and Grid Systems.