SlideShare a Scribd company logo
1 of 124
Download to read offline
Designing
for Words
Elements of Typographic Style for the Web
Luke Murphy-Wearmouth @lurkmoophy
I am not an expert.
I am an enthusiast.
leave the road
when you wish.
break the rules,
break them 

beautifully, deliberately 

and well.
The sections:
1. An Introduction to Type
2. Choosing the Right Tool
3. Typesetting for the Web
4. Typesetting for RWD
An Introduction
to Type
Typeface vs Font
1. Typeface — the overall design of a collection

Helvetica is a typeface
Typeface vs Font
1. Typeface — the overall design of a collection

Helvetica is a typeface
2. Font — The physical embodiment of a collection of
letters, numbers, symbols etc.

Helvetica Bold is a font
Typeface vs Font
!
font is what you use
Typeface is what you see
Typesetting
1. Typesetting is the composition of text by means of
arranging physical types or the digital equivalents.
Anatomy of a character
1. x-height — the space between the baseline and the
mean line. The height of a lowercase x.
xbaseline
meanline
Anatomy of a character
1. x-height — the space between the baseline and the
mean line. The height of a lowercase x.
2. ascenders and descenders — the tops and bottoms of
letters like b, d, j, q
b
ascender
qdescender
Anatomy of a character
1. x-height — the space between the baseline and the
mean line. The height of a lowercase x.
2. ascenders and descenders — the tops and bottoms of
letters like b, d, j, q
3. cap-height — height of a capital letter
H
cap-height
Anatomy of a character
4. counter — the open space within a letter, both partially
closed (c) and closed (o)
dcounter
Anatomy of a character
4. counter — the open space within a letter, both partially
closed (c) and closed (o)
5. serif — a little stroke found at the end of main vertical
and horizontal strokes of some letterforms
d
serif
serif
Kerning
1. adjusting the space between characters in a
proportional font to achieve a visually pleasing result
War
War
Leading
1. The space between baselines
Choosing
the Right Tool
A type that stops you
in the middle of a sentence
and asks you to admire its
smartness is a bad type
“
Legibility
& Beauty
The way we read
rodscones
rodscones
process detail
register sharpness
detect movement
sensitive in low light
rodscones
process detail
register sharpness
foveal
foveal parafoveal
foveal parafoveal peripheral
this is a sentence made of words
saccade
this is a sentence made of words
fixation point
The morning had dawned clear and cold, with a crispness that hinted at the end of
summer. They set forth at daybreak to see a man beheaded, twenty in all, and Bran
rode among them, nervous with excitement. This was the first time he had been
deemed old enough to go with his lord father and his brothers to see the king's
justice done. It was the ninth year of summer, and the seventh of Bran's life.
!
The man had been taken outside a small holdfast in the hills. Robb thought he was a
wildling, his sword sworn to Mance Rayder, the King-beyond-the-Wall. It made
Bran's skin prickle to think of it. He remembered the hearth tales Old Nan told
them. The wildlings were cruel men, she said, slavers and slayers and thieves. They
consorted with giants and ghouls, stole girl children in the dead of night, and drank
blood from polished horns. And their women lay with the Others in the Long Night
to sire terrible half-human children.
Testing
1. greater understanding > speed
the Rules
1. Read the text before designing it
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
4. Honour and elucidate the character of the text
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
4. Honour and elucidate the character of the text
5. Shape the page
the Rules
1. Read the text before designing it
2. Work out the inner logic of the text
3. Consider the other elements
4. Honour and elucidate the character of the text
5. Shape the page
6. Give full attention to incidental details
Learn the basics
of identification
3 contexts
1. Technical
What was the
original intended use?
Special effects
Consider usage
Licensing
3 contexts
1. Technical
2. Thematic
Suit the task
as well as the subject
3 contexts
1. Technical
2. Thematic
3. Historical
the natural idiom
Echos
& associations
Webfonts
1. Rendering
Type Rendering Mix
typerendering.com
Webfonts
1. Rendering
2. FOUT
http://help.typekit.com/customer/portal/articles/6853-styling-fallback-fonts-using-font-events
!
http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/
Typesetting for
the Web
Modular scale
Use ems not pt
1. EU law
Use ems not pt
1. EU law
2. It keeps everything relative and scalable
Use ems not pt
1. EU law
2. It keeps everything relative and scalable
3. ems vs rems
Choosing your scale
!
0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5
http://www.type-scale.com.com/
Choosing your scale
!
0.75 0.83 1 1.1667 1.333 1.5 1.75 2 3 4 5
p h4 h3 h2 h1
Choosing your scale
!
body {
font-size: 16px;
}
!
p {
font-size: 1em;
}
!
h1 {
font-size: 3em;
}
Margins
1. Lock the text block
Margins
1. Lock the text block
2. Frame the text block
Margins
1. Lock the text block
2. Frame the text block
3. Protect the text block
Margins
!
Rule of thumb: 5% either way
Margins
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
}
Measure
1. Ideal line length is 45-75 characters
http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
Measure
1. Ideal line length is 45-75 characters
2. Dependent on the font, alignment etc.
Measure
1. Ideal line length is 45-75 characters
2. Dependent on the font, alignment etc.
3. Use ems not pxs/percentages
Measure
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
}
Letterspacing
1. Don’t letterspace lowercase letters without a reason
Letterspacing
1. Don’t letterspace lowercase letters without a reason
2. Letterspace strings of capitals, small caps and 

