composition and typography - course stuff · web typography is changing... •in the past, web...
TRANSCRIPT
![Page 1: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/1.jpg)
CSS Typography
Webpage Design
![Page 2: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/2.jpg)
Web Design is 95% Typography
Oliver Reichenstein, 2006
One More Time: Typography Is The Foundation Of Web Design
![Page 3: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/3.jpg)
Typography
Clarity
Typography has many purposes but clarity (readability) and personality are two of the most important. Notice that the two fonts used above are subtly different and this makes a big difference to the way they look on the page.
Arial
Personality Trebuchet MS
![Page 4: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/4.jpg)
Typography and typefaces
• Typography is not just about choosing the correct typeface for a particular design, it’s about how that typeface is used:
o Size and colour
o Line height
o Letter and word spacing
o General layout, whitespace and hierarchies
• CSS gives us control of these parameters
![Page 5: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/5.jpg)
Typeface/font?
A typeface is a named design for a set of characters (glyphs) that make up a character set. For example, Garamond is a typeface. Typefaces are often composed of a number of fonts that define variations in the design and these are often referred to as a font family. For example, Garamond Regular, Garamond Bold and Garamond Italic are all fonts and are part of the wider Garamond font family. Typically, each font is contained in a separate file.
A typeface is not a font
![Page 6: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/6.jpg)
CSS Typography
Here’s an example of a web page displayed without styles and with CSS added. Notice particularly how visual hierarchy is changed in the styled version.
http://xheight.co.uk/
![Page 7: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/7.jpg)
Web Typography is changing...
• In the past, web designers were restricted to using only those fonts that were installed on the client computer.
• This limited set of fonts were described as “web safe” fonts.
• Modern browsers now support the CSS3 “@font-face” feature, which potentially enables designers to use any font.
http://www.w3schools.com/css/css_websafe_fonts.asp
http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css
![Page 8: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/8.jpg)
...and we’re almost there
• There are a few creases to iron out:
oMost browsers support the TTF and OTF font formats but IE supports only EOT.
o Designers cannot use most fonts without a web license.
• Fortunately, there are a growing number of “web font embedding services” that serve all formats and provide a convenient way to pay for licensing.
http://webfonts.info/wiki/index.php?title=@font-face_browser_support/
http://opentype.info/blog/2009/07/29/why-webfont-services-are-the-future-of-fonts-on-the-web/
http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/
![Page 9: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/9.jpg)
Open Source fonts are free
• Fonts with an open source license may be used for free.
• Some services, such as Google web fonts, provide an easy way to use open source fonts.
• Font embedding is still relatively new and the next few years will see many changes to the way fonts are used on the web.
http://www.google.com/webfonts
![Page 10: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/10.jpg)
Web font services
• In addition to Google, there are now a number of services that serve fonts.
• Some are free and others have varying payment models.
http://www.webdesignermag.co.uk/inspiration/5-web-font-services-not-to-miss/
![Page 11: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/11.jpg)
HOW ARE TYPEFACES CLASSIFIED? Webpage Design
![Page 12: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/12.jpg)
Typeface classification
There are a number of different ways to classify typefaces but broadly, there are two we should be aware of:
1. Typefaces are either serif or sans-serif, which describes the design of the letterforms. Other styles also exist (e.g. script) but are less commonly used.
2. Typefaces are designed for a specific use and typically this is either body text (long-form text), heading text (short-form text) or display text (very short-form or logo).
It's important to choose the correct typeface for a particular purpose.
![Page 13: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/13.jpg)
Typeface classification
The Google fonts service uses 5 broad categories. The Serif and Sans Serif fonts could be used for either headings or body text but you will need to use your own judgement to decide which is best. Display should be used only for headings or page banners. Handwriting is rarely a good idea if readability is important and Monospace is useful for tabular data, particularly for numerals.
![Page 14: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/14.jpg)
What’s a Serif?
A Serif Font
A Sans-Serif Font
Traditionally, the purpose of the serif was to guide the eye when reading small printed body text such as newsprint.
On the web, serif fonts don’t render well and so the sans-serif fonts are more commonly used for body text – a reversal of the traditional printed use*.
Cambria
Calibri
*The advent of "retina" displays is changing this.
![Page 15: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/15.jpg)
Print/Online Comparison
Sans-serif heading
Serif body text
Serif heading
Sans-serif body text
![Page 16: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/16.jpg)
Screen Fonts
Georgia
Verdana x-height
x-height
Fonts designed specifically for the screen tend to have larger x-heights. This results in more open “counters”, making them more easily rendered and therefore more readable. Georgia and Verdana are good examples of this and are commonly used in combination on websites.
counter
![Page 17: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/17.jpg)
Georgia + Verdana
![Page 18: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/18.jpg)
Which typeface is right?
Selecting a typeface is tricky and has become more so now that choice has increased but you can start by selecting typefaces that are designed for a particular job (e.g. body text) and then select the one that has the right personality for a particular website. As with many design decisions, this choice is subjective and you'll need to train your eye…
this font ≠ this font
![Page 19: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/19.jpg)
Font Face
Verdana: large X-height, neutral/warm, common? Sans serif
![Page 20: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/20.jpg)
Font Face
Arial: classic, scientific/authoritative, cold? Sans serif
![Page 21: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/21.jpg)
Font Face
Comic Sans MS: informal, childish or amateur? Sans serif
![Page 22: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/22.jpg)
Font Face
Times New Roman: classic, compact Serif
![Page 23: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/23.jpg)
Font Face
Georgia: elaborate, warm Serif
![Page 24: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/24.jpg)
Font Face
Courier New: basic, traditional Serif
![Page 25: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/25.jpg)
Verdana body text with Georgia headings
![Page 26: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/26.jpg)
Arial body text and headings with Georgia pull quote.
![Page 27: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/27.jpg)
How many typefaces can I use?
You’d have to make a pretty good case for using more than 2.
![Page 28: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/28.jpg)
One for headings, one for body
Typically, one typeface is used for headings and another used for body text. This creates contrast between the two and makes the document easier to read. However, contrast can also be created within a single typeface using font size, weight and colour. The variety of fonts within the Roboto* family means it could be used for both headings and body text providing there is enough visual contrast between the two.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog
*Roboto comes is 6 different weights as well as italic, condensed and slab-serif variants.
![Page 29: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/29.jpg)
HOW CAN CSS HELP? Webpage Design
![Page 30: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/30.jpg)
CSS Typographic Properties
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.0em;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 1.5em;
text-align: justify;
text-decoration: line-through;
text-indent: 1.2em;
text-transform: lowercase;
word-spacing: 0.5em;
![Page 31: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/31.jpg)
Text pseudo-elements
The first letter and first line pseudo-elements
can be used to select those entities so that they can be styled independently of the other text in the same element. You may also see the double colon notation (p::first-line) but this is not understood by IE8 or lower.
p:first-line {
color:#CC0000;
}
p:first-letter {
color:#0000CC;
font-size:xx-large;
}
![Page 32: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/32.jpg)
Justification: take care
The CSS type properties provide great control over the way we set type on our webpages but great care should be taken. For example, the text-align property has a number of possible values, including left, right, center and justify but these should be used with care. By default, text is aligned to the left, which works well in most cases. Changing this default may cause undesirable results…
![Page 33: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/33.jpg)
p {
text-align:left;
}
The default – does not need to be specified. Gives flush left and ragged right.
P
![Page 34: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/34.jpg)
p {
text-align:justify;
}
P Gives flush left and right. OK providing columns are wide enough.
![Page 35: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/35.jpg)
Justified text in narrow columns is a bad idea
Distracting “rivers”
Distracting over-large spacing
![Page 36: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/36.jpg)
p {
text-align:center;
}
O Never for body text, headings maybe. No flush left so the eye finds it difficult to follow.
![Page 37: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/37.jpg)
p {
text-align:right;
}
O Just wrong for Western script.
![Page 38: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/38.jpg)
Line height
http://stackoverflow.com/questions/23247467/how-css-line-height-is-measured
Line height is another characteristic that should be used with care for many fonts in most contexts, the default value works just fine but it's worth experimenting to see if you can optimise readability.
![Page 39: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/39.jpg)
p {
line-height:1.5em;
}
The default value.
![Page 40: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/40.jpg)
p {
line-height:1.0em;
}
Too narrow: It's difficult to jump from the end of one line to another, making it difficult to read.
![Page 41: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/41.jpg)
p {
line-height:2.0em;
}
Too wide: At some point the space between lines becomes more visually dominant that the text.
![Page 42: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/42.jpg)
WHAT UNITS SHOULD I USE? Webpage Design
![Page 43: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/43.jpg)
Typographic units
• There are a wide range of units that a designer may use when specifying the size of type in CSS.
• In practice, only px (pixels), em (ems) and % (percent) are commonly used.
• The px is an “absolute” measurement whereas both em and % are “relative” or scalable.
• It is best practice to use relative units because IE6 will not scale fonts set with px.
• However, some designers have now dropped support for IE6 and are using px again.
http://css-tricks.com/css-font-size/
![Page 44: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/44.jpg)
CSS3 typographic units
• CSS3 introduces some useful new typographic units (rem, ch, vw, vh and vm).
• The new REM (Root EM) unit may be the most useful for typography.
• Because the EM unit is relative to its parent element size, it can be unpredictable or hard to calculate (or both!).
• REM solves this by being relative to the root element <html>, so the same value can be applied at different levels of the DOM with the same result.
http://generatedcontent.org/post/11933972962/css3values
![Page 45: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/45.jpg)
Font size strategy
• Different designers will have different approaches to font sizing.
• For example, some will adopt a strategy of setting the <body> font size to 62.5% and then using ems in all other declarations.
• This works because the default font size is 16px and 16 x 0.625 = 10px, which is more convenient because if a designer wants <h1> to be 48px high, the size can be set to 4.8em thus enabling a specific size to be set without resorting to absolute units or weird numbers.
http://clagnut.com/blog/348/
![Page 46: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/46.jpg)
Image replacement
Image replacement is a technique that is sometimes required if a typographic effect needs to be used which is not possible with CSS alone. For example...
This text follows an arc, the effect cannot be achieved with CSS and an image must therefore be used. However, we also need to include the original text in our markup for accessibility. The technique involves moving the original text off-screen (not hiding it) and then using a background image to display the required effect…
![Page 47: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/47.jpg)
Image replacement
<h1>
<h2> <h2>
<h2>
<h2 class="move">Apply now</h2>
<p class="apply-now">MA Web Design & Content Planning (full-time and part-time modes)
now recruiting for <strong>September 2010</strong>.
<br /> <a href="http://www.websitearchitecture.co.uk/programme-
details/index.php#applications">Find out more…</a></p>
#content-sub p.apply-now {
background-
image:url(images/apply-now-
default.png);
background-repeat:no-repeat;
background-position:top right;
padding-top:35px;
padding-right:25px;
margin-top:-10px;
}
.move {
position:absolute;
text-indent:-5000px;
}
![Page 48: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/48.jpg)
Learning more
The recently published On Web Typography by Jason Santa Maria is probably the best single source of information on the subject – highly recommended.
![Page 49: Composition and Typography - Course Stuff · Web Typography is changing... •In the past, web designers were restricted to using only those fonts that were installed on the client](https://reader033.vdocument.in/reader033/viewer/2022050217/5f62ac98b65e69485b1ae0f6/html5/thumbnails/49.jpg)