SlideShare a Scribd company logo
Dominating the
Web Typography
Eduardo Shiota Yasuda — @shiota Conferência CSS Brasil
Hello!
twitter.com/shiota
github.com/eshiota
slideshare.net/eshiota
contato@eshiota.com
Dominating the Web Typography
I Typography
Typography is everywhere.
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
We gotta remember the
roots of what we do.
15.000 BC – 12.500 BC
Altamira & Lascaux
3.000 BC – 1.500 BC
Pictographs
1.500 BC
Phoenician alphabet
750 BC
Greek alphabet
146 BC
Roman alphabet, “Capitalis quadrata”
0
Better materials, “Capitalis rustica”
4th – 5th centuries
Uncials and semi-uncials
8th century
Carolingian minuscules
12th century
Apex of goth art and Middle Ages
15th – 16th centuries
Renaissance, Gutenberg press, “Cursiva humanista”, type foundries
19th century
Industrial Revolution, linotype, Art Nouveau, display types
20th century
Modern Design, Avant-garde, Bauhaus, sans-serif types, digital typography
21th century
Web typography and CSS
The basics
Basics
Classification
Most of the classification
systems agree with these
type categories:
Serif types
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.
Sans serif types
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.
Gothic types
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.
Cursive types
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.
Display types
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.
Dingbats
Bodoni Ornaments
The quick brown fox jumps
over the lazy dog.
Travel Icons
The quick brown fox jumps
over the lazy dog.
Wingdings
The quick brown fox jumps
over the lazy dog.
On the CSS, you may
choose generic families
as fallbacks.
.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;
}
Basics
Anatomy of a type
Dominating the Web Typography
baseline
font size
Typography
baseline
descender height
x-height
cap height
ascender height
Typography
T
y
p
o
g
r
a
p
h
y
Basics
Units
Physical units
To deal with physical units,
you can’t rely on a screen.
pt picas millimetres inches
12 1 4.22 1/6
A4 (29.7cm × 21.0cm)
Pixel (px)
To deal with screens, you must
understand what are physical
and reference pixels.
A physical pixel is a physical
point on the display.
Dominating the Web Typography
A reference pixel depends
on the device, software and
user settings.
Dominating the Web Typography
A 16px font on a
smartphone screen won’t
have as many millimetres as
on a desktop screen.
Dominating the Web Typography
Change, test, use media
queries, test again.
em unit (em)
“em” is a relative unit used
since the movable types.
It represents a type’s
full body size.
1 em
16px
1 em
margin-right: 1em;
16px
It’s always relative to its
context’s font size.
.wrapper {
font-size: 16px;
}
.parent {
font-size: 1.5em;
}
.child {
font-size: .5em;
}
Root em unit (rem)
“rem” is like “em” but always
relative to the root (html).
html {
font-size: 16px;
}
.wrapper {
font-size: 12px;
}
.parent {
font-size: 1.5rem;
}
.child {
font-size: 0.5rem;
}
For most of browsers and
cases, the default root
font size is 16px.
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;
}
Rhythm
The way you space your
characters and text dictates
how a person will read it.
Rhythm
Line height
Line height is the distance
between each line of types.
The quick fox jumps
over the dog 0 pixels
Meta Serif 102px/102px
The quick fox jumps
over the dog
Meta Serif 102px/144px
42 pixels
A low line height makes the
text too difficult to read.
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.”
A large line height makes the
paragraph loose cohesion.
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.”
Find a comfortable proportion
through trial-and-error.
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.”
Each typeface might require a
different line height setting.
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.”
Rhythm
Baseline
Use a consistent vertical
proportion by following
a baseline.
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.”
Choose a line height for a
baseline, and make all
vertical values derive from it.
/* 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 */
}
If you pre-process your CSS,
you ensure a consistent
typography using variables.
// _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;
}
Be aware that each browser
has its own baseline.
Rhythm
Letter spacing/tracking
Letter spacing is the
whitespace between
each single type.
Typography
Typography
letter-spacing: 10px;
Typography
letter-spacing: -10px;
The use of letter-spacing is
recommended for titles only.
Epic Movie Title
Epic Movie Title
Rhythm
Kerning
Kerning is a fine-tuning
between specific pairs
of characters.
Dominating the Web Typography
Task
The browser default is
automatically
enabling/disabling it.
Dominating the Web Typography
.kerning {
font-kerning: normal;
}
32+ 34+ 7+ 10+
Rhythm
Text indentation
You can manipulate the
text’s indentation, which
applies to its first line.
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;
}
For long texts, you can
skip the indentation on
the first paragraph.
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;
}
Text styling
You can use CSS rules to
properly style your content,
like a well-authored book.
Styling
Titles & subtitles
Keep a clear hierarchy by
using different font sizes,
type faces and variants.
Dominating the Web Typography
Styling
Quotes
A quote block can be
highlighted with margins
and pseudo-elements.
Dominating the Web Typography
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;
}
Styling
Elevated caps
Explore CSS selectors to style
specific parts of the text.
.post p:first-of-type:first-letter {
font-size: 4.5em;
}
Styling
OpenType
OpenType fonts provide
features to control and tweak
the styles of your text.
Dominating the Web Typography
.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+
Dominating the Web Typography
Dominating the Web Typography
Composition
Composition
Grids and column sizes
The text should have
an ideal line length.
Dominating the Web Typography
A line should have between
60 and 70 characters.
Dominating the Web Typography
.post {
width: 744px;
margin: 0 auto;
}
Dominating the Web Typography
The column size should
respond to font size changes.
Dominating the Web Typography
The use of em-based column
width might solve the problem.
Dominating the Web Typography
Dominating the Web Typography
.post {
width: 31em;
margin: 0 auto;
}
Rendering
Rendering
Anti-aliasing and hinting
Font shapes are vectors
that are rasterised to be
displayed on pixels.
Hinting is a manual work
of tweaking sub-pixels to
maintain a font’s identity
and legibility on screen.
Dominating the Web Typography
Dominating the Web Typography
Anti-aliasing is an algorithm
used to smooth edges.
Each OS and browsers have a
different anti-aliasing and
hinting setting.
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
Test. On. Every. Browser.
Dominating the Web Typography
Choosing
Choosing
Sources
Choose a reliable source
for your font.
Dominating the Web Typography
The font must have a
proper unicode table,
kerning, hinting etc.
Also check for language
support, webfont license,
OpenType features.
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Dominating the Web Typography
Fonts are expensive
for a reason.
Choosing
Personalities
Each typeface has a story
and a personality, choose
one that match yours.
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.
Serifs have a refined look,
need less line height values,
and help maintaining a
cohesive text.
Dominating the Web Typography
Sans serifs have a modern
look, and increased
legibility on screens.
Dominating the Web Typography
Start simple, with a
readable body typeface.
Then format titles and
subtitles using different
weights and styles.
Choose a second typeface
for titles if needed. Avoid
going further than that.
Dominating the Web Typography
Choosing
Performance
Each font size is extra data
that must be downloaded.
Dominating the Web Typography
Measure the impact of
each added typeface.
Dominating the Web Typography
You’ll have to choose between
speed and non-FOUC.
Avoid loading custom typefaces
on mobile devices.
I Typography
We’ve only scratched
the surface.
We are the craftspeople
of the web.
Dominating the Web Typography
We should keep our
roots in place.
Dominating the Web Typography
Dominating the Web Typography
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
contato@eshiota.com