strings of digits
letter-spacing:
1. You can use positive and negative values
2. It’s animatable
3. Sub-pixel values aren’t cross-browser
letter-spacing:
!
h1 {
font-size: 3em;
letter-spacing: 1em;
}
!
.string-of-digits {
letter-spacing: 0.05em;
}
letter-spacing:
!
$( document ).ready( function() {

var rex = new RegExp( "([0-9]{3,})", “gm" );

$( “*” ).each( function(){

    var $this = $( this );

    var content = $this.html();

   $this.html( content.replace( rex, “<span class=

“string-of-digits”>$1</span>” ) );

});

});

Leading
1. Music is the space between notes
Leading
1. Music is the space between notes
2. It’s about vertical rhythm and feel
Leading
1. Music is the space between notes
2. It’s about vertical rhythm and feel
3. My rule of thumb: 140%
Leading
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
}
Kerning
1. Kern consistently or not at all
2. It’s more about font choice than technical solutions
text-rendering:
1. auto
text-rendering:
1. auto
2. optimizeSpeed
text-rendering:
1. auto
2. optimizeSpeed
3. optimizeLegibility
text-rendering:
1. auto
2. optimizeSpeed
3. optimizeLegibility
4. geometricPrecision
text-rendering:
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
/*probably not a good idea yet */
text-rendering: optimizeLegibility
}
Kerning
1. Kern consistently or not at all
2. It’s more about font choice than technical solutions
3. kerning.js (if you’re a control freak)
#pixel-perfect {
-letter-kern: 1px 1px 0 0 0
  1px 0 2px 0 0
  0 0 0;
}
!
Vertical space and rhythm
1. Tempo should not change arbitrarily in music
Vertical space and rhythm
1. Tempo should not change arbitrarily in music
2. Even multiples of the basic leading
Vertical space and rhythm
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto;
max-width: 33em;
line-height: 1.4em;
margin-bottom: 0.7em;
}
Vertical space and rhythm
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em;
}
Vertical space and rhythm
1. Tempo should not change arbitrarily in music
2. Even multiples of the basic leading
3. Don’t interrupt the rhythm of the page
Vertical space and rhythm
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em;
hanging-punctuation: first;
}
Vertical space and rhythm
!
blockquote p, .hanging-punctuation {
text-indent: -0.5em;
}
Vertical space and rhythm
!
ul, ol {
padding-left: 0;
overflow: visible;
}
Types of dashes
1. Pedantry at its finest
Types of dashes
!
subtraction sign/hyphen -
en dash – &ndash;
em dash — &mdash;
http://en.wikipedia.org/wiki/Dash
Types of dashes
1. Pedantry at its finest
2. Use an en dashes with space either side in copy, 

or a close set em dash
Types of dashes
1. Pedantry at its finest
2. Use an en dashes with space either side in copy, 

