lovehistory.net

Where to start this week?

I’ve always enjoyed working with fonts – I have a special weakness for grunge fonts, unfortunately – but I’m not sure I’ve ever been very good at it. Therefore I found this week’s readings, the film Helvetica, and the lynda.com tutorial Typography for Web Designers to be very helpful in understanding why designers make the decisions they do concerning fonts. It is scientific and mathematical as opposed to simply artistic, and it is also historical. Without a basic understanding of all of these elements, it is much more difficult to use fonts properly.

I tried to put some of the principles into practice when I worked on designing my portfolio project – I’d never thought closely about using fonts to establish visual hierarchies as well as meaning on the page – to me hierarchy had to do with placement of elements and the way fonts looked was incidental – a decision based on gut feeling more than anything else. I’d also never thought about how variation within the same font is just as important and powerful as variation between fonts. As is such, I kept my font selections simple in my initial design for my portfolio site and instead played with italics, sizes, and weights to create visual difference on my page (and to direct visual flow, as discussed in White Space is Not Your Enemy). I watched the lynda.com videos on embedding fonts and found them to be very exciting, but I have not yet tried this technique on my own site.

One thing I struggled with was the logo. I know it is best to have not only text-based navigation, but a text-based header. A properly chosen and stylized font can give the same appearance of an image. And I know at this point that logos created in Photoshop must be viewed as blueprints. But at this stage I was unable to figure out using Dreamweaver how to layer text over my image, which I know is possible using CSS. So I uploaded the JPEG logo with text as a placeholder of sorts to demonstrate my planned intention.

To explain the logo: I chose the font Neuva STD because I think it looks right for the 1950s period of the image, and I chose to italicize the text and add an exclamation mark to mimic the ebullient advertising copy of the day. The image itself I purchased from iStockphoto.com. I’m not sure yet what my CLIO II personal project will be, but I’m hoping it will have something to do with domesticity in America in the 1950s (my areas of study are more thoroughly explained on my About Me page), so I selected an image representative of that time period. The color scheme on the page is also meant to reflect the time period. The yellow reminds me of the color of the refrigerator we had while I was growing up. Even if my CLIO II project ends up having to do with a different time period (as it very well might due to copyright restrictions), I can still use this image and concept at a later date. To me this future usability justified both purchasing the image and building a design around the related concept.

The size of the text in the body is 1em, which I know might feel “horsey” in terms of design, but I’d like to leave it for now. I tried designing with a smaller font and didn’t quite like the look. I think the larger font almost gives the page a more playful feel, in line with the aesthetic I was trying to convey in the image. Also, I get migraines reading small text on computers, so it was just easier for me to work with the larger font. I’m biased, I admit it. The navigation, in contrast, is smaller and italicized, a visual contrast I liked. I also chose to right align my validation badges in the footer to balance all the elements that are on the right side of the page at the top. Adding simple borders between the header, footer, and body served to break up the content without creating distracting chunks of color. I tried designing with different background colors and found I preferred the simple, clean look of a uniform background.

Wow! I did not intend to spend so much time in my blog talking about my design process but it took up a lot of frustrating and fascinating time. And what was most interesting to me was that I couldn’t move forward with other elements of the design until I was happy with the fonts, especially after the deluge of information about them. I scrapped my page three times before getting it right, and that third time the first thing I did was figure out the fonts. After that everything else seemed to flow into place.

Coincidentally, by that time I was much further along in the lynda.com tutorial. What I learned more than anything else from those videos is the importance of working with your fonts as design elements and not as text. Viewing the tutor using the fonts in word processing software to test them out PRIOR to putting them into her code blew my mind. It reminded me of how I sometimes “draw” websites in Photoshop before I try to code them (like the logo I made for this one). Visualizing fonts in this way really helped me when I went back to recode my own page. I love working with Photoshop – drawing there makes things much easier. In the future I will try to draw with fonts as well.

I found Thinking with Type to be most useful in terms not only of the way it historicized fonts and types, but in all the visual examples it provided of type in action. Simply looking at other uses of type helped me understand again that type is not just text, it is a design element. And it also helped my own thinking to see the many, many different ways people use type, and the many different kinds they use.

That thought brings me to Helvetica. I have nothing against Helvetica the font, but as I watched the film I found myself most identifying with the designers who hate Helvetica and search for other ways to use type. Then again, as I said, I love a good grunge font. But the longer the film went on, the more static and ubiquitous Helvetica became. I knew it was popular and beloved but I didn’t know just how pervasive it is. It also made me think of my own experiences with Helvetica. I’ve never been able to use it my own design (here I am mostly referring to images and text together) and have it look right. Here it is, this clean and simple font, and I am usually very minimalist in my own photography, and I just can’t make it work. It always look wrong. It could have to do with other things, like the way I am styling the text with effects like drop shadow or playing with the fill settings, or even the words I am trying to use with the image. But it’s really not always as easy as it might look to design with Helvetica and have it turn out as satisfying as it can be. Then again, my favorite sans-serif is Futura, so maybe I’m biased.

In any case, I’m looking forward to actually trying font embedding in my own site, and to figuring out a way to perfect my logo. All and all an interesting week.

Edit: This week I have commented on Sheri and Richard’s blogs.