Upload
alastair-hodgson
View
119
Download
1
Tags:
Embed Size (px)
DESCRIPTION
My Forefront Leeds presentation on "Mastering Web Typography" Follow up blog posts here... http://www.stikoo.co.uk/blog/2014/03/mastering-web-typography-pt-1 http://www.stikoo.co.uk/blog/2014/06/mastering-web-typography-pt-2
Citation preview
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
●●●
●●●●
●●●●●●●