Typography
In your day to day web development, you will find yourself working with large blocks of text. CSS properties that give you greater control over the typographic elements of your text.
Alignment
The text-align property allows you to align the contents of the elemnet to the left, right, center, or to be justified.
Text Decoration
text-decoration: underline;The lazy ex-developer quickly uses GIFs, HTML, CSS, and JS on the World Wide Web.
text-decoration: none;text-decoration: none; is often used to remove the default underline on links.
Text Transform
Acceptable values are: uppercase, lowercase, and capitalize.
text-transform: uppercase;The lazy ex-developer quickly uses GIFs, HTML, CSS, and JS on the World Wide Web.
Line Height
Also called leading in typography (as in the thin strips of the metal lead that were used to space lines of text). It sets the distance between your non-breaking lines of text. Values can be any unit, or an integer. Using rems can give you more precise control.
Letter Spacing
Also called kerning in typography it adjusts the spacing between characters.
Word Spacing
Adjusts the spacing between words.
word-spacing: 1rem;The lazy ex-developer quickly uses GIFs, HTML, CSS, and JS on the World Wide Web.
White Space
Often used to set the text so that it doesn’t wrap.
First Letter & First Line Pseudo-elements
The :first-letter and :first-line pseudo-elements allow you to make typographic changes to the first letter or the first line of an element, without adding additional HTML code. The :first-letter will change the first character (and sometimes additional characters like quotation marks. The The :first-line will only change the text up to the first line break, regardless of how wide the line is, or if it changes.
Fonts
Font Size
The default font size for web browsers is 16px. I think that’s too small, and prefer to set my page’s default font size to 20px.
Set a scale for the sizes of your fonts. The <h1> element usually being the largest, and the <p> element usually being the smallest, though sometimes smaller text is used for footnotes and legal disclaimers.
Fonts can be measured in a variety of units, but pixel, em, and rem are most common. A pixel is a single dot on a screen. An em unit is the size of the letter m, but is equal to 16px. A rem unit stands for root em. It’s the size of the document set at the root element, usually with the :root or html selector.
You can use any standard units as described under Unit Values.
Type Scale
Changing the font size for the various headers allows you to create a typographic scale, with the more important headers gathering more attention.
Font Weight
font-weight: bold;The lazy ex-developer quickly uses GIFs, HTML, CSS, and JS on the World Wide Web.
Font Style
font-style: italic;The lazy ex-developer quickly uses GIFs, HTML, CSS, and JS on the World Wide Web.
Font Family
Web Safe Fonts
Basic font font groups in CSS are:
- Monospace
- In a monospace font, every character is the same width.
- Serif
- Sans-serif
- (Sans, meaning “without”).
- Cursive
- Fantasy
A font name that has a space in it is required to be in quotes.
font-family: 'Courier New', Courier, monospace;
font-family: Arial, Helvetica, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: Georgia, 'Times New Roman', Times, serif;
font-family: 'Brush Script MT', 'Lucida Calligraphy', cursive;
font-family: Papyrus, Herculanum, fantasy;Cursive and Fantasy fonts are often so different from one another that these fallback settings are usually worthless.