More Related Content

Viewers also liked

Front-end Culture @ Booking.com
Front-end Culture @ Booking.comFront-end Culture @ Booking.com
Front-end Culture @ Booking.com
Eduardo Shiota Yasuda
 
Web Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserWeb Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browser
Eduardo Shiota Yasuda
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
Bunee.io - Hiring with Intelligence
 
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a websiteInternationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Eduardo Shiota Yasuda
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
Sara Cannon
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Diego Eis
 
Better Typography
Better TypographyBetter Typography
Better Typography
markboultondesign
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
Eduardo Shiota Yasuda
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
Steve Hickey
 
Basics of Typography
Basics of TypographyBasics of Typography
Basics of Typography
Anutosh Deb
 
It's all about typography
It's all about typographyIt's all about typography
It's all about typography
Interactive Communications
 
Typography ppt
Typography pptTypography ppt
Typography ppt
ArtfulArtsyAmy
 
5 Reasons Typography is Powerful
5 Reasons Typography is Powerful5 Reasons Typography is Powerful
5 Reasons Typography is Powerful
Big Fish Presentations
 
Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1
Jennifer Janviere
 
Typography: The Backbone of Your Website
Typography: The Backbone of Your WebsiteTypography: The Backbone of Your Website
Typography: The Backbone of Your Website
Alison Chandler
 

