<\/p>\n

Greetings and Salutations budding graphic designers!<\/p>\n

This article is the first of many addressing a pressing need within the Web Design community.\u00a0 Many beginners learn how to work with HTML and CSS but never seem to be able to recreate some of the fantastic looking websites professionals build for their clients.<\/p>\n

\n

The main reason can be found in the beginner developer\u2019s lack of graphic design skills. I can swing an axe and use a garden hose; but it doesn\u2019t make me a fireman.<\/p>\n

So too can someone learn how to put a .jpg on a HTML site; though it doesn\u2019t make them a web designer.\u00a0 So, the good people behind killersites.com have commissioned the next series of articles to help beginners learn how to design like the pros.<\/p>\n

Our journey begins by taking a closer look at typography.<\/p>\n

The Categories of Typography<\/strong><\/p>\n

Have you ever been sitting in front of your computer and been left dizzy after trying to decide which of the hundreds, if not thousands of typefaces to choose for a particular task.\u00a0 This can be daunting for the expert let alone a beginner.\u00a0 Yet understanding type is most likely one of the single most important aspects of any design challenge. If you can navigate these stormy waters, you\u2019ll be well on your way to making informed and beautiful typographic decisions in all of your future work. And so, we\u2019ll first look at the different categories of type and their historical origins.<\/p>\n

Before we begin, I\u2019ll mention a number of textbooks that I often recommend to my design students.<\/p>\n

Ellen Luptin\u2019s \u201cThinking with Type<\/a>\u201d is a great primer that also has a good accompanying website<\/a> .\u00a0 It\u2019s a great place to get started and will also cover areas that are looked at only briefly in this article.<\/p>\n

\u201cThe Non-Designer\u2019s Design and Type Book<\/a>\u201d by Robin Williams (no, not that<\/strong> Robin Williams) is a wonderful starting point for most beginners who have no formal training and wish to jump right into design.<\/p>\n

James Felici\u2019s \u201cThe Complete Manual of Typography<\/a>\u201d is a much more in depth look at type and typesetting on the computer.\u00a0 I would recommend this book for the intermediate level design student who is also interested in desktop publishing, or type for print rather than the web.<\/p>\n

Finally, I can also recommend \u201cThe Elements of Typographic Style<\/a>\u201d by Robert Bringhurst.\u00a0 This work is perhaps the most long-winded of all the recommended texts and probably the driest of the bunch as well.\u00a0 However, it\u2019s the one you\u2019ll most likely find on the syllabi of most design professors in universities across Europe and North America, as well as on the bookshelves of most professionals working in the industry.<\/p>\n

Now that we\u2019ve dispensed with the formalities, let\u2019s take a look at different typefaces.<\/p>\n

One of the easiest ways of understanding type is by attempting to place the typeface into one of six different classifications.\u00a0 They are:<\/p>\n

