CSS: Fonts and Text
Visibility and legibility
Make your text easy to read and for accessibility, use relative sizing so that the viewer can increase font size if necessary.
Use an external style sheet to format all of the text on a
page or a Web site -- then your site will look consistent. If
you want to change the font style, you can do it in one place
-- the style sheet.
top
Font families and styles
- There are 5 generic font families on the Web.
- If you specify only the font-family the client will choose which specific font to display.
- Alternatively, you can specify a particular font.
- To make that font XHTML-compliant, you need to add the font-family name to end of the font list, so the browser has an alternative if it doesn't have the specified font
- Usability gurus recommend the use of no more than two different font faces or families on the same page.
- set a default font face and font-family in the body tags of the page for consistency throughout all of the child elements on the page
top
Font Families
- Serif fonts have noticeable details at the ends of the character strokes
- Sans-serif fonts are plain and preferred for web
- Monospace fonts give equal spacing to each letter. They can be useful for lining up columns of numbers
- Cursive fonts are meant to look like handwriting, but they can vary a great deal from one browser and computer to another
- Fantasy fonts are not recommended on the Web because there is no predicting what font will be displayed.
top
Relative Font Sizes:
- em: derived from width of characters (letter m) in the font
- ex: derived from height of lower-case x in the font.
- %: Percentage of default font.
- smaller: reduces parent's font size by 20%. 1em size font becomes .8em size font
- larger: increases parent's font size by 20%. 1em size font becomes 1.2 em size font
top
Advantages of using relative sized fonts
- makes font size adjustable in browser for viewers with alternate visibility requirements
- easy for developer to change font sizes proportionally simply by adjusting the font size set in the body tags
Disadvantages of relative sized fonts
- Users may break up page layout if they set default browser font size to very large size
- Developer has to use discipline in resizing fonts in nested elements, because font sizes are inherited from parent elements, which may not be the original font size set in body tags
In example on p.80 of Stylin' book.
The sizes of nested elements are multiplied by each other. The results of these styles would yield a font size that is .575 em (.7 x .75) for links within an unordered list {<ul> <li> <a href="links.htm">some links example</a></li></ul>.
ul {font-size:.75em}
a {font-size:.7em}
A contextual selector will not change the font size from the parent element.
ul a {font-size:inherit}
top
Font colors
CSS requires setting both background and font colors in each. You can set font colors by using words, RGB codes, or hexadecimal codes.
- This font is defined by the inline style = “color = blue” . In an inline style, only need to use “color = blue” rule inside a style declaration
- This font is defined by the inline style = “color =#0000ff”. In an inline style, only need to use the “color = #0000ff” rule inside a style declaration
- This font is defined by the inline style = “color = rgb(0,0/,255)”. In a style, only need to use the “color =rgb(0,0/,255)” rule inside a style declaration
Make sure the font contrasts with the background so you can read it. Whenever you set a new background color in an element, you also need to define the font color to be sure it will contrast with the background.
top
Bad Examples
Hard to read this text because the background is so busy
If the user cannot read your message, then they will not be
able to perform the tasks they are supposed to do while they
are visiting your Web site
top
Font Styles
- Font-style set to italic
- Font-style set to oblique is usually same as italic
- Font-style normal sets it back to normal
Font-Variants
- Font-variant small caps
- Font-variant normal sets font back to normal
- Font-stretch ultra-expanded expands font family -- invalid in CSS 2.1, current version
- Font-stretch extra-condensed condenses font -- invalid in CSS 2.1, current version
- Font-stretch normal sets font back to normal -- invalid in CSS 2.1, current version
top
Font-Weight
- Font-weight bold makes font bold
- Font-weight 900 makes font very bold (can be set from 100 to 900 by hundreds)
- Font-weight lighter makes font lighter
- Font-weight bolder makes font proportionally bolder
- Font-weight normal sets font weight back to normal
top
Text-Properties
Text-indent
Example of a style called .textin {text-indent:2em;} which indents text at beginning of paragraph 3em
Example of a style called .textout {text-indent:2em;} which indents text at beginning of paragraph -2em
Letter-spacing Property
Example of a style called .lspacepos {letter-spacing:.2em;} which increases space between letters
Example of a style called .lspaceneg {letter-spacing:-.2em;} which decreases spaces between letters2em
top
Word-Spacing Property
Example of a style called .wspacepos {word-spacing:.9em;} which increases space between letters
Example of a style called .wspaceneg {word-spacing:-.8em;} which decreases spaces between words
Text-Decoration Property
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:none
top
Text-Align Property
text-aline:right
text-align:left
text-align:justify text-align:justify text-align:justify text-align:justify text-align:justify text-align:justify text-align:justify
Line-Height Property
line-height:.5em; background:#FFFFFF;
line-height:1em; background:#FFFFFF;
line-height:2em; background:#FFFFFF;
top
Text-Transform Property
text-transform:uppercase
text-transform:lowercase
text-transform:capitalize and capitalize and capitalize
text-transform:none
Vertical-Align Property
example: vertical-align:-.5em; applied for subscript
example: vertical-align:.5em; applied for superscript
example:<sub> use of sub tag </sub>applied for subscript
example:<sup> use of sup tag </sup>applied for subscript
top
Try out various combinations
Readability
Jakob Nielsen has some excellent columns on Web page readability. He shows how to present textual information so that it can be scanned and comprehended by someone who is skimming pages for information. How users read on the Web
top
Reliability and Quality
Spell check your text -- if you misspell words the user thinks that you are careless, and probably the user will not trust what else you have to say.
Why does Nielsen mean when he writes?
"Credibility can be increased by high-quality graphics, good writing, and use of outbound hypertext links."
He is talking about trust. Trust is something that is hard to get and easy to lose. Being sloppy with writing, spelling, poor quality graphics, missing links, etc., does not inspire trust in the user of your website.
top
