reading assignment:
Typographic Web Design: : chapter 1 pages 11-14
What makes fonts legible?
A font’s legibility is affected by the strokes of the letters and the space in and around the letters.
Elements of Legibility
- A generous x-height
- Open apetures
- Prominent ascenders and descenders
- Slightly loose letter spacing
- Discernible terminals
Aesthetic and emotions of fonts
- Words have dictionary definitions (denotations) and emotional associations (connotations).
- Fonts can help communicate both types of meanings.
fonts that work together
text font
The text font should be, first and foremost, legible for large bodies of copy. 12-16 px
display font
A display font adds contrast, interest and emotion that the original font doesn’t. The display font is typically 18 px or bigger and used in moderation–not too many words and not too many instances.
concord and contrast:
- Fonts that are too similar create tension and clutter.
- Fonts that are too different have no unity.
- When picking two font that match, they should have similar structure: bowls, extensions of ascenders & descendes, x-heights
Is your h1, h2, or h3… too bold?
Add this code to your css. The value can range from 100-900 with 100 being lighter and 900 being bolder.
font-weight: 100;
web fonts
Before CSS3, web designers had to use fonts that were already installed on the user’s computer. (web safe fonts)
The font would be defined in an ordered list. If the first font wasn’t available, the second was used and then the third, “sans-serif” would choose a sans-serif font on their computer.
font-family: Arial, Helvetica, sans-serif;
With CSS3, many more fonts are accessible.
adding webfonts
When choosing a font, make sure it’s available in both print and web.
Make sure the fonts are FREE and available in at least regular, bold and italic.
“quick” guide to installing webfonts
exercises:
exercise: part 1
- Create a new page in InDesign. Document setup : intent: web; size: 1024×768; margins 100px on four sides; and the rest default. Save as site_plan.indd.
- Page 1: show your entire poem in unformatted text.
- Page 2: Pick three web fonts as possible display fonts for your poem. Install the printer fonts. While in InDesign, format your poem title in each font. Fill the length of the page with your title. Determine which font works best with your title. Consider legibility and aesthetic and emotional associations.
- Page 3: Choose three text fonts that work with your favorite display font. View the poem in all three text fonts and decide which text font is most compatible.
- In groups of 3, review each others fonts choices.
- Which display font would they choose and why?
- Which text font would they pick and why?
exercise: part 2
- Create a new html page and save it in the unit1 folder as fonts.html. Name your css file fonts.css.
- Install the webfonts for your display and text font. Using your selected display and text fonts, create three styles for your poem: title (h1), paragraph (p) and author(h2). Write code to place your poem on the page. Review legibility and adjust the attributes.
- FTP necessary files to your site.
- View it in a browser. Review and adjust as needed. Revise until you are confident that your poem is legible.
examples:
resources:
Character Counter
w3Schools css fonts
some font websites :