Design a modern day type specimen single-page website for a not so modern web safe font, make it “cool” again, and showcase that accessible type, color, and layout is not only cool, but a best practice for inclusive and responsible web design.
Select a web safe font; show off its styles and weights: italic, normal, and bold; transform its cases: upper, lower, and even small-caps; change its size: 1em to 10em, smaller to larger; and even a swash such as a drop capital or an ornamental character such as an ampersand.
Focus on typographic color: style, weight, size, and spacing, before reversed type, foreground and background color. Let the type talk first, then enhance by layering on accessible color to better communicate an aesthetic or emotion for color blind, low vision, and sighted users alike.
Work & Rubric
100 points (130 points total with Extra Credit)
Copy and paste this section into a new task list issue within your repo and title it as “Work & Rubric”. #tasklist
Web Safe Typography
30 points (10 points each)
[ ] Use of only a single web safe font along with its respective generic font genre name as a fallback
[ ] Use of media queries to provide responsive layout considerations for navigation, sections, typography, etc. for small to wider screens
Best Practices
20 points (4 points each)
[ ] When naming things — keep it lowercase, and use a hyphen (-) or an underscores (_), not a space (%20), for separating phrases in HTML and CSS, files, folders, etc.
[ ] Optimization of images; JPG (.jpg) and PNG (.png) using ImageOptim and SVG (.svg) using SVGOMG!
[ ] Test document outline for heading and section rank, HTML5 Outliner, and update any Untitled Section to display a proper heading (h1–h6) See also heading and section rank
[ ] Use of HTML viewport meta tag to control layout on mobile browsers
[ ] Use of vendor prefixed CSS -webkit-text-size-adjust: 100%; to prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
[ ] Add a rel=canonical link in your webpage to suggest a strong hint to search engines to index the original cite source content. For example: <link rel="canonical" href="https://en.wikipedia.org/wiki/Verdana">
Note — Specify no more than one rel=canonical for a page. When more than one is specified, all rel=canonicals will be ignored.
Content First
Brief
Design a modern day type specimen single-page website for a not so modern web safe font, make it “cool” again, and showcase that accessible type, color, and layout is not only cool, but a best practice for inclusive and responsible web design.
Select a web safe font; show off its styles and weights: italic, normal, and bold; transform its cases: upper, lower, and even small-caps; change its size: 1em to 10em, smaller to larger; and even a swash such as a drop capital or an ornamental character such as an ampersand.
Focus on typographic color: style, weight, size, and spacing, before reversed type, foreground and background color. Let the type talk first, then enhance by layering on accessible color to better communicate an aesthetic or emotion for color blind, low vision, and sighted users alike.
Work & Rubric
100 points(130 pointstotal with Extra Credit)Copy and paste this section into a new task list
issuewithin your repo and title it as “Work & Rubric”.#tasklistWeb Safe Typography
30 points(10 pointseach)gte 90%support on both Mac & Win)emvalues for better web typography;pxtoemvia Pixemline-heightvalues, for example:line-height: 1.15;Web Safe Colors
10 points(5 pointseach)#663399becomes#639Navigation
20 points(5 pointseach)navelement for primary internal navigationaand hovera:hoverstatesLayout
10 points(10 pointseach)Best Practices
20 points(4 pointseach)-) or an underscores (_), not a space (%20), for separating phrases in HTML and CSS, files, folders, etc.BBEdit>Markup>Utilities>Format…font,margin, et al. properties for brevityemvalues instead ofpxvalues, except for declaring a hairline rule (border-top: 1px solid #000;);pxtoemvia PixemGitHub
10 points(5 pointseach)[ ] Repo should contain only essential files:
README.mdindex.html(HTML with added metadata, structure, and CSS)css(folder containing external style sheets)main.cssandprint.cssimg(folder containing images)courier-typewriter.pngandheadshot-matthew-carter.jpgversions(optional folder containing tests, experiments, work in progress, etc.)content-first-test-1.htmlrefs(optional folder containing reference images [sketches, screenshots, etc.])layout-1.pngREADME.md[ ] Add a description and url to your GitHub repo
Extra Credit
30 points(5 pointseach).jpg) and PNG (.png) using ImageOptim and SVG (.svg) using SVGOMG!h1–h6) See also heading and section rank<meta name="viewport" content="width=device-width, intitial-scale=1">-webkit-text-size-adjust: 100%;to prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOSrel=canonicallink in your webpage to suggest a strong hint to search engines to index the original cite source content. For example:<link rel="canonical" href="https://en.wikipedia.org/wiki/Verdana">rel=canonicalfor a page. When more than one is specified, all rel=canonicals will be ignored.README.mdunder the subheading of "Warm-Up" (It’s a good demo to show off)Web Safe Fonts
Select from the safest, most widely supported system fonts on Mac and Win, of the web safe fonts.
Serif
Sans-serif
Monospace
Readings & Resources
Copy and paste this section into a new task list
issuewithin your repo and title it as “Readings & Resources”.#tasklistNote: Prefixed
[ ] →links are required reading (or viewing).#readmeWeb Safe Fonts
gte 90%support on both Mac & Win)On Typography
Type Specimens
Type Terminology
Trebuchet MS
Matthew Carter
videovideoWeb Safe Colors & Contrast