- \n
- A generous x-height<\/li>\n
- Open apetures<\/li>\n
- Prominent ascenders and descenders<\/li>\n
- Slightly loose letter spacing<\/li>\n
- Discernible terminals<\/li>\n<\/ul>\n
Aesthetic and emotions of fonts<\/strong><\/p>\n
- \n
- Words have dictionary definitions (denotations) and emotional associations (connotations).<\/li>\n
- Fonts can help communicate both types of meanings.<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/fonts-217x300.jpg\")
<\/a><\/p>\nfonts that work together<\/h4>\n
text font
\n<\/b>The text font should be, first and foremost, legible for large bodies of copy. 12-16\u00a0px<\/p>\ndisplay font
\n<\/b>A \u00a0display font adds contrast, interest and emotion that the original font doesn\u2019t.\u00a0The display font is typically 18 px or bigger and used in moderation\u2013not too many words and not too many instances.<\/p>\n![\"\"](\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/textDisplay-255x300.jpg\")
<\/a><\/p>\nconcord and contrast:<\/h4>\n
- \n
- Fonts that are too similar create tension and clutter.<\/li>\n
- Fonts that are too different have no unity.<\/li>\n
- When picking two font that match, they should have similar structure: bowls, extensions of ascenders & descendes, x-heights<\/li>\n<\/ul>\n
Is your h1, h2, or h3… too bold?<\/strong>
\nAdd this code to your css. The value can range from 100-900 with 100 being lighter and 900 being bolder.
\nfont-weight: 100;<\/p>\nweb fonts<\/h3>\n
Before CSS3, web designers had to use fonts that were already installed on the user\u2019s computer. (web safe fonts)<\/p>\n
The font would be defined in an ordered list. If the first font wasn\u2019t available, the second was used and then the third, \u201csans-serif\u201d would choose a sans-serif font on their computer.<\/p>\n
\u00a0 <\/span>font-family: Arial, Helvetica, sans-serif;<\/b><\/p>\n
With CSS3,\u00a0 <\/span>many more fonts are accessible.<\/p>\n
adding webfonts <\/b><\/h3>\n
When choosing a font, make sure it\u2019s available in both print and web.<\/p>\n
Make sure the fonts are FREE and available in at least regular, bold and italic.<\/p>\n
“quick” guide to installing webfonts<\/a><\/p>\n
exercises:<\/h2>\n
exercise: part 1<\/b><\/h4>\n
- \n
- Create a new page in InDesign.\u00a0Document setup : intent: web; size: 1024×768; margins \u00a0100px on four sides; and the rest default. \u00a0Save as site_plan.indd.<\/li>\n
- Page 1: show your entire poem in unformatted text.<\/li>\n
- Page 2: Pick three web fonts as possible display fonts for your poem. Install the printer fonts. While in InDesign, format\u00a0your poem title<\/b> 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.<\/li>\n
- 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.<\/li>\n
- In groups of 3, review each others fonts choices.\u00a0<\/span>\u00a0<\/b><\/span><\/li>\n<\/ul>\n
- \n
- Which display font would they choose and why?<\/li>\n
- Which text font would they pick and why?<\/li>\n<\/ol>\n
exercise: part 2<\/b><\/h4>\n
- \n
- Create a new html page and save it in the unit1 folder as fonts.html<\/b>. Name your css file fonts.css.<\/li>\n
- Install the webfonts<\/a> for your display and text font. Using your selected display and text fonts, create three styles for your poem:\u00a0 title (h1), paragraph (p) and author(h2). Write code to place your poem on the page. Review legibility and adjust the attributes.<\/li>\n
- FTP necessary files to your site.<\/li>\n
- View it in a browser. Review and adjust as needed. Revise until you are confident that your poem\u00a0is legible.<\/li>\n<\/ul>\n
examples:<\/h2>\n
fonts.pdf<\/a><\/p>\n
fonts.html<\/a><\/p>\n
fonts.css<\/a><\/p>\n
resources:<\/h2>\n
Installing web fonts<\/a><\/p>\n
Character Counter<\/a><\/h4>\n
w3Schools css fonts<\/a><\/h4>\n
some font websites :<\/strong><\/p>\n
- Install the webfonts<\/a> for your display and text font. Using your selected display and text fonts, create three styles for your poem:\u00a0 title (h1), paragraph (p) and author(h2). Write code to place your poem on the page. Review legibility and adjust the attributes.<\/li>\n
- Create a new html page and save it in the unit1 folder as fonts.html<\/b>. Name your css file fonts.css.<\/li>\n
![\"\"](\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/fonts.jpg\")
<\/a><\/p>\n