or a close set em dash
3. Use a close set en dash for ranges
Hyphenation
1. Leave at least two characters behind
2. Take at least three forward
3. Avoid more than three hyphenated lines
4. Hyphenate according to conventions of language
Quotation marks
1. " — straight quotes
2. &lsquo; &rsquo; and &ldquo; &rdquo;
Quotation marks
!
str = str.replace(/"(?=w|$)/g, "&#8220;"); 

str = str.replace(/(?<=w|^)"/g, "&#8221;"); 

str = str.replace(/(?<=[w,.?!)]|^)"/g, "&#8221;");
Columns
1. Now possible with CSS3 and column-count:
Columns
!
p {
font-size: 1em;
width: 90%;
margin: 0 auto 0.7em auto;
max-width: 33em;
line-height: 1.4em;
column-count: 3;
column-gap: 1.4em;
-moz-column-count: 3;
-moz-column-gap: 1.4em;
-webkit-column-count: 3;
-webkit-column-gap: 1.4em;
}
Columns
1. Now possible with CSS3 and column-count:
2. A word of caution…
Rivers
1. Still manual
Widows & orphans
1. Widows still manual, using &nbsp;
Widows & orphans
1. Widows still manual, using &nbsp;
2. There are other solutions, but they come with a price
https://github.com/matthewlein/jQuery-widowFix
Widows & orphans
1. Widows still manual, using &nbsp;
2. There are other solutions, but they come with a price
3. Orphans apparently sorted by the column algorithm
Widows & orphans
1. Widows still manual, using &nbsp;
2. There are other solutions, but they come with a price
3. Orphans apparently sorted by the column algorithm
4. Don’t forget print
Widows & orphans
!
@media print {
p {
orphans: 3;
}
}
Typesetting
and Responsive Web Design
The things that
don’t matter
!
(don’t hit me)
Aim for consistency
in quality
The things that
do matter
Typographic scale
http://typecast.com/blog/a-more-modern-scale-for-web-typography
Context
http://alistapart.com/column/responsive-typography-is-a-physical-discipline
The rabbit hole
colophon
!
The body text was set in Minion Pro Medium, Medium
Italic, Semibold and Semibold Italic
!
The code text was set in Lucida Console Regular.
Designing
for Words
Elements of Typographic Style for the Web
Luke Murphy-Wearmouth @lurkmoophy

More Related Content

Similar to Designing for words: elements of typography style for the web

Chapter 2 : TEXT
Chapter 2 : TEXTChapter 2 : TEXT
Chapter 2 : TEXT
azira96
 
Use of APA style in academic writing for Avoiding plagiarism_03102020.PPTX
Use of APA style in  academic writing for Avoiding plagiarism_03102020.PPTXUse of APA style in  academic writing for Avoiding plagiarism_03102020.PPTX
Use of APA style in academic writing for Avoiding plagiarism_03102020.PPTX
BIDYANATHJHA3
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
Bryan Chung
 
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
prologuitoedic
 

Similar to Designing for words: elements of typography style for the web (20)

Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Chapter 2 : TEXT
Chapter 2 : TEXTChapter 2 : TEXT
Chapter 2 : TEXT
 
Use of APA style in academic writing for Avoiding plagiarism_03102020.PPTX
Use of APA style in  academic writing for Avoiding plagiarism_03102020.PPTXUse of APA style in  academic writing for Avoiding plagiarism_03102020.PPTX
Use of APA style in academic writing for Avoiding plagiarism_03102020.PPTX
 
Typography3 bh
Typography3 bhTypography3 bh
Typography3 bh
 
Text
TextText
Text
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
 
CHAPTER – 3 Text
CHAPTER – 3    TextCHAPTER – 3    Text
CHAPTER – 3 Text
 
10 typeface basics.fi_xed
10 typeface basics.fi_xed10 typeface basics.fi_xed
10 typeface basics.fi_xed
 
HP 211 class 8
HP 211 class 8HP 211 class 8
HP 211 class 8
 
Ewrt 211 class 8
Ewrt 211 class 8Ewrt 211 class 8
Ewrt 211 class 8
 
Natural Language Processing
Natural Language ProcessingNatural Language Processing
Natural Language Processing
 
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs Design
 
Accelerate With Great Design
Accelerate With Great DesignAccelerate With Great Design
Accelerate With Great Design
 
Type standards[1]
Type standards[1]Type standards[1]
Type standards[1]
 
Text
TextText
Text
 
Font new edit
Font new editFont new edit
Font new edit
 
Basics of typography kerning
Basics of typography kerningBasics of typography kerning
Basics of typography kerning
 
Thomson Author Style Guide
Thomson Author Style GuideThomson Author Style Guide
Thomson Author Style Guide
 

Recently uploaded

Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
suhanimunjal27
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 

Recently uploaded (20)

Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 

Designing for words: elements of typography style for the web

Editor's Notes

  1. “If you use this book as a guide, by all means leave the road when you wish. That is precisely the use of a road: to reach individually chosen points of departure.”
  2. “By all means break the rules, and break them beautifully, deliberately and well. That is one of the ends for which they exist” - Bringhurst
  3. similarly spaces shouldn’t jump about on a page
  4. this can be done with lists and punctuation - word processors
  5. unfortunately not supported anywhere yet.
  6. you could also use js and regex to add a span to any hanging punctuation
  7. Fixes that pesky indentation
  8. 66 characters per line doesn’t work on a small screen. That’s because the printed form was never meant to be this small. We have to adapt. This means changing the size and measure when we’re on small screens. Jason Pamental suggests 33-35 characters per line, which I think is a nice space.
  9. We need to start thinking outside of size when it comes to responsive and start thinking about contexts. Did you know that you can target a TV specifically using media queries? Not only is this a size concern, but a consumption concern too. It’s a very different experience reading something from 1 foot away as opposed to 8-10 feet. Also, the way the screen renders text is completely different. This is an area that will come out a lot more in the future.