\n
• OldStyle<\/li>\n
• Modern<\/li>\n
• Slab serif<\/li>\n
• Sans serif<\/li>\n
• Decorative<\/li>\n
• Script<\/li>\n<\/ul>\n

  In order to classify any font, you will be looking for three distinct hallmarks to help you in your task.\u00a0 We will look at these more closely on an individual basis, but to start, the hallmarks are:<\/p>\n

  \n
  • Inclusion of a serif<\/li>\n
  • Thick and thin transitions<\/li>\n
  • Stress lines<\/li>\n<\/ul>\n

    Oldstyle<\/strong><\/p>\n

    The oldstyle typefaces were created in Italy in the late fifteenth and early sixteenth centuries.\u00a0 Typographers modeled their fonts after the handwriting of the Italian humanists.\u00a0 For this reason oldstyle fonts have distinct features which are reminiscent of script, though they are not script fonts (that will come later).<\/p>\n

    The three hallmarks mentioned earlier are all created in this first category because of its origins.\u00a0 Oldstyle fonts always have serifs which are angled diagonally, much like handwriting created with a calligraphic pen would. That same pen would also create moderately thick\/thin transitions in each stroke.\u00a0 Finally, if you were to draw a line through the two thinnest parts of a circular letterform, you would find a diagonal stress line.<\/p>\n

    <\/a><\/p>\n

    The importance of classifying a typeface becomes increasingly important with the message your design wishes to communicate.\u00a0 If your message is one of a classical reference, a reputable institution or company, or anything steeped in tradition or history; then an oldstyle font may be the best one to choose.<\/p>\n

    <\/a><\/p>\n

    Some examples in this category are: Times, Goudy, Palatino, and Garamond.<\/p>\n

    Modern<\/strong><\/p>\n

    In the 1700s typography started moving towards a more mechanical means of production. As such, type produced during this period began to look less like handwriting and more mechanical in nature.<\/p>\n

    Modern typefaces have the same hallmarks as the previous category of type, however they are quite different.\u00a0 The striking appearance of these fonts is highlighted by horizontal serifs that are very thin.\u00a0 As well, the thick\/thin transitions in the strokes are radically different giving the type a very elegant look.\u00a0 Finally, if you were to draw a line from the circular letterforms thinnest points, you would see that the stress lines in these fonts are always vertical.<\/p>\n

    <\/a><\/p>\n

    Some examples in this category are: Bodoni, Onyx and Ultra.<\/p>\n

    Slab serif<\/strong><\/p>\n

    <\/strong><\/p>\n

    As the industrial revolution ushered in the age of advertising, typographers were confronted with the need for thicker type.\u00a0 Posters would need a stronger typeface to be seen properly from a distance, and so, the slab serif was developed.<\/p>\n

    The three hallmarks in a slab serif are characterised by a very mechanical looking font that is thicker than any used before.\u00a0 Serifs on lowercase letters are horizontal like in a modern font, but they are always thick.\u00a0 There is almost no transition in the thickness of the strokes, and because of this, the stress lines are always vertical.<\/p>\n

    <\/a><\/p>\n

    Some examples in this category are: Clarendon, Courier, American Typewriter and Memphis.<\/p>\n

    Sans serif<\/strong><\/p>\n

    <\/strong><\/p>\n

    The most modern category of Type is probably the sans serif which was fully developed in the twentieth century. The word \u201csans\u201d means \u201cwithout” in French, so these typefaces are characterized by their lack of serif.<\/p>\n

    They are very mechanical looking in nature, but can be used any time a clean modern typeface is needed.\u00a0 The 1980s saw the creation of Verdana, which also points to the fact that sans serif type is especially favoured for onscreen legibility.<\/p>\n

    As was mentioned earlier, sans serif type has no serifs whatsoever. They contain no transitions in the thickness of their strokes which leads to a very modern, clean, and mechanical looking type.\u00a0 Since they are monoweight, there is no stress line in this category of typeface.<\/p>\n

    <\/a><\/p>\n

    Some examples in this category are: Helvetica, Verdana, Gill sans, and Futura.<\/p>\n

    Script<\/strong><\/p>\n

    <\/strong><\/p>\n

    Scripts can be categorized into many different subheadings.\u00a0 Calligraphic, pen or pencil strokes, markers and brushes.\u00a0 However, for our purposes, it\u2019s easier for us to lump anything that looks like it was handwritten into this category.<\/p>\n

    There are no traditional hallmarks to look for in this category.\u00a0 Do remember never to set this type in all capitals, to use them at large sizes for dramatic effect when needed, and to use them sparingly.<\/p>\n

    <\/a><\/p>\n

    Some examples in this category are: Arid, Vivaldi, Cascade, and Linoscript.<\/p>\n

    Decorative<\/strong><\/p>\n

    <\/strong><\/p>\n

    These fonts usually take their name from their appearance.\u00a0 The can vary widely and are often distinctive and easy to recognize.\u00a0 The can give a work a very unique personality as some can be grungy, western, playful or even scary.<\/p>\n

    The three hallmarks are not used to identify these fonts.\u00a0 Remember to use these typefaces sparingly and never for setting paragraphs of body type.\u00a0 They work best as headlines and titles.\u00a0 They also crave a lot of attention on your page and should never be contrasted with a competing decorative, or script font.<\/p>\n

    …This will have the effect of too many divas on the page competing for the affection of your audiences, which contribute to a sense of chaos.<\/p>\n

    <\/a><\/p>\n

    Some examples in this category are: Curlz, Lasso, Juniper, Fajita and Creepy.<\/p>\n

    Now that we\u2019ve outlined the foundation of the categories of type, we will begin to see how this information can be used effectively.<\/p>\n

    In the next article, we\u2019ll look at how to contrast type.\u00a0 This will be the key to creating logos and setting type successfully in any graphic design scenario.\u00a0 Whether you are creating type for a website a business card or a magazine layout, contrasting typefaces is an essential skill.\u00a0 The degree of your visual literacy will depend on knowing which font to choose and which one to contrast with it.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Greetings and Salutations budding graphic designers! This article is the first of many addressing a pressing need within the Web Design community.\u00a0 Many beginners learn how to work with HTML and CSS but never seem to be able to recreate some of the fantastic looking websites professionals build for their clients. The main reason can […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/441"}],"collection":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":21,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"predecessor-version":[{"id":488,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/441\/revisions\/488"}],"wp:attachment":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}