Skip to content
-
- font-family: allows you to specify a font or list of fonts
- web safe fonts: fonts that are generally available across all systems
- sans-serif ‘Arial’ (alternative ‘Helvetica’), ‘Trebuchet MS’, ‘Veranda’
- serif ‘Georgia’, ‘Times New Roman’/’Times’ (best practice to use both)
- monospace ‘Courier New’/’Courier’ (best practice to use both)
- link to websafe font list?
- Default fonts: without a font-family property a browser default font is used, there are 5 generic font groups [serif, sans-serif, monospace, cursive, and fantasy]
- Font stacks: the browser runs through the list of fonts under font-family until it finds one that’s available, supplying a list of fonts gives the browser fall back options in case the first couple fail, it’s best practice to provide a generic font at the end of the stack so that if none of the fonts listed are available the browser can still render something suitable
- font-size: the size of the text, best practice to set the default font of a page to 10px
- px (pixels): # of pixels tall you want the text to be, absolute unit
- em: 1em is the font size set on the parent element to the current element that’s being styled
- rem: 1rem is the font size set on the root element of the document (<html>), set the default font size of a document to 10px to make the math easy when using rems
- font-style: controls italic text
- normal: turns italics off (normal)
- italic: turns italic on, uses the italic version of the font if availbile
- oblique: turns italic on, makes an italic version using the normal font, used if the italic version of the font isn’t available
- font-weight: controls bold text
- normal: turns bold off
- bold: turns bold on
- lighter/bolder: makes the current element one step lighter/heavier than its parent element’s boldness
- 100-900: numeric boldness that provide more control than keywords
- text-transform: allows you to transform the font
- none: no transformation
- uppercase: ALL TEXT IS CAPITAL
- lowercase: all text is lower case
- capitalize: Every Word Has The First Letter Capitalized
- full-width: fixed width square that contains each letter, similar to monospace
- text-decoration: *mainly used to take away the default underline of links
- none: unsets any text decoration already present
- underline: underline’s text
- overline: gives the text an overline
- line-through: strikes through the text
- text-shadow: applies a drop shadow to the text, specify 4 values- horizontal offset, vertical offset, blur radius, and shadow color
{text-shadow: _px _px _px color;}
- text-align: controls how text is aligned within its content box
- left, right, and center value options
- justify: makes the text spread out, varying the space between words so that each line is the same width
- line-height: sets the height of each line of text, unitless value, recommended 1.5-2 (double spaced)
- letter-spacing: sets the space between each letter
- word-spacing: sets the space between each word
- "Other Properties Worth Looking At"
- Check out this section because you might find something of interest to you! Here are the one’s I focused on
- text-indent: sets the amount of horizontal space that should be left before the first line of text content, custom paragraph indent
- text-overflow: sets how overflowed text that is not displayed is signaled to the user
- white-space: how whitespace and line breaks are handled within an element, the default in html is to ignore whitespace but you can change that setting and put your white space to work with CSS should you want to