Week 2 - Overview

During our second week, we started Tuesday's class by researching different terminology related to typography. We were put into groups of twos, and we then presented our terms and definitions while giving examples. The terms that I am Amber had were ascender, descender, eye, and spine. I covered ascender and descender, while she covered eye and spine. It was interesting to learn that numbers can actually have descenders, and so can capital letters occasionally, such as J or Q. Something that stuck out to me, however, was that ascenders pertain only to minuscule/lowercase letters, where both minuscule and majuscule letters can have ascenders. I'm not sure if it is just convention that is the reason for that. By definition, an ascender is any portion of a miniscule letter that extends above the x-height line. I suppose if majuscule letters were included, then all capital letters would have ascenders and it could potentially become confusing. I also learned that the line that descenders extend to is also called the beard line, which pulls an interesting analogy again to the human body, similarly to terms such as eye, spine, ear, or shoulder. We ended class by meeting with our partner and starting to redesign our website on webydo.com. The site that Amber and I have chosen to redesign is Brewer's Bar and Grill.

On Thursday's class, we continued to cover some notes. We then moved onto our webydo project. Amber and I had basically completed the home page. We tried to keep page fairly simple, clean, and more modern. One of the most difficult parts for me was deciding how to work with the colors from their logo, which had red, yellow, and green. All of the colors together reminded me of a rastafarian theme or even just something similar to a traffic light. To design a page that would less be reminiscent of that and more individual to the bar while maintaining those colors was difficult. Amber also designed the silhouette of the beer bottle set out in text, which I think looks great. It adds pertinent content and visual appeal to the page, while highlighting some of the bar's most popular drinks. I will post a screenshot or two later in the process once a couple more pages are completed.

Week 1 - (Late) Recap

I would like to recap or give an overview of some of the things that we did during the first week of classes. We started by covering the syllabus and going over some of the upcoming design events that we could attend during the semester. We also created our blogs and were given our first homework assignment, which can be found below, titled "On Web Typography." It was a very informative read, and despite having taken Typography 1 already, I actually still learned quite a good bit of information. The last three chapters will probably also be very helpful.

In Thursday's class on the 22nd, we went over some definitions, most of which was review. we were then introduced to webydo.com and assigned to find a poorly designed website that is text-heavy.

Week 2 - Compare & Contrast Fonts

The first set of fonts that I are being compared are Courier New, Georgia, and Times New Roman. The first thing that I noticed when I looked at them is that Courier New takes up the most space, followed by Georgia, and lastly ending with Time New Roman. Courier New is a monospace typeface, so naturally it will take up more space. The line height in Georgia seems to be the largest, with Courier New and Times New Roman being about the same. Some of the numbers of Georgia have descenders, while the other two do not. The contrast between ascenders and descenders appear most evident in Times New Roman, followed by Georgia, and ending with Courier New. Georgia and Times New Roman actually look fairly similar in terms of their serifs and the shape of their strokes, except Georgia has much larger counters, and a larger x-height. Even the variance in their stroke weights are fairly similar, with the exception of a couple letters, such as "t" where the terminals do not cut off the same. The aperture in Courier New appears to be bigger than the other two. The numbers in Georgia seem to flow with the text better than the other two and does not draw too much attention to themselves.

The second set of fonts that are compared are Arial, Verdana, and Impact. One of the first things I noticed was that Verdana has a cross-strokes at the top and bottom of its "I"s whereas Arial and Impact do not. Impact is certainly the most condensed of the three fonts, and also least readable. At such a small scale, the counters and eyes start to become unclear, where as Arial and Verdana still remain legible and readable. The ascenders and descenders in Impact are also very short. The x-heights in Arial and Verdana are similar. Verdana still takes up the most space, despite having a similar line-height to Arial. The shoulders on some of the letters and Arial also seem to wrap around the letters and numbers more than Verdana, such as with the number "9" or "6". The comma in Arial is also more curved than in Verdana. The spines on the three of them are also quite different. The aperture at the bottom of the "S" in Arial appears to be bigger than the one at the top, whereas the space seems to be even in both halfs for Verdana. Impact has quite a lot of contrast between its stroke widths.

