Typography

Typography is the way that text is arranged and presented.

Resources

Fonts

Text properties

text-decoration → Underlining, overlining, line-through, etc. The default is none, but it can be explicitly declared to remove the underline from an href link, for example. text-transform → uppercase, lowercase, etc.

text-align → Default is left. Can be used to justify.

text-indent → Can use CSS Units to declare how far to indent the paragraph or text.

Font properties

font-weight → How bold a font is, around 400 is the default.

font-style → Italic, oblique, normal

Font family

font-family → Usually set at the body or higher elements to affect entire document.

There are fallback values, such as serif, sans-serif, cursive, fantasy. These are the least specific and will be set by each browser if nothing else is selected.

When setting a font family we can do several values, such as:

font-family: 'Courier New', Courier, monospace

This a preference is descending order: if a browser does not have Courier New, it will fall back on Courier, and then on monospace.

External fonts

We can use fonts that are not installed in a computer by downloading the font file and rendering it. The downside, of course, is the extra loading time it will take to download it.

To use external fonts we can either use a link or an import. When using a link, make sure to add it prior to our stylesheet so that we can use it in the stylesheet.

We can also is @import for the fonts. This does away with the link requirement in the HTML file and allows us to write everything directly in CSS:

@import url(font/hinted-BerkeleyMonoTrial-Regular.woff);
 
html {
font-size: 22px;
}
 
body {
font-family: 'Berkeley Mono Trial';
}

Note that the “font-family” property must have the name of the font, even if the woff/tff filename is different.

Other properties

line-height → defaults to 1.2, but can be set to something like 1.4 to increase readability.

letter-spacing → Manages space between letters.

word-spacing → Like letter spacing, but added between words.

Styling links

This refers stuff with a tags.

The default is to have them blue when not visited, purple when visited, underlined, and red when active, as well as having a cursor change when hovering over it.

 
a {
color:aliceblue;
}
 
a:visited {
color: lightgray;
}
 
a:hover, a:focus {
	color: #dodgerblue;
}
 
a:active {
	color: #eee
}

The a:<item> is known as a pseudo-class because these represent the current state of the element.

Note: because of specificity in CSS, we want to make sure we maintain the following order for our a tag styles to work: a → a:visited → a:hover → a:active.

The a:focus pseudoclass is used to highlight in a color whatever is being focused. Useful for screen-readers and probably for keyboard only browsers.

When changing the color of the “hover” and “focus” pseudoclass it can be useful to set the a color to something using HSL and then simply changing the H value a bit. Alternatively we can change the opacity by using an opacity property at about opacity: 0.8 or by adding an alpha value for rgb or hsl.

Styling lists

An unordered list is basically the same as an ordered list with different styling. For example, we can set:

ol {
	list-style-type: disc;
}

This will cause the following:

Item

to show as follows:

Item

Often [[Pseudo elements]] are used to change the type of marker for a list.

Likewise we can number unordered lists with:

ul {
	list-type-style: decimal;
}

We can apply different styles to lists using nested selectors. If we want to apply a style to the nth item of a list we could use the nested selector like so:

ul li:nth-child(2) { 
	color: red;
}

Note that the nth-child pseudo-class also accepts values such as odd or even. In particular note that this still applies to unordered lists.

Start value

If we want to change where an HTML ordered list starts we can simply set the “start” attribute in HTML, or the “reversed” attribute to count down:

<ol start="3" reversed>

Style position

Some browsers include the bullet or number of a list as part of the text, while others keep it outside. The implication of this is that if we want to centre a list, for instance, using text-align we may see just the text move or the entire thing.

To fix it we can set list-style-position: inside so that the bullets go with the text, and we can set it by default using a CSS Reset.

Shorthand

We can specify a bullet style, an image for bullets, and whether the style position is inside or outside using list-style: square url("<path-to-img>") inside;. In this case, the bullets are styled with the image using square as a fallback.

arvb.net

Explorer