Hello! twitter.com/shiota github.com/eshiota slideshare.net/eshiota [email protected]
Museo
The quick brown fox jumps over the lazy dog.
Meta Serif
The quick brown fox jumps over the lazy dog.
Times New Roman
The quick brown fox jumps over the lazy dog.
Futura
The quick brown fox jumps over the lazy dog.Museo Sans
The quick brown fox jumps over the lazy dog.
Helvetica
The quick brown fox jumps over the lazy dog.
Fette Fraktur
The quick brown fox jumps over the lazy dog.
Goudy Text
The quick brown fox jumps over the lazy dog.
Wilhelm Klingspor Gotisch
The quick brown fox jumps over the lazy dog.
Lucida Calligraphy
The quick brown fox jumps over the lazy dog.Mistral
The quick brown fox jumps over the lazy dog.
Apple Chancery
The quick brown fox jumps over the lazy dog.
Comic Sans
The quick brown fox jumps over the lazy dog.Sketch Rockwell
The quick brown fox jumps over the lazy dog.
GodOfWar
The quick brown fox jumps over the lazy dog.
Bodoni Ornaments
The quick brown fox jumps
over the lazy dog.
Travel Icons
The quick brown fox jumps over the lazy dog.
Wingdings
The quick brown fox jumps over the lazy dog.
.my-serif-text { font-family: "Meta Serif", Times, serif; }
.my-sans-serif-text { font-family: "Proxima Nova", Arial, sans-serif; }
.my-monospace-text { font-family: Monaco, "Courier New", monospace; }
.my-cursive-text { font-family: "Zapf Chancery", "Brush Script", cursive; }
.my-fantasy-text { font-family: "Sketch Rockwell", Papyrus, fantasy; }
html { font-size: 16px; }
.wrapper { font-size: 12px; }
.parent { font-size: 1.5rem; }
.child { font-size: 0.5rem; }
html { font-size: 16px; }
.wrapper { font-size: 12px; }
.parent { font-size: 1.5rem; }
.child { font-size: 0.5rem; }
html { font-size: 100%; }
.wrapper { font-size: 12px; }
.parent { font-size: 1.5rem; }
.child { font-size: 0.5rem; }
Helvetica 32px/32px
“The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
Helvetica 32px/96px
“The Guide says that the best drink in existence is the Pan
Galactic Gargle Blaster. It says that the effect of a Pan Galactic
Gargle Blaster is like having your brains smashed out by a slice
of lemon wrapped round a large gold brick.”
Helvetica 32px/48px
“The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
Bembo 32px/48px
“The Guide says that the best drink in existence is the Pan Galactic
Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is
like having your brains smashed out by a slice of lemon wrapped
round a large gold brick.”
Caslon 32px/48px
“The Guide says that the best drink in existence is the Pan
Galactic Gargle Blaster. It says that the effect of a Pan
Galactic Gargle Blaster is like having your brains smashed
out by a slice of lemon wrapped round a large gold brick.”
9 reasons why cats will conquer the world. The number 5 will surprise you!
“More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.”
9 reasons why cats will conquer the world. The number 5 will surprise you!
“More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.”
/* baseline = 24px */
body { font-size: 16px; line-height: 24px; /* baseline */ }
.article-title { font-size: 32px; line-height: 48px; /* 2 × baseline */ }
.article-excerpt { font-size: 18px; line-height: 24px; /* baseline */ }
img { max-height: 312px; /* 13 × baseline */ }
p { margin-bottom: 12px; /* 0.5 × baseline */ }
// _variables.scss
$base-font-size: 16px; $baseline: 24px;
// On your project:
body { font-size: $base-font-size; line-height: ($baseline/$base-font-size); // 1.5 }
.article-title { font-size: 2*$base-font-size; line-height: 2*$baseline; }
.article-excerpt { font-size: 18px; line-height: $baseline; }
img { max-height: 13*$baseline; }
p { margin-bottom: 0.5*$baseline; }
More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.
More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.
.post p { text-indent: 2em; }
More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.
.post p { text-indent: 2em; }
.post p:first-of-type { text-indent: 0; }
More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.
.post p + p { text-indent: 2em; }
blockquote { margin: 2em 6em; font-size: 24px; line-height: 1.5; font-style: italic; position: relative; }
blockquote:before { content: "“"; position: absolute; left: -.75em; top: 0; font-size: 2.66em; line-height: 1; }
blockquote .author { font-size: .75em; line-height: 1.77; }
.my-class { font-variant-caps: small-caps; -moz-font-feature-settings: "smcp"; -ms-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp"; }
33+ 4+ 10+
Hinting is a manual work of tweaking sub-pixels to maintain a font’s identity and legibility on screen.
OS + Browser Hinting and AA
Win XP — IE6–8 GDI Grayscale
Win XP — IE6–8 ClearType GCI ClearType
IE9+ DirectWrite
Win XP Chrome GDI ClearType
Win XP Firefox GDI ClearType
Win 7+ Chrome 37+ DirectWrite
Win 7+ Firefox Depends?
OS X CoreText, ignores hinting
* Based on a lot of Google searches, might not be accurate
The quick brown fox jumps over the lazy dog.Bembo — based in engravings from 1495, renaissance style, readable in small font sizes.
The quick brown fox jumps over the lazy dog.Helvetica — Symbol of the Modern Design, is readable, international and neutral.
The quick brown fox jumps over the lazy dog.
Museo — The modern, geometric shapes and the rounded, slab serifs give a strong personality to this type.
Further reading: The Elements of Typographic Style Robert Bringhurst EN: http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326 PT-BR: http://editora.cosacnaify.com.br/ObraSinopse/11584/Elementos-do-estilo-tipogr%C3%A1fico---vers%C3%A3o-30.aspx
Thinking with Type Ellen Lupton EN: http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695 PT-BR: http://editora.cosacnaify.com.br/ObraSinopse/1875/Pensar-com-tipos---2%C2%BA-edi%C3%A7%C3%A3o-%28Previs%C3%A3o-de-envio-a-partir-de-200415%29.aspx
Type on Screen Ellen Lupton EN: http://www.amazon.com/Type-Screen-Critical-Designers-Developers/dp/161689170X
On Web Typography Jason Santa Maria EN: http://abookapart.com/products/on-web-typography
Type and Typography Baines & Haslam EN: http://www.amazon.co.uk/Type-Typography-Portfolio-Phil-Baines/dp/1856694372
Thanks! twitter.com/shiota github.com/eshiota slideshare.net/eshiota [email protected]