Typography & Color

färg och font

rgb(a);

red, green, blue, alpha

red green blue Opacity

hsl(a)

hue, saturation, lightness, opacity

Hue Saturation Lightness Opacity

Font Properties

font properties

font-size:px/em/%/small;
font-family:"Arial";
font-color: slategray;
font-weight: bold;
font-style: bold;
font-variant: small-caps;

font shorthand

font: 16px "Arial";
font: 16px/1.5 "Arial";
font: 16px/1.5 "Arial", sans-serif;
font: 16px/1.5 "Helvetica Neue", Arial, sans-serif

% / em / rem

100% === 16px
1em === 16px
1rem === 16px

Extra extra!

letter-spacing: 0.1em;
word-spacing: 0.1em;
line-height: 1.5


                font-family: 'Bungee', cursive;

Font face


                  @font-face(
                  font-family: "MyFont";
                  src:  url("myfont.woff") format("woff"));
                  font-weight: normal;
                  )

Font face


                    @font-face(
                    font-family: "MyFont";
                    src:  local("myfont.woff") format("woff"),
                    url("myfont.woff") format("woff"),
                    font-weight: normal;
                    )

https://prowebtype.com/

https://www.typewolf.com/

Fältstudie

Besök sidor som du brukar vara inne på och studera följande

Custom webfonts? Kombinationer av fonter?
Färgkombinationer? Dominant färg / Sekundär färg / Neutral färg (bakgrund)
Positionering av element? Line-height? Margins / Paddings

Diskutera och skriv ned era fynd. Vad kan återanvändas? Vad kan vi stjäla? Och vilka "dåliga" fynd hittar ni? (fulhack)