TYPOGRAFI

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

font-style
font-variant
font-family
font-weight
font-size
line-height

text-align
text-decoration
text-indent
text-shadow
text-transform

color
background-color
letter-spacing
Shorthand Properties

FONT-STYLE

Normal

font-style: normal;

Italic

font-style: italic;

Oblique

font-style: oblique;

FONT-VARIANT

Normal

font-variant: normal;

small caps

font-variant: small-caps;

FONT-FAMILY

Times New Roman

font-family:"Times New Roman",Georgia,Serif;

Verdana

font-family:"Verdana",sans-serif;

Source Sans Pro

font-family:"Source Sans Pro",sans-serif;

FONT-WEIGHT

Google-font Source Sans Pro

font-weight: 100;

font-weight: 200;

font-weight: 300;

font-weight: 400;

font-weight: 500;

font-weight: 600;

font-weight: 700;

font-weight: 800;

font-weight: 900;

Google-font Source Sans Pro

font-weight: lighter;

font-weight: light;

font-weight: normal;

font-weight: bold;

font-weight: bolder;

System-font Verdana

font-weight: 100;

font-weight: 200;

font-weight: 300;

font-weight: 400;

font-weight: 500;

font-weight: 600;

font-weight: 700;

font-weight: 800;

font-weight: 900;

System-font Verdana

font-weight: lighter;

font-weight: light;

font-weight: normal;

font-weight: bold;

font-weight: bolder;

FONT-size

font-size: 9px;

font-size: 10px;

font-size: 13px;

font-size: 16px;

font-size: 18px;

font-size: 24px;

font-size: 32px;

font-size: 0.563em;

font-size: 0.625em;

font-size: 0.813em;

font-size: 1em;

font-size: 1.125em;

font-size: 1.500em;

font-size: 2em;

font-size: xx-small;

font-size: x-small;

font-size: small;

font-size: normal;

font-size: medium;

font-size: large;

font-size: x-large;

font-size: xx-large;

font-size: 56.3%;

font-size: 62.5%;

font-size: 81.3%;

font-size: 100%;

font-size: 112.5%;

font-size: 150%;

font-size: 200%;

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;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-align: center;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-align: right;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-align: justify;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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;