Viewers also liked (15)

Front-end Culture @ Booking.com
Front-end Culture @ Booking.comFront-end Culture @ Booking.com
Front-end Culture @ Booking.com
 
Web Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserWeb Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browser
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
 
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a websiteInternationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
Better Typography
Better TypographyBetter Typography
Better Typography
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
 
Basics of Typography
Basics of TypographyBasics of Typography
Basics of Typography
 
It's all about typography
It's all about typographyIt's all about typography
It's all about typography
 
Typography ppt
Typography pptTypography ppt
Typography ppt
 
5 Reasons Typography is Powerful
5 Reasons Typography is Powerful5 Reasons Typography is Powerful
5 Reasons Typography is Powerful
 
Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1
 
Typography: The Backbone of Your Website
Typography: The Backbone of Your WebsiteTypography: The Backbone of Your Website
Typography: The Backbone of Your Website
 

Similar to Dominating the Web Typography

Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
Danny Calders
 
Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...
Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...
Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...
Ladonna Mayer
 
Fun Astronaut Wall Posters
Fun Astronaut Wall PostersFun Astronaut Wall Posters
Fun Astronaut Wall Posters
Save Time Gigs
 
TypeScript Go(es) Embedded
TypeScript Go(es) EmbeddedTypeScript Go(es) Embedded
TypeScript Go(es) Embedded
Christoph Engelbert
 
Develop in a Better Way!
Develop in a Better Way!Develop in a Better Way!
Develop in a Better Way!
Kalaiarasan Jayaraman
 
Life of P FITC & CreateUpstate
Life of P FITC & CreateUpstateLife of P FITC & CreateUpstate
Life of P FITC & CreateUpstate
Jason Pamental
 
The Life of <p>
The Life of <p>The Life of <p>
The Life of <p>
FITC
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
Sara Cannon
 
Old Dog, New Tricks
Old Dog, New TricksOld Dog, New Tricks
Old Dog, New Tricks
Simon Collison
 
(Web ) Typography
(Web ) Typography(Web ) Typography
(Web ) Typography
Gerrit van Aaken
 
Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)
Peter Wang
 
Blending MongoDB and RDBMS for ecommerce
Blending MongoDB and RDBMS for ecommerceBlending MongoDB and RDBMS for ecommerce
Blending MongoDB and RDBMS for ecommerce
Steven Francia
 
Typography for the Web - 5 things to think about
Typography for the Web - 5 things to think aboutTypography for the Web - 5 things to think about
Typography for the Web - 5 things to think about
Chad Carstensen
 
High Performance Applications with MongoDB
High Performance Applications with MongoDBHigh Performance Applications with MongoDB
High Performance Applications with MongoDB
MongoDB
 
The Future Of Responsive Design Standards
The Future Of Responsive Design StandardsThe Future Of Responsive Design Standards
The Future Of Responsive Design Standards
Den Odell
 
The Future Of Responsive Design Standards (Den Odell)
The Future Of Responsive Design Standards (Den Odell)The Future Of Responsive Design Standards (Den Odell)
The Future Of Responsive Design Standards (Den Odell)
Future Insights
 
Augmenting RDBMS with MongoDB for ecommerce
Augmenting RDBMS with MongoDB for ecommerceAugmenting RDBMS with MongoDB for ecommerce
Augmenting RDBMS with MongoDB for ecommerce
Steven Francia
 
Design Basics for Non-Designers
Design Basics for Non-DesignersDesign Basics for Non-Designers
Design Basics for Non-Designers
Mel Choyce
 
Tecnicas avanzadas con CSS3
Tecnicas avanzadas con CSS3Tecnicas avanzadas con CSS3
Tecnicas avanzadas con CSS3
Marta Armada
 
Citizen Journalism Track
Citizen Journalism TrackCitizen Journalism Track
Citizen Journalism Track
Mite Kuzevski
 

Similar to Dominating the Web Typography (20)

Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...
Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...
Essay Eagle Bird. Essay on eagle // 10 line on eagle // essay writing on eagl...
 
Fun Astronaut Wall Posters
Fun Astronaut Wall PostersFun Astronaut Wall Posters
Fun Astronaut Wall Posters
 
