by
845 17
2
6
3,092
1
Top 1% !
Popular
Famous
Easy-to-find
Specified
OpenSource
Popularity: 3632nd place
Created
Modified Oct 22, 2014
BrowserAll
FontOpen Sans
Languagecss
LicenseMIT_X11
SubjectWeb Typography

Web Typography done right

Take note of spacing, readability, layout of @font-face and font file references as well as implementation and naming conventions.
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/203283/Web-Typography-done-right?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
/* -------- WEBFONTS ------------------------------------------------ */ /* -------- Light --------------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-Light-webfont.eot'); src: url('webfonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-Light-webfont.woff') format('woff'), url('webfonts/OpenSans-Light-webfont.ttf') format('truetype'), url('webfonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); font-weight: 300; font-style: normal; } /* -------- Light Italic ------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-LightItalic-webfont.eot'); src: url('webfonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-LightItalic-webfont.woff') format('woff'), url('webfonts/OpenSans-LightItalic-webfont.ttf') format('truetype'), url('webfonts/OpenSans-LightItalic-webfont.svg#open_sanslight') format('svg'); font-weight: 300; font-style: italic; } /* -------- Normal ------------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-Regular-webfont.eot'); src: url('webfonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-Regular-webfont.woff') format('woff'), url('webfonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('webfonts/OpenSans-Regular-webfont.svg#open_sanslight') format('svg'); font-weight: 400; font-style: normal; } /* -------- Italic ------------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-Italic-webfont.eot'); src: url('webfonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-Italic-webfont.woff') format('woff'), url('webfonts/OpenSans-Italic-webfont.ttf') format('truetype'), url('webfonts/OpenSans-Italic-webfont.svg#open_sanslight') format('svg'); font-weight: 400; font-style: italic; } /* -------- Semi Bold --------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-SemiBold-webfont.eot'); src: url('webfonts/OpenSans-SemiBold-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-SemiBold-webfont.woff') format('woff'), url('webfonts/OpenSans-SemiBold-webfont.ttf') format('truetype'), url('webfonts/OpenSans-SemiBold-webfont.svg#open_sanslight') format('svg'); font-weight: 600; font-style: normal; } /* -------- Semi Bold Italic -------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-SemiBoldItalic-webfont.eot'); src: url('webfonts/OpenSans-SemiBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-SemiBoldItalic-webfont.woff') format('woff'), url('webfonts/OpenSans-SemiBoldItalic-webfont.ttf') format('truetype'), url('webfonts/OpenSans-SemiBoldItalic-webfont.svg#open_sanslight') format('svg'); font-weight: 600; font-style: italic; } /* -------- Bold ------------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-Bold-webfont.eot'); src: url('webfonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-Bold-webfont.woff') format('woff'), url('webfonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('webfonts/OpenSans-Bold-webfont.svg#open_sanslight') format('svg'); font-weight: 700; font-style: normal; } /* -------- Bold Italic ------------------------------------------ */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-BoldItalic-webfont.eot'); src: url('webfonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-BoldItalic-webfont.woff') format('woff'), url('webfonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('webfonts/OpenSans-BoldItalic-webfont.svg#open_sanslight') format('svg'); font-weight: 700; font-style: italic; } /* -------- Extra Bold ------------------------------------------- */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-ExtraBold-webfont.eot'); src: url('webfonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-ExtraBold-webfont.woff') format('woff'), url('webfonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('webfonts/OpenSans-ExtraBold-webfont.svg#open_sanslight') format('svg'); font-weight: 800; font-style: normal; } /* -------- Extra Bold Italic ------------------------------------ */ @font-face{ font-family: 'Open Sans'; src: url('webfonts/OpenSans-ExtraBoldItalic-webfont.eot'); src: url('webfonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), url('webfonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), url('webfonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sanslight') format('svg'); font-weight: 800; font-style: italic; } /* ------- Font Styling Done the RIGHT WAY ----------------------- */ /* NOTE: 1em = 10px Em are compounding font sizes based on body font size watch out for nested elements li > li */ /* NOTE: 1Rem = 16px ie8 does not support Rem units use Px fallback */ /* NOTE: ( 1 col ) 45 - 75 chars per line of paragraph text (mid 60s best practice)*/ /* NOTE: ( multi col ) 40 - 50 chars per line of paragraph text (mid 60s best practice)*/ body{ font-size: 1.25em; /* em is better than px especially in RWD */ font-weight: normal; color: #393939; background-color: #F9F9F9; line-height: 1.6; } .sans-p-body{ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; /* FONT STACKING */ } .serif-p-body{ font-family: 'Alegreya', Georgia, Serif; /* FONT STACKING */ } .container{ max-width: 37.5rem; margin: 0 auto; padding: 4.2em 0; } p{ line-height: 1.6; margin: 0; } p + p{ text-indent: 2em; } h1{ font-size: 2.441em; line-height: 1.1; margin: 0 0 .5em; } h2{ font-size: 1.953em; line-height: 1.2; margin: 1.42em 0 .7em; } h3{ font-size: 1.563em; line-height: 1.3; margin: 1.05em; } img{ margin: 2.4em 0 2em; padding: 0; max-width: 100%; } /* PLEASE NOTE THIS MANY VARIANTS OF ANY FONT WILL KILL PAGE LOAD TIMES ALSO IE DOESNT ALLOW MORE THAN 4 TO BE LOADED THIS EXAMPLE NOT INTENDED TO BE USED IN THIS STATE FOR PRODUCTION SERVERS - HIGHLY IMPRACTICAL DONT SAY YOU WERENT WARNED ^.^ */
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus