composition and typography - course stuff · web typography is changing... •in the past, web...
TRANSCRIPT
CSS Typography
Webpage Design
Web Design is 95% Typography
Oliver Reichenstein, 2006
One More Time: Typography Is The Foundation Of Web Design
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
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
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
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/
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
...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/
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
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/
HOW ARE TYPEFACES CLASSIFIED? Webpage Design
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.
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.
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.
Print/Online Comparison
Sans-serif heading
Serif body text
Serif heading
Sans-serif body text
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
Georgia + Verdana
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
Font Face
Verdana: large X-height, neutral/warm, common? Sans serif
Font Face
Arial: classic, scientific/authoritative, cold? Sans serif
Font Face
Comic Sans MS: informal, childish or amateur? Sans serif
Font Face
Times New Roman: classic, compact Serif
Font Face
Georgia: elaborate, warm Serif
Font Face
Courier New: basic, traditional Serif
Verdana body text with Georgia headings
Arial body text and headings with Georgia pull quote.
How many typefaces can I use?
You’d have to make a pretty good case for using more than 2.
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.
HOW CAN CSS HELP? Webpage Design
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;
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;
}
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…
p {
text-align:left;
}
The default – does not need to be specified. Gives flush left and ragged right.
P
p {
text-align:justify;
}
P Gives flush left and right. OK providing columns are wide enough.
Justified text in narrow columns is a bad idea
Distracting “rivers”
Distracting over-large spacing
p {
text-align:center;
}
O Never for body text, headings maybe. No flush left so the eye finds it difficult to follow.
p {
text-align:right;
}
O Just wrong for Western script.
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.
p {
line-height:1.5em;
}
The default value.
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.
p {
line-height:2.0em;
}
Too wide: At some point the space between lines becomes more visually dominant that the text.
WHAT UNITS SHOULD I USE? Webpage Design
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/
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
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/
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…
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;
}
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.
