The Art of Typography

    0
    575
    The Art of Typography
    The Art of Typography

    Best Programs for Typography

    • Adobe InDesign – best for laying the type on the page
    • Adobe Photoshop – best for manipulating the type
    • Adobe Illustrator – used for creating own type styles and fonts

    Fonts

    If using InDesign, you have a preexisting set of fonts that are great.  If we ever want to use additional fonts, here are the best places to retrieve them:

    If you need to identify a particular font, use Whats The Font from myfonts.com

    • this is also a great way to find fonts that are similar to custom fonts (primarily used by businesses)

    For more information, check Thinking With Type which has great definitions and examples

    History of Typography

    Typography hasn’t changed much since the Renaissance period.  It all starts in 15th century Germany with Gutenberg who wanted to use movable type.  It wasn’t a new idea, it was used in China and had been imported from Italy.  His difference was the movable type printing press.  His printing press allowed for typography to evolve over time.

    The first typographic style was a black letter (insert graphic) style which was popular at the time in Germany.

    Black Letter font used by Johan Guttenberg
    Black Letter font used by Johan Guttenberg

     

     

     

     

     

    This style was used to mimic the common caligraphy used at the time, so it established the first of the typographic rules that we use to this day.

    The printing revolution swept across Europe and every country had it’s own font.  Eventually, printers moved from Gothic type to move elegant font faces, which we know as Roman.  Many of these typefaces are still used today, like:

    • Garamond – Designed by Claude Garamond in France in 1530
    • Caslon – Designed by Willian Caslon in England in 1722
    • Baskerville – Designed by Jon Baskerville in England in 1757
    • Fornier – Designed by Pierre Fornier in France in 1740

    By 1800’s, typographics started devoloping modern type faces, with vertical shading and non-bracketed serifs. Among these,

    • Didot – Ferman Didot in France in late 1800
    • Bodoni – By Gian Bodoni in Parma, Italy in 1798

    Cheap printing continued and apace and led to rapid developments, including many of the fonts we use today, like

    • Times New Roman – by Stanley Morrison in England in 1932

    The process of printing type also improved.  Letter Press Printing became overtaken by Offset Lythography Printing in 1960’s.

    Typography and fonts represent the times and conditions in which they are used and developed.

    What Makes a Type Face Enduring

    Many of our modern typefaces are the perfect balance between legibility and elegance, with planned spaces between characters (tracking).  This is what makes typography an art form, it looks simple, but it is an exercise in perfecting your design.

    Book Typesetting

    Books, originally Gutenberg’s Bible, offer the first examples of typeography and typesetting in Western culture.  Currently, there is a whole field of study around typesetting and professionals are very well paid for laying out content on pages.

    How Typography Has Evolved

    The 20th century was the age of the poster.  We saw an explosion of commercial advertising.  This led directly to modernism and the swiss style

    Modernism is a term used to define a set of styles that dominated design.  It is characterized by:

    • art deco – Geometric and lavish, decorative style
    • cubism – Pablo Piccasso

    In the 1920’s, a group of Swiss designers under the axiom “Form Follows Function” applied typographic principles while focusing on:

    • Minimalism
    • Uniformity
    • Geometry
    • and Layout Grids

    Additionally, they favored sans-serif fonts, focusing on the use of Helvetica.  By the 60’s, Swiss designers were considered the best-of-class and their designs and principles were considered the pinnacle of modern design.  This is also known as the International Style movement.

    Check out “Just My Type” by Simon Garfield for more info.

    The international style is still the dominant paradigm in typesetting.  It has a few important components:

    • It’s about the grid – break the layout into precise rows or columns to help channel the type, and get more experimental with the placement of text
    • Sans Serifs – Helvetica, Universe, and Avenir all emerged from international style.  Added benefit is that sans serif font doesn’t compete with graphics and they prioritize the text content.
    • Keep colors to a minimum – Apply fewer, high-contrasting colors to your type which makes designs stand out better.

    Components of a Poster

    • A Heading – Large Title
    • B Heading – Smaller, sub headings or strap lines
    • Body Text – Main quantity of text, which will be smaller

    The Art of Typography

    Typography uses many rules to help lead the development of individual typographic styles in the proper direction.

    Grid + Typeface + Formatting + Alignment + a bit more Formatting

    Grid

    • before we start putting any content on our page, we need to define the structure of what we are creating
    • always start with the grid when designing – make use of guides and grids to achieve your baseline structure before you even begin

    Typeface

    • This is a very personal decision.  That said, there are some classic typefaces (discussed earlier) that will never go out of style.
      • Garamond
      • Baskerville
      • Caslon
      • Fournier
      • Didot
      • Bodoni
    • There are also new typefaces being generated all the time, some can be used to great effect
      • Aller – Clean and simple, get from FontSquirrel
      • Paciencia – Interesting take on Serif style, get from FontSquirrel

    Formatting

    • Weight – Can use the regular, bold, or italic weights, but can also use condensed, black, thin, medium, or semibold
    • Size – Determine the size of your type in point metrics
    • Leading – Space between the baseline of each line of font.  Leave atleast to auto, increase if desirable
    • Tracking – Space between characters in a line
    • Kerning – Not to be confused with tracking, kerning is the space between any two characters.  This is used to balance a word on the page.
    • Drop Cap – Pull out the first character, increase the size and place it to the left of the paragraph.  It is an appealing visual effect.

    Alignment

    • Left
    • Right
    • Center
    • Justify – stretch text across the given frame
    • Toward or Away from Spine – Can also align it toward or away from the book spine

    a bit more Formatting

    • Anything that needs to be modified?
    • Hyphenation?
    • Would larger block of text benefit from indents?
    • Optical Alignment – In the story panel in inDesign, probably available elsewhere, can have computer shift around text and margins for great visual appeal.

    These rules are used to guide your design and a whole world of complexity and creativity can be achieved by working within these rules to develop your own style.

    Type with Personality

    Modern typographic designers wanted typography to be a more significant part of our lives.  They wanted type to shape our emotional response to print communications.  Here is a list of how typefaces make you feel:

    • Futura – Clean and minimal with rounded, bouncy qualities which suggest friendliness
    • Verdana – One of the most popular fonts on the web, verdana has a wide appeal internationally.  It is more edgy and shouts the information rather than simply conveys it.
    • Comic-Sans – Juvenile and slightly irritating, this font is fun yet annoys a large part of many audiences.  People dont take it seriously, or the messages conveyed through the text
    • Didot – Typeface of choice for high-end designs.  Didot and Bodoni have become the fonts for high-fashion.  The font is directed towards ladies, while Bodoni is more for everyone. Didot is aspirational, it can convey a sense of style, sophistication, and wealth beyond simply the content.  Makes you more inclined to spend money.
    • Optima – Used to convey trustworthiness and healthiness.  Also used for reflective displays, it has a light yet dignified quality.

    Typefaces can embody human emotions.  It can have a significant impact on how the viewer emotes from our text.  It’s not only the font that can cause an emotional reaction, spacing and capitalization can also have an impact.  Subtle tweeks to the typography can have an outsize impact on the viewers and these messages are often received subconsciously.

    When setting your type, don’t just think about the technical aspects of the font, also think about the personality and adjust the type to reflect your brand.

    Is Digital Typography Art?

    Typography Defined – The art, or skill, of designing communication by means of the printed word – Ruari McLean in The Thames & Hudson Manual of Typography, Page 8

    We will no longer see printed works nearly as much, most of our experience with typography will consist of websites and reading text on phones and devices.  Does this make the text design any less typographic?

    Digital typography is just as much of an art and a skill as printed typography.  They both share the same roots and apply the same rules.  What digital typography does entail is that we have to evolve and adapt to new ways of rendering type to audiences.

    Different Branches of Typography

    • Typsetting
    • Type Design
    • Logo Design
    • Digital Typography – as the quality of web design improves, the need for understanding the use of digital typography grows as well.

    Digital Typography is a separate field of typography because the methods and tools we use to achieve our typographic goals will be quite different from those used in print designs.  Conversely, as our type will need to be coded, there are additional restrictions that print designers don’t run into.  However, being able to enhance our type designs with animations and video makes the trade-off worth it.  We can create interactive designs that aren’t possible with print media.

    New fonts have also been developed for use on the web.  Check out http://google.com/fonts and http://typekit.com to see the newest typefaces for the web.  New fonts are created all the time!

    These new fonts allow web typographers to create print-standard works.  We can also start to create the typographic effects that were only available to print designers.  Additionally, we can prioritize the text on the page to make the content stand out.  The web is moving towards an understated minimalism, the type that good typography naturally leads to.  Web pages are becoming more legible and readable and engaging.

    This trend will only accelerate as more traditional medias are overtaken by digital forms.  The future of typography is certainly digital and the new advancements are moving the field forward.

    Creating Your Own Fonts

    Adding your inspiration to the world of fonts couldn’t be easier than it is right now.  There are great software programs developed within the past few years to give designers the tools they need to create their own font libraries.  Amongst the software options (most are developed for Mac), here are the best:

    Conclusion

    In conclusion, typography is an art  form that has be continually reinvented for over 100 years, and the speed of reinvention is picking up.  The digital world offers possibilities that couldn’t have even been imagined, but it is important to use the concepts of print to ensure that your designs convey their information correctly.  For more information about these topics, use these resources:

    Print Typography

    • Letterpress – Traditional typography used in a modern and hip way.  There are tons of designers whom specialize in producing designs for letterpress.
    • Publishing Design – Print book design, once a dying industry, has experienced a resurgence thanks to users preferring the printed page to eBooks.  They are looking back to traditional techniques to create nostalgic, unique items that readers can treasure.

    Digital Typography

    • Websites – When looking around the web, take note of designs your really like and research the design team, odds are there are just a handful of teams whom are creating the designs that really resonate with you.
    • Responsive Typography – Jason Pamental has written a book to help with understand how to use text in a responsive fashion. Or check his website at rwt.io