For the third set, I compared Helvetica, Trebuchet MS, and Garamond. The first thing that stood out to me is how much bolder and heavier Trebuchet seems to naturally be than Helvetica or Garamond. Helvetica and Trebuchet MS both appear more geometric than Garamond. Similarly to the relationship between Arial and Verdana, Helvetica also has more of a shoulder than Trebuchet MS. The two of them take up a similar about of space, sharing similar x-heights and line-heights. The weight of the strokes appear to make up the bulk of their differences in terms of size. The eye is most visible in Helvetica, because the line-height in Garamond is so small. Of course, Garamond is also the only font of all three to have serifs. The lowercase g's are different between Helvetica and Trebuchet MS, with Helvetica not having a loop as a descender. Garamond does have a loop as its descender. Garamond also seems to have the most contrast in its stroke widths making it very legible despite its smaller x-height. The cross-stroke in the "T" in Trebuchet MS and Garamond appear to be similarly spaced in comparison with Helvetica, whose cross-stroke appears lower down on the stem. The x-height in Helvetica actually appears slightly larger than Trebuchet MS, but the amount of space that they take up are almost equal because of the bold strokes of the latter font. The quotation mark in Helvetica appears more pronounced than Trebuchet MS, and is fairly similar to Garamond's. Garamond's seems to demand more attention when looking at it in comparison to the rest of its text.

Week 1 - On Web Typography

Chapter 1 – How We Read

I. Typographical design is important in affecting how the viewer reads.
            A. Legibility vs. Readability
                        1. Legibility = decipherable design
                        2. Readability = emotional impact of type and ease of reading
            B. The Reading Process

                        1. Positive vs. Negative space within and between characters (texture)
                        2. The mind focuses more on creating mental imagery from the text

            C. Saccades and Fixations

                        1. Saccades = leaps within lines of text while reading

                        2. Fixations = moments of pause within lines of text while reading

                        3. Ease of reading depends on text precision and reader’s proficiency

                        4. Typing in all caps creates less distinction between letterforms

            D. Screen vs. Print

                        1. Design for multiple devices

                        2. Design to accommodate for as many different users as possible

Chapter 2 – How Type Works

II. Choosing the right typeface plays a major role in communication.
            A. Importance of Typography

1.     Type is the linchpin of a designer’s ability to communicate

B. Collection of typefaces

            1. Over 50,000 commercial typefaces exist

            2. Typefaces change and adapt with time and trends (Print vs. Screen)

            3. Older typefaces are still relevant

                        a. Examples: Bell Centennial, Georgia, Verdana

C. Type on the Web

            1. System fonts

                        a. Examples: Arial, Verdana, Georgia, Times New Roman

            2. Images

                        a. Type could be uploaded as an image
                        b. Restricted ability to easily alter type size and attributes

            3. Text Replacement

                        a. Coding via CSS, Flash, or Java to replace hidden text

                        b. @font-face compatible with most major web browsers

                        c. Better than other methods as files become smaller

D. Language of Type

            1. Learn important type vocabulary to become better communicators

            2. There are no set rules in typography

Chapter 3 – Evaluating Typefaces

III. There are many different typefaces, so it is important to classify them properly.

            A. Font vs. Typeface
                        1. Typeface – Full name of the design
                                    a. Example: Helvetica
                                    b. Can contain numerous files under a single typeface
                                    c. “song”

                        2. Font – Format or storage mechanism for the design
                                    a. Example: Helvetica.ttf

                                    b. “mp3”
            B. Classifications
                        1. Serif, Sans-Serif, Slab Serif, Script, Monospace, Decorative

                        2. Typefaces under same classification can elicit different responses

                        3. Icon Fonts – Characters filled with symbols rather than letters

                                    a. Pros: Scalable, editable via CSS, responsive

                                    b. Cons: Screen readers may read icons as letters aloud

                                    c. Example: dingbats, symbol, picture, or pi fonts

                        4. Allows for typeface organization and aesthetic communication

            C. Physical Traits

                        1. Creates the overall aesthetic and feel of a typeface

                        2. Stroke

                                    a. High-Contrast – Stroke widths vary

                                    b. Monoline – Stroke widths are consistent throughout

                                    c. Can create ears, counters, shoulders, terminals, etc.

                        3. Em Box

                                    a. Variance in physical size of typefaces depends on the em

                                    b. Size of em is relative to font size

