Proper use of fonts, colors and graphics for the web

From the iCIT (University of Wisconsin Instructional, Communication & Information Technology) Web Support Team web site

This article discussed many things relating to font & design for websites including:
Font Color - The article points out that while the web offers more options for color than print typically does, black is still the best choice.
Heading Font Color - While black may be the best choice for reading font, a color that works with the color scheme of the page and has a strong contrast with the background is often the best for headings.
Font Families - This site recommends selecting Sans Serif fonts, while keeping in mind that how your font is viewed depends on the browser and computer that is using it. I was glad to see the tip for how to assure the font is viewed in way you'd like by using the CSS commands given.
Font Size - While this site recommends using one of two possible methods (pixel-based or em-based) for selecting font size, I think that I will always follow the ideas discussed in the Williams book, with major reading fonts as 12- to 14-point and other fonts relating to that based on contrasting font sizes. I will say, though, that on many sites, including this one, I have to increase the font size ( key + = key) in order to make large amounts of text comfortable for me to read.

Article: Proper Font Selection Can Make a Difference

I like the list of the most readable fonts for business purposes. I feel as though this list will help me in designing future materials, including my resume for this course.

As for the rest of this article, I felt that it mostly reiterated many of the points in Williams' writings on font selection, but with a focus on basic reading documents, rather than fliers and advertisements, as Williams often focused on. To some extents, it was a less "risky" lists of do's and don'ts (i.e, "Don't: Use more than two or three font styles in one document. Doing so can make the document look unattractive.") as it pertained to business publications and educational items such as essays.

My Design Studio's MyDesignPrimer.com

"Putting All the Pieces Together"

One element of this page that I found interesting was the things that came up after pressing the link to "Font" that was embedded in the text.
I was interested in learning about the difference between PostScript and TrueType.
I also found interesting the fact that each "font" has 256 separate characters involved, 4 sets of 64 keys. I accessed the printable version of the chart of the 256 characters to print out because knowing where to type certain symbols, such as Ø, ∏, √, ∑ without navigating through annoying menus is invaluable for a math teacher. I'm excited!

