1. Home
  2. Blog sosAssociates

Web Font Design - Part 2

Blog Date
Author(s)
Stuart O. Smith, Jr.
Tags
Web
Font
CDPUG
Typeface

Cleveland Digital Publishing Users Group (CDPUG)

WEB / FONT / DESIGN You Don’t Have To Be Angry Any More: Part 2
Just Because You Can Doesn’t Mean You Should
March 29, 2012

On March 29, 2012, Jan Dregalla (www.ArtByJan.com - @JanBits) and I presented at the Cleveland Digital Publishing Users Group @CDPUG meeting on: Web Font Design: You Don't Have To Be Angry Anymore

Here is how our talk was described on the CDPUG.org website:

The March 29, 2012 meeting will consist of two presentations. One each from CDPUG members Stuart Smith and Jan Dregalla.

During the January 27, 2011, CDPUG program on "Web Design, HTML and Beyond" there were many questions about the lack of control of fonts on websites, some heated feelings were expressed. This program is a response to that meeting with the intent of letting CDPUG members know…."You Don't Have to be Angry Any More!" 

Stuart O. Smith, Jr. (aka on Twitter: @sos_jr) who was one of the three presenters at the famed 2011 meeting is returning this year to give the good news…."You Don't Have to be Angry Any More!" He will briefly review the history of and the evolution that leads us to today’s new web font possibilities. Stuart will present some methods to utilize web fonts on your website, giving you more control and, he hopes, more font happiness.

Jan Dregalla will share examples of good design with fonts and how users can move toward that on the web. Fortunately, new tech developments are opening the web door to more control over our font usage. Finally we are able to translate some of the tried and true lettering design principles into web formats. Its an exciting time. Branding can look consistent across print and web. More than Arial, Lucida and a few of their friends are available. Jan will share explanations and tools to alleviate your frustrations and ground you in the basics and the timely developments of designing with fonts.

Stuart O. Smith, Jr., is the Website Director at Notre Dame College (www.NotreDameCollege.edu), and holds a Master of Nonprofit Organizations (MNO) degree from Case Western Reserve University. He has been leader of the Web Special Interest Group Cleveland (www.WebSigCleveland.org) for over six years. Stuart promotes Cleveland tech, social media, and some Cleveland entrepreneur group meetings each week on Sunday or Monday night on Twitter as: http://twitter.com/sos_jr Please follow him to learn more.

Jan Dregalla is a graphic designer who worked at American Greetings for 25 years, much of it in the Lettering Department. She's designed lettering by hand and digitally. She's taught graphics and art at Virginia Marti College of Art and Design and Cuyahoga Valley Career Center. Art By Jan, her graphics business, can be found at www.artbyjan.com, jan@artbyjan.com, and just starting at http://twitter.com/janbits.

I presented first with…

Select this link to see my March 29, 2012, blog post with my slides, links and notes about web font design. What follows is from my notes about Jan’s talk, and the links/slides she shared. I will only hit the highlights of her presentation, but you can download Jan's web font design slides as a PDF file.

In my mind, Jan Dregalla's portion of the talk was the most important. While it is now easy to add web fonts to your website, it is also easy to make bad font choices.  

Jan started her presentation with: 

Just Because You Can Doesn't Mean You Should With Power Comes Great Responsibility

Serif fonts are fonts that have serifs – Per Wikipedia a “serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols.” During her talk, Jan shared the idea that serifs might have originated from the way letters were carved into stone.  It was easier to finish off the cut with a flared cut stroke at the ends and corners.

Sans is French for “without,” so sans serif fonts are the fonts without serifs.

Here are two humorous videos that demonstrate that fonts have personalities.  The first was shared at the meeting, and the second Jan and I previewed, but decided to cut from her talk in the interest of time. Enjoy!

Jan went on to talk about the Golden Section/Divine Proportions and recommended reading more at: www.goldennumber.net

“The Golden Section is also known as the Golden Mean, Golden Ratio and Divine Proportion.  It is a ratio or proportion defined by the number Phi ( = 1.618033988749895... )”

“In other words, A is to B as B is to C. This occurs only where A is 1.618 ... times B and B is 1.618 ... times C.”

Jan shared examples in nature (spiral shell and plants) and architecture that used golden ratio.  She stated that in design, if you used this technique, people would find your work more pleasing. She talked about Fibonacci Numbers (“By definition, the first two numbers in the Fibonacci sequence are 0 and 1, and each subsequent number is the sum of the previous two.”) which are related to the golden ratio. This carries over to website design, where you can divide up the space on the web page to fit this ratio.

Designers may want to explore further these sections of this Phi The Golden Number website:

Jan then talked about font terminology and family classifications, which can be seen in her slides.  She also shared how a print designer with a product like Adobe Indesign might make use of Adobe Dreamweaver's built-in features.

From my notes, I had the following in relation to font elements:

Elements – Ingredients

  • Line – creates mood, organizes
  • Type – creates mood, shapes, either timeless or trendy
  • Shape – organizes, conceptual
  • Texture - supports the concept, tricky to do well on web

Here are more details from Jan's notes that she shared with me:

  • Type:
    - refers to typeset text or any specifically shaped reproducible characters; also to the metal sorts used for printing letterforms
    Sorts are what metal type was called...also BTW, where the phrase "I'm out of sorts came from" when referring to being frustrated or upset.

  • Typeface:
    -collection of letterforms that have been especially designed to go together.   Broad term that can refer to a few letters or a whole font.

  • Font:
    - both the capital and lowercase forms of all letters of the alphabet, as well as numbers, symbols, and punctuation marks, may also be fractions, ligatures, accents, and other special characters like TM
    - a collection of all the characters of a specific typeface that are needed for typesetting, with similar characteristics that make them seem like they belong together.

  • Type Style:
    - refers to modified version of typeface - italic, light version, bold, condensed, expanded

  • Type Family:
    - a collection of type that includes a speific typefac and all the type styes of that typeface.
    - A CONFUSION HERE: sometimes used to refer to 2 different concepts (Families and Categories)

  • Type Family Categories (Use for clarification of the confusion):
    - We classify type into categories based on historical origin and physical characteristics of the letterforms.

If you really want to learn your fonts, then check out the Font Game created by I Love Typography (http://ilovetypography.com/ https://twitter.com/#!/ilovetypography/ ).  You can play online or download to your iPhone to be quizzed on fonts at: http://fontgame.ilovetypography.com/

Here are some of the resources recommended by Jan (see here a PDF of her slides for full listing):

This is just an overview of the material presented by Jan Dregalla at Web Font Design: You Don't Have To Be Angry Anymore.

Please feel free to add your own font design resources in the comments section below.

Comments

Submitted by Jan Dregalla (not verified) on Tue, 04/17/2012 - 11:17

Comment

Super organization of notes on my part of talk. Lot's of work that is greatly appreciated.

Twitter name
janbits
Website
www.artbyjan.com
Permalink