i. Example: Font size = 16px » 1 em = 16px

ii. Useful in responsive design rather than fixed pixels

iii. Characters exist within a “box” of 1 em height

iv. Typefaces can take up more or less space of “box”

                                    c. FOUT – Flash of unstyled text

                                                i. Occurs when default font loads before correct font

            D. Typeface Contrast

                        1. Refers to the differences in thick and thin strokes

                                    a. More variance = more contrast = more attention to letters

                        2. More contrast makes more exceptional headers

                        3. Less contrast makes for better readability

                        4. Medium to low contrast is best for readability

                                    a. Helvetica is too uniform for good readability

            E. Weights and Styles

                        1. 4 Basic Styles = Regular (Roman, Book), Italic, Bold, and Bold Italic

                        2. Weight = thickness of stroke

                        3. Posture = alteration of letter’s stance

                                    a. Example: Regular vs. Italic

                        4. CSS font-weight is in numerical value

                                    a. 100 = thinnest; 900 = heaviest

                                    b. 400 = normal

                        5. Condensed = narrower; Expanded = wider

                        6. Avoid using more than 2 typefaces in a single design

                                    a. Selecting from typeface with large family creates unity

7. Pseudo- or Faux-Italics/Bold = CSS improperly-generated italics or  bold when the necessary italic or bold font is missing

                                    a. May lack proper tail strokes in italic

                                    b. Maintains the original typeface’s body

                                                i. Lacks proper and correct alteration of the letterform

                                    c. Proper bolds are heavier but may not be uniformly increased

            F. X-Heights

1. Refers to the height of a lowercase letter from the baseline to the top of the lowercase letter

                        2. Low x-heights create elegant typefaces with high contrast between
                        the lowercase and capital letters

3. High x-heights are ideal for web and print; they fill more space and convey information more clearly
            a. Letters a, d, h, and n, etc. can be visually indistinguishable

            b. Counters take up more of em-box

                        i. Letters become more distinguishable to an extent

4. Counters – letters’ interior space

            a. Open vs. Closed

                        i. Example: O vs. C

5. Aperture – opening of the counter

            a. Example: space between ends of the letter C

            G. Numbers, Punctuation, and Special Characters

                        1. Uppercase Numerals – Lining or Titling Figures

                                    a. Same height and contrast as capital letters

                                    b. Can be distracting and attract too much attention

                        2. Lowercase Numerals – Text or Old Style Figures

                                    a. Designed for running text

                                    b. Can contain ascenders, descenders, and blends with text

                        3. Tabular Figures

                                    a. Designed with fixed spacing for use in tables

                                    b. Aligns vertically

                        4. Punctuation

                                    a. Curly Quotes – Smart Quotes – appear as filled-in 6’s/9’s

                                    b. Straight Quotes – Dumb Quotes­ – incorrect dashes; straight

                                    and vertical

i. Originated when keyboard real estate was at premium; opening and closing quotes reduced to one key

ii. HTML helps to avoid errors in apostrophes

                                    c. Primes – appear as italicized straight quotes

                                                i. Signifies inches, feet, minutes, seconds, coordinates

            H. Small Caps and Ligatures

                        1. Small Caps – slightly taller than x-height; capital in shape

                                    a. Not shrunken down capitals; maintains proper contrast

                                    b. Reduces distraction of acronyms and maintains visual flow

2. Ligatures – combines two or more characters to create a joined letterform

            a. Used for avoiding unappealing letterform messes

                        i. Example: f and i serifs that do not combine

                                    b. Effective in large colliding letters

            I. Language Sets

1. Many professional sets contain characters necessary to span across multiple languages

                        2. Notdef character – empty rectangle