TypeScript Go(es) Embedded
TypeScript Go(es) EmbeddedTypeScript Go(es) Embedded
TypeScript Go(es) Embedded
 
Develop in a Better Way!
Develop in a Better Way!Develop in a Better Way!
Develop in a Better Way!
 
Life of P FITC & CreateUpstate
Life of P FITC & CreateUpstateLife of P FITC & CreateUpstate
Life of P FITC & CreateUpstate
 
The Life of <p>
The Life of <p>The Life of <p>
The Life of <p>
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
Old Dog, New Tricks
Old Dog, New TricksOld Dog, New Tricks
Old Dog, New Tricks
 
(Web ) Typography
(Web ) Typography(Web ) Typography
(Web ) Typography
 
Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)
 
Blending MongoDB and RDBMS for ecommerce
Blending MongoDB and RDBMS for ecommerceBlending MongoDB and RDBMS for ecommerce
Blending MongoDB and RDBMS for ecommerce
 
Typography for the Web - 5 things to think about
Typography for the Web - 5 things to think aboutTypography for the Web - 5 things to think about
Typography for the Web - 5 things to think about
 
High Performance Applications with MongoDB
High Performance Applications with MongoDBHigh Performance Applications with MongoDB
High Performance Applications with MongoDB
 
The Future Of Responsive Design Standards
The Future Of Responsive Design StandardsThe Future Of Responsive Design Standards
The Future Of Responsive Design Standards
 
The Future Of Responsive Design Standards (Den Odell)
The Future Of Responsive Design Standards (Den Odell)The Future Of Responsive Design Standards (Den Odell)
The Future Of Responsive Design Standards (Den Odell)
 
Augmenting RDBMS with MongoDB for ecommerce
Augmenting RDBMS with MongoDB for ecommerceAugmenting RDBMS with MongoDB for ecommerce
Augmenting RDBMS with MongoDB for ecommerce
 
Design Basics for Non-Designers
Design Basics for Non-DesignersDesign Basics for Non-Designers
Design Basics for Non-Designers
 
Tecnicas avanzadas con CSS3
Tecnicas avanzadas con CSS3Tecnicas avanzadas con CSS3
Tecnicas avanzadas con CSS3
 
Citizen Journalism Track
Citizen Journalism TrackCitizen Journalism Track
Citizen Journalism Track
 

More from Eduardo Shiota Yasuda

The anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia WorkshopThe anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia Workshop
Eduardo Shiota Yasuda
 
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio APIRetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
Eduardo Shiota Yasuda
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
Eduardo Shiota Yasuda
 
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Eduardo Shiota Yasuda
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
Eduardo Shiota Yasuda
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Eduardo Shiota Yasuda
 
User Experience para Developers
User Experience para DevelopersUser Experience para Developers
User Experience para Developers
Eduardo Shiota Yasuda
 
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire JapanSushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Eduardo Shiota Yasuda
 
O Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoO Design e a Interface no mundo da Programação
O Design e a Interface no mundo da Programação
Eduardo Shiota Yasuda
 

More from Eduardo Shiota Yasuda (10)

The anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia WorkshopThe anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia Workshop
 
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio APIRetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 
User Experience para Developers
User Experience para DevelopersUser Experience para Developers
User Experience para Developers
 
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire JapanSushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
 
O Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoO Design e a Interface no mundo da Programação
O Design e a Interface no mundo da Programação
 

Recently uploaded

20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
MojtabaMeghdari
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
vsingram
 
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
sheetal singh$A17
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
sonalibook860
 
Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...
Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...
Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...
sonalibook860
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 
Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
Mostafa Abd Elrahman
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
Building Accessibility into your Design Systems
Building Accessibility into your Design SystemsBuilding Accessibility into your Design Systems
Building Accessibility into your Design Systems
Resolute
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
TeeFusion
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
sonalibook860
 
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
ailynolive
 
AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
Shayestha Fathima
 
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptxHow to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
Anit Kapoor
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
rawankhanlove256
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
Hemant Nagwekar
 

Recently uploaded (20)

20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
 
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...
Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...
Indore Girls Call Indore 0X0000000X Payment On Delevery Cash Hot Premium Genu...
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 
Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
Building Accessibility into your Design Systems
Building Accessibility into your Design SystemsBuilding Accessibility into your Design Systems
Building Accessibility into your Design Systems
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
 
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptxHow to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
 

Dominating the Web Typography