08Feb

More Perfect Typography with Tim Brown

Tim Brown is the Type Manager for Typekit and one of the leaders in the field of typography. The following is a summarization of a presentation by Brown that was shot for a recent edition of ‘Build’. Throughout the video, Brown explains the importance of typography in creating an experience through the use of modular scales and the use of typeface which plays a huge part in setting the tone of a layout.


History of Typography

The Picture from Bill

About 500 years ago, a man named Aldus Pius Manutius set up a print shop in Venice that would become the start of typography. Fifty years prior to Aldus, Gutenberg was pressing the first Bibles. Aldus was a man who knew what constituted a print shop. He knew what equipment was needed, such as metal letters and enough of them to print the text he had intended to press. He also knew that he needed like-minded people to work with him and for him. His print shop would cast pieces of lead into a mold or fonte. This was the origin of the word ‘font’. Metal sorts were put into a typecase that were sorted by letter. In addition, to having multiples of one letter there were also upper and lower case letters. When you ran out of letters, you were said to ‘run out of sorts’. The individual letters would be placed into a composing stick, upside down and backwards. They were then put into a press, inked, and pressed. Putting the wrong letters in the wrong typecase, one by one, caused mistakes to be made. Sometimes, they were just put back in the incorrect place. Incorrect fonts can be seen in some of Aldus’ pristine works. This is what set him apart in creating his style of typography. Despite the fact that physical constraints made typography a slow and grueling process, Aldus was able to create beautiful typeface that was ahead of its time and change the format for printed books forever. How was he able to create some of the finest examples of typesetting? We still hold Aldian typography as a high standard and yet these people were no different from us, other than having a lack of technology. Obviously, Aldus cared about his craft more than people at the time. How can we incorporate this into what we do today? These people were the same as you and me. How do we put that type of craftsmanship into our work? You must start with type. Aldus took inspiration from those who were printing small quantities of quality work in Venice. He was able to introduce Roman type to the world, instead of the normal black letter. He had commissioned Francesco Griffo to cut the typeface. Aldus was one of the first typographers to create his own print shop that was not controlled by the Roman church. Instead, he chose to print Greek text. Since this style was different, he was able to reach more people with books that were smaller, easier to read, and cheaper to produce. In addition, he introduced italics to typography, which was also commissioned Griffo to cut this slanted typeface.

Using Typeface to ‘Color’ Your Content

The Picture from Antonio

While at Vassar College in New York, Tim Brown needed to be inspired to help with his designs. Brown usually started by drawing boxes on a canvas. He would then add colors or a gradient to achieve inspiration. He looked everywhere for inspiration that would serve as a hook. It could come from natural aesthetics outdoors or the ideas of people who he was designing the content for. This hook would be the basis for an experience. Look at the typeface you use. By looking here, you will be able to conjure up experiences. We have infinite choice and the ability to integrate these types quickly and see our work firsthand. There is no waiting for physical printing to occur. You are trying to convey something about the content. Typesetting is what colors the content and also sets the tone for the experience. Jason Santa Maria quoted “write down a general description of the qualities you are trying to convey, and then look for the typefaces that embody those qualities.” Find a typeface that suits the goal of your particular design and then find the cues in that typeface that can be extended into the design. Dan Mall stated that features of typefaces can be applied to design elements. There are rounded and angular typefaces that are expressed with line quality and the weight of the text. The ‘Hypnerotomachia Poliphili’ is renowned for the way the text and illustrations match in typographic tone and line quality.

Setting the Tone of the Experience with Typeface and Modular Scales


