Imagery

IMAGE SOURCES/ CREATIVE CROPPING

Images are one the most important things to a website.
- Images should appeal, be relevant, and be interesting.

Image Sources:
- Royalty-Free Images
- Free Images
- Rights Managed

Cropping:
-Cropping Basics
-Unconventional Cropping

Choosing the Right Fonts: A Guide

Building off of what Rob talked about last week, in order to choose the right font you have to an idea of what you want the font to accomplish:
1. What feeling or emotion do you want the font to ellicit?
2. Is this font tied to a site-constant theme or is it being used for a separate, specific purpose?
3. Do you want this font to stand out (headline, logo) or blend in (body text)?

General Rules:
Don't use more than four fonts in a Web site design.
Avoid combining two or more serif or two or more sans-serif fonts in the same project.
Serif headline with sans serif body text is becoming more popular, but sans serif headlines with serif body text is also perfectly fine (more traditional)

A Guide for Choosing the Right Fonts:

1. Finding the right font family

http://www.fontscape.com/ - A good tool that groups and lists fonts.

http://www.adobe.com/type/browser/classifications.html - Another good tool that groups Adobe fonts. It has a cool word testing tool for fonts.

http://www.bsu.edu/web/ucspubs/pdf/other/typeface_classifications.pdf - Another guide for helping you choose a font family.

2. Comparing fonts and other stylistic options

http://typetester.maratz.com/ - A tool for comparing font and paragraph styles side by side.

http://www.fonttester.com/ - This is another good tool for comparing fonts.

3. A General Resource

http://typophile.com/ - (named by Beaird in the book)

Text Spacing & Alignment

Text Spacing

Horizontal Spacing
Example of Letter-spacing at .2em.
Example of normal Letter-spacing.
Example of Letter-spacing at -.2em.

Letter Spacing, Kerning, & Tracking

Vertical Spacing
Example of normal line-height.
Example of line-height at 4em.
em - a CSS unit that measures the size of a font, from the top of a font's cap height to the bottom of its lowest descender. Originally, the em was equal to the width of the capital letter M, which is where its name originated.

Text Alignment

Justification: This type of alignment makes the letter and word spacing automatically adjust so that each full line of text has a word or letter that lines up against the left and right edges of the text area.
text-alignment: This is the CSS setting that allows you to control the alignment of text. This property can be set to: right, left, center, and justified.

Example of Left Aligned:
Lorem ipsum dolor sit amet, eu nulla vel velit, torquent ante. In mauris fringilla est amet a. Dictum ultrices est ut in arcu, a rutrum est erat ornare vitae, ut justo nec diam phasellus, eu ut.

Example of Right Aligned:
Lorem ipsum dolor sit amet, eu nulla vel velit, torquent ante. In mauris fringilla est amet a. Dictum ultrices est ut in arcu, a rutrum est erat ornare vitae, ut justo nec diam phasellus, eu ut.

Example of Center Aligned:
Lorem ipsum dolor sit amet, eu nulla vel velit, torquent ante. In mauris fringilla est amet a. Dictum ultrices est ut in arcu, a rutrum est erat ornare vitae, ut justo nec diam phasellus, eu ut.

Example of Justify Align:
Lorem ipsum dolor sit amet, eu nulla vel velit, torquent ante. In mauris fringilla est amet a. Dictum ultrices est ut in arcu, a rutrum est erat ornare vitae, ut justo nec diam phasellus, eu ut.

Typetester

Borders and Edge Treatments

Borders and edge treatments are commonly used on images placed on web pages and probably most often for hyperlinked images.

Two ways to apply borders to images:
1. Directly to image in photo editor (like photoshop)
2. By using CSS background images

If you have a large number of images that you want to give the same style to then CSS is the better route to go because it saves time and is very simple. However, Beaird says that there are still times when Photoshop is the best choice. Example

CSS borders have 3 properties: width, style, and color. All of which can be controlled individually. Also, there are 8 different border styles to choose from dotted, dashed, double, solid, etc. After you have applied a CSS border you can update and edit multiple images all at once. One thing you may want to consider is that different browsers display borders with some minor differences, but the outcome is still ok.

Borders have the potential to be easily ugly and very distracting from the actual image you want viewers to focus on. The most important thing to remember is that borders and edge effects should enhance the image and not drown it out.

More examples of good borders and edge effects:
1. 13strides
2. simplebits

If you want to have a gallery of some sort on your webpage Beaird suggests zenphoto.org
where you can download a free tool to feature your work. It also gives you the option to create different themes for your gallery to fit the feel of your site.

Example of zenphoto in use.