TYPOGRAFI
Udvalgte CSS-koder der har med fonte og typografi at gøre!

FONT-STYLE
font-style: normal;
font-style: italic;
font-style: oblique;
FONT-VARIANT
font-variant: normal;
font-variant: small-caps;
FONT-FAMILY
font-family:"Times New Roman",Georgia,Serif;
font-family:"Verdana",sans-serif;
font-family:"Source Sans Pro",sans-serif;
FONT-WEIGHT
Google-font Source Sans Pro
Google-font Source Sans Pro
System-font Verdana
System-font Verdana
FONT-size
Omregn pixel til em - eller omvendt: www.pxtoem.com/
LINE-HEIGHT (SKYDNING)
line-height: 16px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 1em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 100%;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 1;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 22px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 1.375em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 137.5%;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 1.375;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 24px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 1.5em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 150%;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
line-height: 1.5;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Omregn pixel til em - eller omvendt: www.pxtoem.com/
TEXT-ALIGN
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
TEXT-DECORATION
None
text-decoration: none;
Underline
text-decoration: underline;
Overline
text-decoration: overline;
Line-through
text-decoration: line-through;
TEXT-INDENT
text-indent: 20 px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-indent: 1.250em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-indent: 20%;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
TEXT-shadow
Lorem ipsum
text-shadow:2px 2px 8px grey;
Lorem ipsum
text-shadow:5px 5px 0px #ccc;
Lorem ipsum
text-shadow:2px 2px 8px rgb(255,140,0);
Lorem ipsum
text-shadow:2px 2px 8px rgba(255,140,0,0.5);
Syntaks:
text-shadow: h-shadow v-shadow blur farve;
H-shadow
text-shadow: 5px 0px 0px lightgrey;
V-shadow
text-shadow: 0px 5px 0px lightgrey;
BLUR
text-shadow: 0px 0px 20px #000;
FARVE
text-shadow: 0px 0px 10px rgb(255,140,0);
TEXT-TRANSFORM
text-indent: transform: none;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-indent: transform: uppercase;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-indent: transform: capitalize;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-indent: transform: lowercase;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
COLOR
Lorem ipsum
color: grey;
Lorem ipsum
color: #4c9ebd;
Lorem ipsum
color: rgb(255,140,0);
Lorem ipsum
color: rgba(255,140,0,0.2);
BACKGROUND-COLOR
Lorem ipsum
background-color: grey;
Lorem ipsum
background-color: #4c9ebd;
Lorem ipsum
background-color: rgb(255,140,0);
Lorem ipsum
background-color: rgba(255,140,0,0.2);
LETTER-SPACING
letter-spacing: normal;
Lorem ipsum dolor sit amet
letter-spacing: 1px;
Lorem ipsum dolor sit amet
letter-spacing: 1em;
Lorem ipsum dolor sit amet
letter-spacing: 10%;
Lorem ipsum dolor sit amet
Shorthand properties
font-style, font-weight, font-size, line-height og font-family kan koges ned til en CSS-linje, eksempel:
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
Shorthand:
font: italic bold .8em/1.2 Arial, sans-serif;