mastering web typography

www.stikoo.co.uk - @stikoo

Faux bold text in the middle Faux italic text in the middle

Regular

Italic

Bold

Bold Italic

@font-face{ font-family: "Gotham SSm A"; font-weight:200; font-style:normal; }

@font-face{ font-family: "Gotham SSm A"; font-weight:400; font-style:normal; }

@font-face{ font-family: "Gotham SSm A"; font-weight:700; font-style:normal; }

@font-face{ font-family: "Gotham SSm A"; font-weight:800; font-style:normal; }

*url() removed for brevity due to them being huge base64 data uri's

@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; }

@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; }

*url() removed for brevity

@font-face {

font-family: 'Open Sans';

font-style: normal;

font-weight: 400;

src: url(...);

format('embedded-opentype');

}

*url() removed for brevity

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: normal; }

@font-face { font-family: 'Open Sans Bold'; font-style: normal; font-weight: bold; }

@font-face { font-family: 'Open Sans Italic'; font-style: italic; font-weight: normal; }

@font-face { font-family: 'Open Sans Bold Italic'; font-style: italic; font-weight: bold; }

*url() and format() removed for brevity

13px/20px - 300px wide

13px/22px - 600px wide

●●●

●●●●

●●●●●●●