Body text is the best place to start, since it sets the tone for the experience. It is good to go back and forth between a specimen and trying type. Look at a specimen and find out if it is suitable for body text type. It is necessary to go back to your content and see how the typeface looks on the site you are developing. If the body text looks right, you will want to go back to the specimen and adjust the font size until it looks crisp. A font will not look correct if the pixel size is not adjusted. Fonts are larger and smaller within an M box. There will always be a ‘sweet spot’ for the size. Next, move onto giving your text personality using headings, subheadings, and captions. These give the text character and personality. Typefaces can even have a role in the description of an emotion. This text can have a textual description that describe how the text feels. They can be characterized as tough, fun, party, debonair, or even plain-spoken. Starting with type, you can select a font that can create a very powerful experience. To bring out typeface in a layout, you will want to use modular scales. Modular scales are unique measurements for a project that can be very useful in attaining that ‘sweet spot’ of size or space in your content. When Griffo was cutting typefaces for Aldus, he was using set solid. There was no such thing as leading. The amount of space between lines of typing was designed. It was part of the typefaces proportions. The letters that were boxed in showed the module that Aldus used. Em boxes become your font size when you have glyphs in them. Font size can be used for the basis of modular measurement. The key font size is the first portion of a modular scale. The second portion is a ratio. The font size can be attained using the ‘Golden’ ratio of 1:1.618. Using some math, you take your type size and multiply it by the ratio to attain the perfect text size. It can also be divided, if it is necessary to make the type smaller. You will begin to see a modular scale that is a set of harmonious numbers. You can start with your key type size. It is possible to go up and down on the range of harmonious numbers. This ratio can be implemented into any form of content and can even be put into set parameters, such as those found in video or images. Take these two strands of numbers and integrate them into one flexible modular scale. To make these ratios even easier to calculate, Tim Brown has designed Modularscale.com for typographers. This site will accept an ideal type size and then will give you the perfect ratios. There are other harmonious ratios such as the musical fifth and the musical fourth that can also be implemented into this modular scale program. Now, with the set of numbers that you receive from the scale you can set a paragraph in the size and font you like. Then, give it a width, length, and line height from the modular scale. The distance between two text blocks, headings, introduction paragraphs can all be sized properly with numbers from the scale. Despite the use of the Golden ratio, there is no substitute for a designer’s eye. Why are these harmonious numbers better to use than easily divisible numbers, arbitrary numbers, and numbers based on view-ports that are important today? If you flip back and forth between arbitrary numbers and the Golden ratio, you can see that the one with the ratio feels right. Designers have a sensibility of what feels right based on abstract details.

Using Modular Scales

When designing with modular scales, keep in mind view-port limitations which may affect the user experience. Going outside of the typical 960 grid system can cause viewing problems. 960 is a safe work area but it is better to create a design layout that truly resonates with the content and text. You should keep in mind your parameters that way you do not exceed your boundaries and lessen the user experience. Reset styles are another aspect of typography that needs to be focused on. You do not want to work with a measurement that gets changed upon being published on a website. Modular scales will work with grid systems. Using the ratios that are mentioned can actually be rounded if necessary to create a look that is agreeable. The idea is that you are working towards a goal that can be changed for viewing pleasure. In addition, modular ratios can be used with baseline rhythms to adjust line height vertically throughout your layout. Reference points must be also kept in mind. You can have several reference points on a layout that are each inspired by a scale. You should be able to responsibly move between them. Modular scales can also work with image crops. Using the numbers on the scale will allow you to set the image in a way that is proportionate. If this doesn’t work, you can always crop the image until the subject takes up the amount of room that makes sense.

Applying Typography to the Modern World

There is a value of proportion and ratio in design work. However, perfection is inflexible. We can take an asynchronous approach to using ratios in our work. Measurements can relate to each other without strictness. Widths and individual vertical measurements can come from a scale but no two numbers need to be the ratio that inspires the entire layout. It is possible to use modular scales together and not have them compliment each other. Designers are using techniques like this in their work, though it is not being talked about enough. We have new challenges, as did Aldus, and can now apply it in a web-native way that we understand. Typography can help resonate whole experiences within the user and create a purpose that is suited to your design’s intentions.

What do you think about Tim Brown’s Talk? Did you used Modular Scales before? Let us to know

Be Sociable, Share!

    Tags:

    2 Responses to “More Perfect Typography with Tim Brown”

    1. This was really helpful! I’ve been trying to learn everything I can about typography.

    Track Backs


    Leave a Reply