a. Occurs when necessary character is missing; occurs most commonly with accented characters

            J. Optical Sizes

                        1. Typefaces with family members that suit a specific size range

                        2. Relates back to days of metal type

                        3. Fonts can contain alternative sizes

                                    a. Examples: Caption, Text, Display

                                                i. Avoids clutter of small text and heaviness of large

                        4. Typefaces should be no smaller than 6-8px on screen

                                    a. Larger resolutions provide better small type-size output

            K. Historical Context

                        1. Classic Typefaces

                                    a. Usually reliable and unoffensive

                                    b. Examples: Helvetica, Garamond, Caslon, Futura, Gotham

                                                i. May not be contemporary

                                                ii. Not all designed for screen
                                    c. Chaparral or FF Meta Serif are modern alternatives to Caslon
                        2. Remakes and Revivals
                                    a. Fonts may be reworked or edited for more variations
                                                i. Example: Garamond (ITC, Premiere Pro, etc.)

                                                ii. ITC Garamond is a bad interpretation and rework

                                                iii. Sabon is a beautiful rework of Garamond; contains

italics; takes up same space for bold, regular, and italics
3. Finding Alternatives
            a. Helvetica – Geometric, but not always legible

                                                i. FF Dagny or Pragmatica Slabserif are alternatives
                                    b. Georgia – big counters, large x-height, good spacing, serifs
                                                i. Chapparal, FF Tisa, Droid Serif = good alternatives

                                    c. Recognizing important attributes of typefaces lead to finding

alternatives easier

            L. Technical Considerations

                        1. OpenType = .otf

                                    a.  Contains eithers PostScript or TrueType fonts in one

                                    b. Works for Windows and Mac

c. Supports more characters, languages, special features, small caps, ligatures, all in one file

                        2. TrueType = .ttf

                                    a. Generally only works for either Mac or Windows

                        3. Web Open Font Format = .woff

                                    a. Works across all browsers

b. Wrapper that contains TrueType and OpenType compressed files

                        4. Loaded Assets

                                    a. Fonts should be kept to a minimum to reduce load time

                                    b. CDN = Content Delivery Network

                        5. Web Font Loader

                                    a. Avoids FOUT

                                    b. Framework codeveloped by Google and Typekit engineers

                                    c. CSS – {Display: none;}

                                                i. Hides content until font loads

                                                ii. Avoids FOUT

                                    d. Have fallback fonts

                                    e. Design with custom fonts after system fonts

            M. Rendering

                        1. Retina displays make old rendering problems less problematic

                        2. Different browsers load different font qualities

                        3. Core Text and DirectWrite = best text rendering engines

                                    a. Core Text – For Mac OS X; Anti-alias and beefier text

                                    b. DirectWrite – For Windows; Pixel-grid crispness
                                    c. One is not necessarily better or more correct

4. Always test designs for typography issues

Week 1 - Alphabet Letters

For this in-class assignment, we were to find objects that looked like letters of the alphabet. I worked with Shane Stoy, and we found all of our letters inside of the art building, unless otherwise specified. Below is a picture of all of the letters that I edited together in Photoshop.

A: Letters F and I next to each other on the Fire Exit Sign

B: Basement-level indication letter

C: Part of a ceramics poster in the basement

D: A wire

E: Part of a painting on the second floor

F: A shelf in the basement

G: Shane's gatorade bottle

H: Staples

I: Tape on the lockers in the basement

J: A hook on one of the lockers in the basement

K: A handle to a floor mop

L:  Part of a painting on the second floor

M: Part of a sign on the first floor

N: Part of the Fire Exit Sign

O: A washer found on the floor in the basement

P: Door handle

Q: Wheel of a cart found in the basement

R: Part of a painting

S: Dollar sign of a sculpture

T: Found next to the stairs

U: Railing along the ramp on the first floor

V: Fire extinguisher 

W: Upside-down M from the Men's bathroom sign

X: Plus-sign on the first-aid kid

Y: Part of a painting on the second floor

Z: Part of a Spiderman poster (not found in the art building)

Because I lost the file for the picture that we had of a 'Z', I had to take a separate one.

Some of them were more successful than others, and some were also definitely more abstract as well. With some cropping, some of these became more obvious.