As I went through the descriptions of the categories o typefaces, I was surprised to find that I believe some of the pictures were incorrect. For example, I think that the two fonts pictures for Modern (http://www.mydesignprimer.com/fonts/modern_typefaces_fonts_bodoni.shtml ) were not, in fact, Modern. I am sure of this, especially for the 2nd one pictures, as it has no serifs! I also feel as though the first one pictured as a Slab Serif (http://www.mydesignprimer.com/fonts/slab_serif_fonts_typefaces.shtml ), is not a Slab Serif, as it appears to have some thick-thin transitions.

I had never thought through the "repercussions" of using font styling before reading that portion of the page, but it makes sense to me. In the future I will use the special types of fonts (i.e., Arial Black) when they are available, but will stick to using Bold and Italic links, when they're not. I can understand the concern though.

I also found it interesting to learn the relationship between Points, Pica's and Inches. While I thought out loud about the conversions, my wife kept questioning, "Pikachu?" and I of course explained the difference between the two. We came to the conclusion that Pikachu is far more interesting that Picas, but picas may very well be more important.

I finally also know why some fonts are bigger than other fonts when at the same size. They are not actually larger, they just appear larger because of the way they "fit" into the point size. For the examples shown on the page, the 28 pt. script font has such a low "x-line" that it appears to be much smaller than the 28 pt. Stone Serif which has a very high "x-line" and is also ver wide. Regardless, the maximum height of the two sets of letters are the same!

One Space?!? One space between sentences? I am trying to switch right now while writing this, and it is hard! What if I can't transition and I do both in the same paragraph? One, two, two, one, one, two, oops, one, two, oops, one. I keep doing it subconsciously! I might have to give up and stick with two spaces. Maybe I'll ask my Mom for input, she always knows what to do here. If not her, my priest, maybe. I will surely explain to them that the rationale does make sense.

–-–-–- ---- --- _– At first, while making these symbols, I didn't realize that some were different from others. I was frustrated that my computer wasn't making "en dashes" different from hyphens, but once I zoomed way in, I could see the difference. I never knew that it was supposed to be different. Is that what happens when you use two of them -- and then hit space and they become one bigger one? It didn't appear to happen there, but it sure does in Microsoft Word.—See, now I've switched to an Em Dash!

*Notice, by the way, I have fallen right back into double-spacing between sentences. It's hopeless!

Finally, I always found quotation marks terribly frustrating in high school. periods in or out? commas in, or out? do I put a period here? here and here? here, or here? This always frustrated me. I'm glad that computer programs like Word are smart enough to pick the correct quotation mark (direction it faces) and to tell me when I've puncuated improperly. How nice!

I found this site interesting, though very in depth. I never knew there was so much to typography, and was surprised by some of the things that I learned!

Universal Principles of Design - Usability

How can I enhance the usability of a design?

Principle 1 - 80/20 Rule

When I first began reading about this rule, I was surprised by how confusing it sounded.  However, after looking at the example of the Microsoft Word toolbar and how the 20% of its functions that compose 80% of its use are shown as icons, while the 80% that only compose 20% of Word's use are tucked away in drop-down menus, I found it much easier to understand.  This reminds me of the manner in which I organize my classroom materials.  I have a desk organizer that holds a dozen or so hanging file folders and a filing cabinet that holds hundreds of hanging file folders.  The folders that I access regularly (i.e., the resources for a chapter that I am teaching) are in the smaller, handy organizer on my desk, while those that I don't access regularly (i.e., students' past grades records) are tucked away in my filing cabinet.

Principle 2 - Confirmation

While the dialog boxes in computer software often drive me crazy, I have often had cases in which that confirmation was welcomed (i.e., are you sure you want to delete all music from your iPod, NO!  CANCEL!).  I use similar methods with my students in long class activities.  I often write in certain checkpoints in their work.  For example, "Once you finish problems #1 & 2, come to me to check your answer before moving on to #'s 3-10."  This prevents my students spending large amounts of instructional time working through activities with incorrect comprehension that I could have detected earlier.  By confirming their comprehension (or lack thereof) I can be confident in them continuing (or help them get on track).

Principle 3 - Cost-Benefit

This is something that designers--of all sorts--need to take into consideration and often do not: Is the effort needed to complete this process (the cost) worth it to obtain the result (the benefit).  As a designer of instruction, I often consider this with my lessons.  It could be a consideration of, "Is this long dry teacher-led instruction worth the learning that it will result in?  Or will this cost lead to student boredom and apathy before the benefit is reached?"  I also do the same thing for fun things in class.  For example, "Is the amount of time that this game (or lab or investigation takes) worth the learning that it will result in (benefit)?  Or does it take up so much time that it doesn't account for the benefit?"

Principle 4 - Mental Models

I also need to take System Models and Interaction Models into account when designing class activities, especially those that are investigations.  Often, I can design an investigation that makes total sense to me (its system model, how it should work), but result in surprising mass confusion from my students (its interaction model, how it actually works with when interacted with).  In these cases, I look back to the 3rd principle I discussed, Cost-Benefit!  I also liked the example here of anti-lock braking systems.  I can remember when I was 16 and first driving--a pick-up truck, no less--sliding through a snowing parking lot thinking to myself, "Do I slam on the brakes?  Do I pump the brakes?  Do I have ABS?"

Principle 5 - Readability

This is a major concern for teachers--making sure that their instruction of new material is accessible to their students.  While the concept may be new and difficult, the reading involved should not be.  I also enjoyed viewing the Edward Fry's Readability graph, though I think that it is easier to simply use Microsoft Word or OKAPI to determine Readability levels.  Regardless, it is an important thing to take into consideration.

The Non-Designers Design Book, Chapters 9, 10, 11, 14

Chapter 9 - Type (& Life)

Upon starting my reading of this set of chapters, I could tell just how serious Ms. Williams was with this topic of type as she starts out with the comment, "Type is the basic building block of any printed page."  I completely agree with her though and have often wished that I better knew how to apply different fonts/typefaces, rather than just picking by what "looks cool."

I was interested to learn about the different types of relationships between fonts:

• Concordant - Which is the safe route; it can be dull or it can be okay, depending on its use.  I find that this is what I often use (i.e., one type face with different fonts (bold, italic, etc.)
• Conflicting - The wimpy method!  This must be what keeps people scared of moving away from concordant--the take so little risk in their attempts at contrast, that their creation conflicts with itself, and scares them right back to concordant!
• Contrasting - This can very well be the ideal, when it is appropriate (it may not be appropriate in some formal places, like the pages of a novel) as long as it is done well, as in the quote that is "full of sound and fury" (I really liked this) or Popeye and Olive Oyl's wedding invitation.

The discussion of Popeye & Olive Oyl's Wedding invitation made me worry about the invitation that I designed for my wife & my wedding last summer.  As I look back at it, I realize that I used way too little contrast, and a little bit of unsuccessful conflict (though not a deal-breaking amount) and too much centering!  Aside from changing the centering to something a a bit more creative, I wish that I could change the conflict to contrast.  I put our names (my wife and mine) in a different bolder font, that is definitely in the same general section of text (script, see chapter 10).  Because of the changes in weight and color that I used, there is some contrast, but because I did not make enough changes in structure and size, there is a bit of conflict, though, as I said before, not a deal-breaker.

Chapter 10 - Categories of Type

My only experience in comparing categories of type came in my Distance Education course this past spring.  We discussed why sans serif fonts can be better than serif fonts in Distance Education, as the serifs may not come out clear when the text is "transmitted" through the distance.

Here I got to get a little more experience with the categories of type, which I found interesting.  The 6 categories were:

• Oldstyle - Which is a serif category of fonts that replicates lines that would be made by a pen in writing the letters.  This font is good for reading mass amounts.
• Modern - This serif category of fonts is a very vertical font, which has a strong thick/thin transition in contrast to Oldstyle's diagonal stress.  These characteristics made Modern fonts not quite as good for reading long passages as Oldstyle is.  As I read about Modern, I wondered if this was a result of the manner in which the type faces were made for the printing machines.  It seems that these would be easier to make typefaces for than Oldstyle.
• Slab Serif -  This serif category of fonts is one in which all parts of the letters are thick, including the serifs.  There is no thick/thin transition or diagonal stress shown here.  This category includes my most-used typeface, American Typewriter.  I was relieved to find out that they ". . .  are very high on the readability scale, meaning they can easily be used in extensive text." which made me feel good about my frequent use of American Typewriter in worksheets and the like.
• Sans Serif -  This category of fonts has no serifs and typically have no thick/thin transition.  The best known of these fonts is Arial, which implies to me that sans serif fonts must be good for reading (if Arial is so often used).
  
• Script -  This broad category of fonts is, as Williams says, "like cheescake" in that it should not be "consumed" in large amounts.  She also insists that you do not use these in caps.  *Here is one of my mistakes on our wedding invite, it was all script!  Not only that, but when I tried to contrast our names, I was smart enough to change weight and color, but stuck with another font of the same structure, script!
  
• Decorative -  The fun stuff!  Chiller!  Fajita!  Although she phrased it surprisingly, I was not surprised by the concept of Williams' quote on Decorative fonts, "If the thought of reading an entire book in that font makes you want to throw up, you can probably put it in the Decorative pot."  I agree whole-heartedly with this sentiment in that these fonts, which can be serif (i.e., Blue Island) or sans serif (i.e., The Wall), are not good for reading in large amounts.  I discovered my new favorite font, FlySwim, here!

Chapter 11 - Type Contrasts

In this chapter, Williams helps the reader work with contrasting (not conflicting) through the following types of contrast:

• Size
  
• Weight
  
• Structure -  Williams recommends utilizing 2 families with different structures (i.e., Slab Serif vs. Sans Serif) in order to assure contrast, not conflict.
  
• Form -  Williams discusses contrasting between caps & lower case, while keeping in mind that TEXT WRITTEN IN CAPITAL LETTERS IS OFTEN HARDER TO READ.  This is something that I have to look out for, as when I write by hand, I use what a computer would call "small caps" and what I call, "engineer's handwriting."  She also discusses the difference between Roman text (a new term to me, it stands up straight) and Italic text (along with the difference between "true" and "fake" italic fonts.
  
• Direction - Williams discusses the difference between positive (up to the right) and negative (down to the right) direction, and its use.  She also discusses how vertical and horizontal directions can be created in a sense of perception.
• Color - Here, Williams discusses the difference between warm and cool colors in writing.  The effects that they have on the way that we process information is impressive.  She also discusses how black & white color contrast can be utilized.  I also learned about the "leading" of a block of text, which gives the text a lighter color.

I was surprised to find in these chapters that Ms. Williams was not following the rules between the difference of the terms typeface and font.  I suspected this from early in these readings, but it was confirmed on Pg. 180 when she stated at the end of the 3rd paragraph, "both lines use the same font."  According to the wikipedia readings about typeface and font, I believe that she should have stated, "both lines use the same typeface."

Chapter 14 - Typefaces in this Book

Chapter 14 managed to do two things for me:

1. Confirm for me that Mr. Miller's font of choice, American Typewriter, is a Slab Serif, and therefore okay for "reading."
2. Make me want to get more typefaces/fonts off of the internet!

Timeline

Hello readers,

Here is my Visual Design Timeline.  I hope you enjoy looking at it more than I enjoyed making it!

If you click on the picture, it'll come up bigger so that you can see the details a bit better.

            The “ability to construct meaning from visual images” (Giorgis, Johnson, Bonomo, Colbert, & al, 1999: 146) is known as visual literacy.  Essentially, this skill refers to the ability to process information presented in a visual format or simply to “read a picture.”  As an educator, I see visual literacy playing its most obvious and important role in the classroom.  In order to help students learn, a teacher must present information through a variety of methods.  The most common of these methods is visually.  The first tool that was available for educators to help their students process information visually was a hornbook, which “ . . . was a flat board on which a sheet of paper printed with the alphabet, the Lord’s prayer, and several simple words were pasted” (McGrath, K., 777).  These “ . . .  appeared in Europe at the end of the 15^th century” (Anzovin, S. & J. Podell, 80).  The hornbook was followed by textbooks, the first of which was “. . .  published in 1658 . . . for teaching Latin . . . ” (Anzovin, S. & J. Podell, 81).    The globe revolutionized the teaching of geography, in years following “. . . 1810, [when] a Vermont farmer and copper engraver named James Wilson made the first American globes” (McGrath, K., 777).  A major improvement in visual instruction came with the invention of the blackboard or chalkboard, which “. . . was patented in 1823 by Samuel Read Hall of Concord, Vermont . . .” (McGrath, K., 777).  The 20^th Century saw numerous changes in the way in which teachers are able to present information as a visual to their students.  Among these was the use of films, which “. . . came into widespread classroom use in the 1940s and 1950s” (McGrath, K., 777).  The first commercial application of a copy machine “ . . . was the Model 914, introduced in 1950 by the Haloid Company of Rochester, NY” which changed its name to the Xerox Corporation years later (Anzovin, S. & J. Podell, 371).  Visual displays of materials further developed through the use of the overhead transparency projector, which premiered in the mid-1960s (Litas, C.); the LCD video projector, which was invented in 1984 (Gene Geldoff), but did not see widespread use until around the turn of the century; and the use of dry-erase or white boards, which “. . . did not begin to appear in business organizations until the mid-1980s” (About Blackboards); and the opaque overhead projector, which Hoo-Shik Kim received a patent for in 1996 (US Patent 4597207 – Overhead Projector).  While there have been far more inventions in the field of education that have improved student learning, these are amongst the most important applications of John Debes’ idea of visual literacy in the American school systems.

Universal Principles of Design - Perception

How can I influence the way a design is perceived?

Principle 1 - Alignment

The use of the "butterfly ballot" of Palm Beach from the 2000 presidential election provided a great point on how we should consider things like the alignment and how they affect the perception of the reader, not just the writer.  While the person who created this ballot probably completely understood how it was to be used, they should have considered the possible misconceptions it could create for the voters.  I will be sure to take this into account with my instructional materials.

Principle 2 - Color

On Page 38, Lidwell, Holden and Butler state, "Do not use color as the only means to impart information since a significant portion of the population has limited color vision."  Late in this school year I recall asking a question to one of my students that went something like, "Which line has a steeper slope, the green one or the blue one?" and his neighbors began to giggle.  Embarrassingly, I then found out that this young man was colorblind.  While I am not sure why neither he, nor his parents, ever notified us of this disability I became very worried about how many times that his inability to differentiate between colors may have hurt his understanding of concepts in my class.  I'd hope that in the future students would admit to this disability, but I will make efforts to avoid it anyhow.  While I may still use colors, I will also use other different forms of contrast (i.e., a solid red line and a dotted blue line) and reference them with their pictures rather than by stating their colors.  This may prevent confusion, without removing the richness that color can bring to materials.

Principle 3 - Consistency

I make efforts within my own class, as mentioned in my previous blog, to maintain consistency within the design of my instructional materials.  I try to maintain specific fonts, specific formats and specific methods of arrangement.  This internal consistency " . . . cultivates trust with people . . . [and] is an indicator that a system has been designed, and not cobbled together."  My team teachers and I (our middle school operates with teams - a science teacher, a language arts teacher, a social studies teacher and a math teacher that all teach the same students - try to utilize external consistency when possible as well.  We don't necessarily use the same fonts or test layouts, but we do tend to maintain consistencies in classroom management, etc.

The Non-Designer's Design Book, Chapters 1-6

Before discussing the individual concepts in this book, I must say that I really like the way that the book is written, organized and presented.  Ms. Williams' writing style and sense of humor made it much easier to follow along and not get bogged down while reading.

Chapter 1 - The Joshua Tree Epiphany

I have noticed this same phenomenon in my own life.  My wife and I have been a home owner for just over a year now and the things that we notice while driving down the street never ceases to amaze me.  In years past I may have only noticed pretty girls or nice cars.  Now, however, I have become aware of other things: furniture on the porch while we shopped for ours, shades of mulch while I put down ours, arrangement of flower beds while I updated ours and presence of different flowers, shrubs and trees while we added our own.  Once you can name the problem, you can find the solution!  I then delved into the following chapters about, well, CRAP.

Chapter 2 - Proximity

I saw many design elements that I needed to be sure to apply when designing things for my students--worksheets, reference materials, tests, presentations, etc.  I also began to feel what Ms. Williams mentioned on Pg. 10, ". . . [I] will never again look at a page in the same way." as I noticed from the menus on Pg. 26-27 that my favorite restaurant--Crave in downtown Akron--needs to seriously revise their menu!  It looks just like the one on Pg. 26.  I still recall the first time I took my parents there . . . "What's this? ... I don't know what the names of these things are ... How much does it cost?"  The Proximity (and contrast) added on Pg. 27 really helped!

Chapter 3 - Alignment

Ah!  I center align too much!

It even looks bad now in that one sentence that I put there in a joke.  I never realized how much stronger a left or right alignment can be.  Right alignments don't get enough respect.  I also really like the way that she points out that aligning things on page relative to one another, rather than the page, can really unify and organize a page.

Chapter 4 - Repetition

My school system puts out a monthly staff newsletter.  I always found it difficult to follow and concentrate on reading.  Although it could have been because I was tired of reading about so-and-so becoming a grandma and how to write budgetary checks, I now think that the Design of it played a role.  The designer made every section look different, as if to show off the ability to do so.  More repetition, like the text in the articles about the "Darn Honor Farm" or "Evanescent wan think, itching udder" on Pgs. 54 and 55 may have made it easier to follow.  I also enjoyed the use of repetition in the "packages" like the Mom & Pop Grocery store stationary and the Red Hen promo materials.

Chapter 5 - Contrast

I felt guilty while reading this chapter.  A year or so ago, to instill a sense of consistency in my materials in my math class I decided to utilize the same font in everything--tests, quizzes, worksheets, presentations--and picked something that I thought was amusing.  I selected "American Typewriter" Font because I thought it was a fun, retro, math-nerd kind of font.  The students definitely new when materials were designed by me.  However, now I notice that it may have been wise to expand this consistency with some contrast.  Maybe headings should be a new text, not just bold?  Maybe directions should be a different text as well?  Maybe that would assure that the students read the directions which, trust me, they often do not.  As you can see, I took these principles of contrast to heart in this blog in two ways: different texts for writing & headings; and the spacing between segments (one extra space before headings, none after headings).  The resume on Pg. 69 really drives home the importance of this.

Chapter 6 - Review

Don't be a wimp!  The principles really do work well together, and this can be seen very visibly in the title page on Pg. 85.

Introduction

Hi!  My name is Jake Miller.  I am an 8th Grade math teacher at Kimpton Middle School in the Stow-Munroe Falls Schools and a Master's student in the ITEC Program.

Along with numerous around the house projects, vacations and teaching summer school, I will be taking Designing Visuals for Instruction & Research in Educational Services this summer.