Formatting text
Web development I: Front-end engineering
Tips
Specifying fonts is more like merely suggesting them
We don’t really have full control over which font users will see
We should use generic fonts as a fallback
Font Properties
font-family Font name
font-size Font size
font-weight Font weight (boldness)
font-style Font style (italics)
font-variant Font variant (small caps)
font Shorthand declaration
Specifying the font name
● Font names must be capitalized: “Arial” instead of “arial”
○ Exception: generic font families: sans-serif, monospace, etc.
● Use commas to separate multiple font names as fallback cases:
○ p { font-family: Arial, sans-serif; }
● Font names with spaces (e.g. Duru Sans) must appear within quotes:
○ p { font-family: "Duru Sans", Arial, sans-serif; }
Generic font families
Serif (e.g. Times New Roman)
Sans-serif (e.g. Arial)
Monospace (e.g. Courier New)
Cursive (e.g. Comic Sans)
Fantasy (e.g. Impact)
Custom web fonts
@font-face { Many fonts aren't free to use: check license!
font-family: "myFont"; All browsers understand the WOFF format
src: url("myFont.woff2"); WOFF2 supports TrueType and OpenType
fonts
}
html {
font-family: "myFont", serif; Font declaration order is important
}
Specifying the font size
h1 { font-size: 1.5em; } Specific CSS units: em, rem, px, vh, etc.
h1 { font-size: 150%; } Percentages
h1 { font-size: x-large; } Absolute keywords
h1 { font-size: larger; } Relative keywords
Default font size is 16px
CSS units
Absolute: Relative:
px pixels em computed font-size value
pt points ex x-height of the font
pc picas rem root em, set in html element
mm millimeters ch width of the zero (0) letter
cm centimeters vw viewport width, 1% default
in inches vh viewport height, 1% default
vmin viewport min(width,height) size
(only good for print materials) vmax viewport max(width,height) size
Specifying other font styles
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700
| 800 | 900 | inherit
font-style: normal | italic | oblique | inherit
font-variant: normal | small-caps | inherit
Shorthand declaration: style + weight + variant + size/line-height + family
h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, sans-serif; }
Changing text color
p { color: gray; } Color names
p { color: #665544; } Hexadecimal notation (RRGGBB)
p { color: #654; } Shorthand hex notation
p { color: rgb(10,12,56); } RGB decimal notation
p { color: rgba(10,12,56, 0.5); } RGBA decimal notation with transparency
p { color: hsl(265, 23%, 90%); } HSL notation
Text adjustments
line-height: number | length measurement | percentage | normal | inherit
text-indent: length measurement | percentage | inherit
text-align: left | right | center | justify | inherit
text-decoration: none | underline | overline | line-through | blink
text-transform: none | capitalize | lowercase | uppercase | inherit
letter-spacing: length measurement | normal | inherit
word-spacing: length measurement | normal | inherit
Text adjustments
vertical-align: baseline | sub | super | top | text-top | middle |
textbottom | bottom | percentage | length | inherit
white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit
text-direction: ltr | rtl | inherit
text-shadow: ‘horizontal offset’ ‘vertical offset’ ‘blur radius’ ‘color’ | none
List bullets and numbers
list-style-type: none | disc | circle | square | decimal | decimal-leading-zero |
lower-alpha | upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman |
lower-greek | inherit
list-style-position: inside | outside | inherit
list-style-image: url | none | inherit
