Prof. Annette Weintraub

Design for the Web 2

49540 SPRING 2011

Week 4

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’.

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’.

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’.

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’.

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’.

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’.

FONTS, CONTINUED [Sinking Ship]

History of Web Fonts [Chunk Five]

http://addoa.com/blog/simple-switch-font-face-and-brief-history-fonts-web/ History of Web Fonts

http://randsco.com/index.php/2009/07/04/p680 history of web fonts

http://www.alistapart.com/articles/cssatten future of web fonts, more

Web Font Formats [this is MomsType]
Web Font Formats[this is Boston]
Web Font Formats [Grablau] Web Font Formats [GrablauBold]

OTF Open Type Font: webkit, mozilla

http://www.fontshop.com/opentype What is OT

TTF TrueType Font: webkit, mozilla, opera

WOFFWeb Open Font Format: webkit, mozilla

SVG Scalable Vector Graphics [images in AI, webkit, mozilla, opera]

EOT Embedded OpenType [Microsoft created with WEFT]

WEFT Web Embedding Fonts Tool

http://webfonts.info/wiki/index.php?title=@font-face_browser_support Browser support for font formats

Shareware Fonts [East Market]

http://blog.themeforest.net/tutorials/css-font-face-and-15-free-fonts-you-can-use-today/ "free fonts"

http://www.fontsquirrel.com/ shareware fonts

http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding shareware fonts

http://www.dafont.com/ shareware fonts

http://www.google.com/webfonts Google free fonts

http://www.fontshop.com/blog/?cat=80 Intro to web fonts; see their PDFs. Their web fonts are not free.

http://fontfonter.com/ See font display

USING CSS3 Type: @font-face [Utility Bold Cond]

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ how to use @font-face

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ how to use css @font-face

http://www.css3.info/preview/web-fonts-with-font-face/ @font-face

http://craigmod.com/journal/font-face/ @font-face

http://jontangerine.com/silo/typography/web-fonts/ examples of standard web fonts

http://www.webfonts.info/wiki/index.php?title=Main_Page info page on @font-face embedding

http://webfonts.info/wiki/index.php?title=Links_to_demo_pages Demo Pages

LATEST CROSS-BROWSER and MOBILE [ANDROID] @font-face

http://readableweb.com/ 'Bulletproof' @font-face implementation [works on Android]

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax Latest @font-face implementation [works on Android]

http://dl.dropbox.com/u/39519/webfontsdemo/2011.html for mobile [works on Android]

Cufón, an older alternative to @font-face [England Hand: use UC+LC]

http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ Step-by-step

http://wiki.github.com/sorccu/cufon/about Cufón, an alternative to siFR

http://wiki.github.com/sorccu/cufon/usage Step-by-step, also using multiple fonts

http://cufon.shoqolate.com/generate/ Cufón fonts generator, online version

http://wiki.github.com/sorccu/cufon/styling Styling Cufón: be sure to use a .ttf or .otf fonts

Combining CUFÓN and @font-face [Arvo: B/M/I]

http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/ combining cufon and @font

ZEN CSS EXAMPLES: [Ugly Qua Regular]

011 nice 3-column example;

013 very minimal design, nice use of trompe-l'oeil at top and bottom of page

014 uses % sizing

123 example of rounded corners technique [uses CSS2—NOT— CSS3]

201 uses absolute positioning to reorder document sections

index of all csszen designs: [Dymaxion] http://www.mezzoblue.com/zengarden/ alldesigns/

.dropcap:first-letter {
font-size: 60px;
color: red;
padding-right: 2px;
float: left;
margin: 2px 0 -1px;
}

.dropcap2 {
font-size: 58px;
color: yellow;
line-height:42px;
background: black;
float: left;
margin: 2px 4px -1px 0;
font-family: baskerville, times, serif;
padding: 6px 0 0 0;
}

.firstline:first-line {
font-weight: bold;
color: red;
}

.extratext:before {
content: "this is NOT in the html, it's generated ";
color: green;
font: italic bold 24px gillsans, "arial black", arial;
}

.extratext:after {
content: "and so is this ";
color: red;
font: italic bold 14px gillsans, "arial black", arial;
}

OVERFLOW [Hamburger Heaven]

http://www.quirksmode.org/css/overflow.html Overflow, hidden

http://codepunk.hardwar.org.uk/acssx17.htm Overflow, hidden

http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property Creating a rollover thumbnail using overflow

FLOATS [Studebaker]

http://css.maxdesign.com.au/floatutorial/ Float Tutorial

http://www.smashingmagazine.com/2007/05/01 /css-float- theory-things-you-should-know/ Comprehensive list of floats articles

http: //www.complexspiral.com/publications/containing-floats Containing floats

http://www.quirksmode .org/css/clearing.html Floats and clearing

http://css-discuss.incutio.com/?page=FloatLayouts Floats and clearing

http://www.alistapart.com/articles/ negativemargins/ Float using negative margins

http://www.positioniseverything.net/articles/onetruelayout/anyorder Using float and negative margins to reorder columns

http://www.brunildo.org/test/Float_negt.html Negative margin and floats

negativemarginlayout.html My instructions on negative margin and floats

MORE on SELECTORS [Hill House]

http://gallery.theopalgroup.com/selectoracle/ Selectoracle: site will deconstruct and explain selectors on a site

WORKFLOW and GOOD PRACTICES [Motor Oil]

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ Workflow and good practices

http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/ more ideas for better coding

Web Trends
[Rose Caps] [this font was uploaded from dafont.com using the Squirrel @font-face Generator.]

http://webdesignledger.com/tips/web-design-trends-in-2011 Web Trends for 2011

http://webdesignledger.com/tips/web-design-trends-for-2010 if you missed Web Trends for 2010...

XRAY Tool [Forque]

Xray tool for CSS analysis: http://www.westciv.com/xray/xray_more.html

Web inspector: Web analysis tool for Safari [Orbitron]

http://webkit.org/blog/41/ Web Inspector allows you to view page source; just right click on an element, or hold Shift + Control.

First, do a download of the latest build, like WebKit-SVN-r38297.dmg
Then type this into the Mac Terminalapp : defaults write com.apple.Safari \WebKitDeveloperExtras -bool true
Finally, restart Safari. Youwill see 'Inspect Element' when youright click or click with Shift + Control

class site: http:// www.annetteweintraub.com/courses/49540/49540.html