SlideShare a Scribd company logo
1 of 107
Download to read offline
Clarissa Peterson
@clarissa

Responsive
Typography
In Control - February 18, 2014
v4

MoDev East 2013, CSS Dev Conference 2013
Covered in these slides:
1. Font Size
2. Line Height (Leading)
3. Line Length (Measure)
(those three things work together to make
text look good and easy to read)

4. Hyphenation
Photo credit: Matt Moonlight http://www.flickr.com/photos/matt_moonlight/9173909588/
Why Typography?

Websites are about getting information to people, and that’s mostly done through text.
So you need to make sure that your text is as easy to read as possible.
Media Queries

A website can have as many media queries as you want. Add a media query where something
needs to change - even if it’s a small thing. Don’t think of responsive websites as being made
up of a few separate designs (one-column, two-column, etc.). Think of responsive websites as a
range of changes across all viewport widths. Typography media queries
don’t need to happen at the same breakpoints as layout changes.
Start with HTML

Good web typography starts with HTML, not with CSS.
<h1>Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph</p>

It’s important to use the correct elements. For very old browsers/devices that don’t support CSS,
they’ll still be able to display text using browser defaults. This is also important for accessibility.
Typeface

You need to choose your typefaces before doing layout.
Because typefaces in the same font-size aren’t actually the same size. These are different fonts
in the same size (in pixels). Changing the typeface later will affect your layout.
Pixels

Pixels are inherently unresponsive. Don’t set font sizes in pixels.
Reference pixels aren’t even the same size on every device. This is 320 pixels viewed
on an iPhone and on a laptop screen, held next to each other. http://m.ew.com
Setting Font Size

Two alternatives for font size: ems and rems.You probably know these in the context of converting from
pixels. But it’s also possible (and more responsive) to start with responsive units and not use pixels at all.
html { font-size: 100%; }

Base font size for the page - 100% is the browser’s default font size for body text - what the
browser thinks is a good reading size for that device. It’s not the same for every browser, but
currently most computers/devices use 16 pixels. In the future, that may not be the case. By using
responsive units now, you’re making your site more likely to look good on future devices.
Starting with the browser default base size makes the site more readable for everybody, even if
the text may seem too large to some users (or to the designer). http://alistapart.com
Ems

Ems are linked to the size of type. Originally derived from width of letter M in lead typesetting.
1 em = default
2 em = twice as big
.5 em = half of default

Ems are relative to the font size of the containing element.
p { font-size: 1em; }
h3 { font-size: 1.3em; }
h2 { font-size: 1.5em; }
h1 { font-size: 2em; }

p is the base font size - h1 is twice as big
Responsive Typography
p { font-size: 1em; }
li { font-size: 1.5em; }

Nested elements make ems a little bit tricky.
Responsive Typography
<ul>
<li>List item</li>
<li>List item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>List item</li>
</ul>
Since the <li>s are nested, the sub items are 2.25 (1.5x1.5) instead of 1.5.
li { font-size: 1.5em; }
li li { font-size: 1em; }

Adding this will keep that from happening.
Responsive Typography
Rems

Rems (root ems) are an alternative to ems. Relative to the document’s
root element (the html element), not the parent element.
h1 { font-size: 2rem; }

Same syntax as em.
h1 { font-size: 32px; font-size: 2rem; }

But not all browsers support it; you need fallback in pixels for IE8 and older.
Pixels to ems

Responsive design doesn’t require converting pixels to ems (formulas). Just start with ems.
p { font-size: .45833333333em; }

Converting pixels to ems gets you weird numbers, which are difficult
to use, They can also cause problems with rounding by the browser.
p { font-size: .46; }

And you don’t need so many decimal points.
Line Height (leading)

If lines are too close together/far apart, text is more difficult to read. It’s called leading
because in lead typesetting, they would put pieces of lead between lines to add space.
Leading. Photo by Marcin Wichary: http://www.flickr.com/photos/mwichary/2406450779/
p { line-height: 1 }

For line-height, use unitless numbers, which are relative to the font size of the element. 1 is default.
Default of 1 - lines are close together, it’s hard to focus on one line at a time.
line-height: 2 - the lines are too far apart, so it’s difficult and tiring to read
line-height: 1.4 - good default to start with, but adjust based on typeface, line width, screen size
Small screens need less line height (1.4 on left, 1.3 on right), plus you can fit a little more on screen.
p { line-height: 1.3 }
@media screen and (min-width: 30em) {
p { line-height: 1.4 }
}
@media screen and (min-width: 60em) {
p { line-height: 1.5 }
}

Media queries to increase line height as viewport gets wider.
Line Length (Measure)

Characters per line is one of the most important qualities that makes type readable.
Obvious that super-long lines are hard to read. Difficult for eyes to move from one line to the next.
Lines that are too short interrupt the flow of reading. This makes
it tiring to read because your eyes move back and forth more.
45 - 75 characters

Optimum characters per line for body text such as paragraphs (doesn’t apply to headings, etc.)
Remember: to design around line length, it’s important to select the
typeface first, because they’re different sizes.
74
72
69
69
65
58
65
73
68
67
66

Characters per line vary due to letter size, word length. Try to average 45-75.
Testing Line Length

You should test line length as you’re designing a layout, to stay within the optimal range.
45

75

One easy way to test: count from 45th to 75th character on the first line, and use a span to color it.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>

.testing { color: #f00; }

You can easily turn this on an off in your CSS during designing/testing.
But this is even easier: after my talk at CSS Dev Conference, Chris Coyier made this
bookmarklet that does the same thing — colors the text red between the 45th-75th characters in
any text element. No need to change your HTML or CSS. http://codepen.io/chriscoyier/pen/atebf
Add the bookmarklet to your browser’s bookmarks. Click it, then hover
over the element you want to select — it will be outlined in red...
And click to select that element. The 45th-75th characters will be colored red, and will stay
red as you change the size of the browser window (unless you refresh the page.)
Margins & Font Size

The main methods to adjust line length are changing the margins and changing the font size.
For 320 pixel screen (iPhone), text at base font size fits well in range (very handy!). For smaller
screens, you may need to compromise either font size or line length to make it fit.
article {
margin: 15px 3%;
}

Use narrow margins on small screens to not waste space, but don’t have
margins of zero. The example on the previous slide is 3% margin on each side.
article {
margin: 15px auto;
width: 94%;
}

Using width also gives you margins.
You can use either percentage or margins to set the width of an element.
If you use percentage, the element width will change with the page width.
Using ems means the element width depends on the font size.
Changing the font size changes the width of the element.
On our example page, starting out with a good line length.
Make your browser window wider until you hit the end of the 45-75
range. This is where you will need to add a media query.
Keep a tool like this open in another tab. Once the browser window is at the width where you need a
media query, switch to this tab and easily see that window is now 31 ems. http://mqtest.io/
@media screen and (min-width:31em) {
article { width: 70% }
}

On our example, add a media query at 31 ems to increase left/right margin from 3% to 15%.
This is the page at a width of slightly less than 31 ems.
This is the page at slightly more than 31 ems. The media query has increased the margins.
Again expand the browser window to the end of the 45-75 character range. Now we’re at 40 ems.
@media screen and (min-width:40em) {
article { font-size: 1.1em }
}

Media query to increase font size, from 1 em up to 1.1 em. Larger fonts will look okay
on larger screens. It’s better to include more media queries with small changes in each
one than to use only a few media queries and make dramatic jumps in font size.
This is the page at slightly less than 40 ems.
This is the page at slightly more than 40 ems, with a bigger font size. We changed the font size
on the <article> element, so everything inside it is bigger (both paragraph text and heading).
Alternatively, you could just change the <p> font size and leave the heading the same.
Make your browser window wider again to the end of 45-75 character range.
A media query here changed both the margins and the font size.
Since the font size is larger, and we’re on a wider screen, it would
look better if we increased the line height a bit.
@media screen and (min-width:55em) {
article { font-size: 1.2em }
p { line-height: 1.5 }
}

Add line height to the media query. Only increase the line height for the <p> (paragraph text), not
everything in <article>, because the heading line height doesn’t need to change.
#content { max-width: 63em; }

Eventually the font size is the largest you want to make it, and you want to keep the content
from getting any wider. Use max-width so layout stops expanding for super-wide screens.You can use
max-width on individual columns, or on an element that contains all your content.
Real example, Trent Walton’s site. 45-75 characters highlighted. http://trentwalton.com
body { font-size: 100%; }
.container {
width: 88%;
margin-left: auto;
margin-right: auto;
max-width: 1260px;
}

Starting at the most narrow width, the container is 88% (6% margin on each side).
The font-isze starts at 100% (base font size for the browser).
The site at the most narrow width — the content width is 88%.
As we make the browser window wider, the content is still 88% width.
@media screen and (min-width: 37.5em) {
.container { width: 85%; }
.article .centered p { width: 80%; }
body { font-size: 112.5%; }
}

There’s a media query at 37.5 em, where the content width
changes to 68% (85% × 80%) and the font size increases.
Making the browser window slightly wider, we get content at 68% width and 112.5% font size.
Wider window, still at 68% width and 112.5% font size.
@media screen and (min-width: 50em)
body { font-size: 125%; }
}

At 50 ems, a media query increases the font size.

{
Now we’re up to 125% font size.
Still at 125% font size...
@media screen and (min-width: 64.375em) {
body {font-size: 137.5%;}
}

At 65 ems, a media query increases the font size again, to 137.5%.
Now we’re at a font size of 137.5%.
@media screen and (min-width: 75em) and
(min-height: 31.25em) {
body {font-size: 150%;}
}

At 75 ems, a media query increases the font size, but only if screen is tall enough (so not for
wide laptop screens where the vertical space is taken up with lots of browser toolbars)
Here we’re up to a font-size of 150%. It looks good on a wide screen.
@media screen and (min-width: 106.875em)
and (min-height: 50em) {
body {font-size: 162.5%;}
.container {max-width:1360px;}
}

Using max-width to keep the layout from getting wider.
This site uses max-width instead of min-width for media queries, so I’ll show you
starting from widest screen instead of narrowest screen. http://wearyoubelong.com/
body { font-size: 100%; }
@media screen and (max-width:800px) {
body { font-size:90%; }
}
@media screen and (max-width:680px) {
body { font-size:80%; }
}

Start with 100% font size, then a media query takes it down to 90% at 800 pixels or
narrower, and 80% at 680 or narrower. (Yes, media queries should be in ems.)
This is how it looks at 100% font size.
Narrower window, font-size still 100%.
As the window gets narrower, we’re down to 90%. The media query
changes the font size on the body element, so all of the text gets smaller.
At a width of 680 pixels, the font-size goes down to 80%.
At a narrower screen width, even though the font-size is
80%, the heading/intro text takes up whole screen.
On iPhone it’s even worse. It wouldn’t be a good idea to make this particular typeface
smaller (it would be hard to read), but you could use a media query to change the
typeface on narrow screens. Also, don’t use all caps for long sections of text like this.
Further down the page, the text is 80% of the browser default. It’s pretty small.
I had trouble reading it, and wanted to zoom in on my phone’s screen...
<meta name="viewport"
content="width=device-width; initialscale=1.0; maximum-scale=1.0;">

But they used maximum-scale=1.0, which takes away the ability to zoom. Don’t ever do this.
Also, there’s a lot of wasted space on the right at the end of lines. Hyphenation would help with this.
Hyphenation

You can even out the length of lines by letting long words wrap onto next line.
The left example has no hyphenation, the right has hyphenation. On left, look at second-to-last line, the
words look too spaced out. Hyphenation is most important on small screens, to maximize use of space.
On non-justified text, hyphenation makes the right margin look less ragged.
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

The hyphen property is new, so you need prefixes. Opera and Chrome don’t support
hyphenation at all, but that’s okay. This is an example of progressive enhancement.
Hyphens make the design better for browsers that can support it, but the design is
still perfectly okay for users with browsers that don’t support hyphenation.
@media screen and (min-width:30em) {
p {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}

Hyphens are especially important for narrow screens, but
you can use a media query to remove hyphens for wider viewports.
<html lang=”en-US”>

You have to specify a language (i.e., English). If you leave it out, the browser won’t
hyphenate. If you specify the wrong language, the browser will still add hyphens, but
weird things may happen. Note: you can specify language on elements other than the
<html> element, if you have more than one language on a particular page.
Responsive Typography Resources
The Elements of Typographic Style Applied to the Web – Richard Rutter
http://webtypography.net/toc/
Fluid Type – Trent Walton
http://trentwalton.com/2012/06/19/fluid-type/
Responsive Web Typography – Jason Cranford Teague
http://www.jasonspeaking.com/rwt/#/
Web Typography You Should Do Now – Richard Rutter
http://webtypography.net/talks/sxsw2013/
Prototyping Responsive Typography – Viljami Salminen
http://viljamis.com/blog/2013/prototyping-responsive-typography/
Responsive Web Design and Typography – Danny Calderst
http://www.slideshare.net/dannycalders/typography-responsive-web-design
Clarissa Peterson
@clarissa
clarissapeterson.com

More Related Content

Viewers also liked

Augmented Reality and Education: Learning connected to life - Reloaded
Augmented Reality and Education: Learning connected to life - ReloadedAugmented Reality and Education: Learning connected to life - Reloaded
Augmented Reality and Education: Learning connected to life - ReloadedRaúl Reinoso
 
Skeletal system
Skeletal systemSkeletal system
Skeletal systemcoachhuey
 
Introductory Lecture on photography
Introductory Lecture on photographyIntroductory Lecture on photography
Introductory Lecture on photographyAditya Rao
 
Doctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHPDoctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHPJonathan Wage
 
Quality control circle presentation
Quality control circle presentationQuality control circle presentation
Quality control circle presentationGanesh Murugan
 
Collection and Conveyance of Water
Collection and Conveyance of WaterCollection and Conveyance of Water
Collection and Conveyance of WaterGAURAV. H .TANDON
 
Going Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsGoing Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsJosh Clark
 
fluid, electrolytes, acid base balance
fluid, electrolytes, acid base balancefluid, electrolytes, acid base balance
fluid, electrolytes, acid base balancetwiggypiggy
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to LifeBill Scott
 
Off the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of ThingsOff the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of Thingsfrog
 
Microsoft 2007 Basics
Microsoft 2007 BasicsMicrosoft 2007 Basics
Microsoft 2007 BasicsJulie Van Noy
 
localization of stroke, CVS, stroke, for post graduates
localization of stroke, CVS, stroke,  for post graduates localization of stroke, CVS, stroke,  for post graduates
localization of stroke, CVS, stroke, for post graduates Kurian Joseph
 
Making inferences ppt lesson
Making inferences ppt lessonMaking inferences ppt lesson
Making inferences ppt lessonTeresa Diaz
 
Digital Brief 003 - Market Report Q2 2015
Digital Brief 003 - Market Report Q2 2015Digital Brief 003 - Market Report Q2 2015
Digital Brief 003 - Market Report Q2 2015LUMA Partners
 
Fracking The Social Web - 2014
Fracking The Social Web - 2014Fracking The Social Web - 2014
Fracking The Social Web - 2014John V Willshire
 

Viewers also liked (20)

Augmented Reality and Education: Learning connected to life - Reloaded
Augmented Reality and Education: Learning connected to life - ReloadedAugmented Reality and Education: Learning connected to life - Reloaded
Augmented Reality and Education: Learning connected to life - Reloaded
 
Skeletal system
Skeletal systemSkeletal system
Skeletal system
 
Data science and_analytics_for_ordinary_people_ebook
Data science and_analytics_for_ordinary_people_ebookData science and_analytics_for_ordinary_people_ebook
Data science and_analytics_for_ordinary_people_ebook
 
Introductory Lecture on photography
Introductory Lecture on photographyIntroductory Lecture on photography
Introductory Lecture on photography
 
Doctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHPDoctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHP
 
Quality control circle presentation
Quality control circle presentationQuality control circle presentation
Quality control circle presentation
 
Brand Management Careers
Brand Management CareersBrand Management Careers
Brand Management Careers
 
Antidepressants
Antidepressants Antidepressants
Antidepressants
 
Collection and Conveyance of Water
Collection and Conveyance of WaterCollection and Conveyance of Water
Collection and Conveyance of Water
 
Going Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsGoing Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile Apps
 
fluid, electrolytes, acid base balance
fluid, electrolytes, acid base balancefluid, electrolytes, acid base balance
fluid, electrolytes, acid base balance
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
 
Off the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of ThingsOff the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of Things
 
Microsoft 2007 Basics
Microsoft 2007 BasicsMicrosoft 2007 Basics
Microsoft 2007 Basics
 
How to do lean planning
How to do lean planningHow to do lean planning
How to do lean planning
 
localization of stroke, CVS, stroke, for post graduates
localization of stroke, CVS, stroke,  for post graduates localization of stroke, CVS, stroke,  for post graduates
localization of stroke, CVS, stroke, for post graduates
 
Employee Discipline and Grievance Handling
Employee Discipline and Grievance HandlingEmployee Discipline and Grievance Handling
Employee Discipline and Grievance Handling
 
Making inferences ppt lesson
Making inferences ppt lessonMaking inferences ppt lesson
Making inferences ppt lesson
 
Digital Brief 003 - Market Report Q2 2015
Digital Brief 003 - Market Report Q2 2015Digital Brief 003 - Market Report Q2 2015
Digital Brief 003 - Market Report Q2 2015
 
Fracking The Social Web - 2014
Fracking The Social Web - 2014Fracking The Social Web - 2014
Fracking The Social Web - 2014
 

More from Clarissa Peterson

Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive WebsitesClarissa Peterson
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real WorldClarissa Peterson
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignClarissa Peterson
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & HellClarissa Peterson
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 

More from Clarissa Peterson (20)

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 

Recently uploaded

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Recently uploaded (18)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

Responsive Typography

  • 1. Clarissa Peterson @clarissa Responsive Typography In Control - February 18, 2014 v4 MoDev East 2013, CSS Dev Conference 2013
  • 2. Covered in these slides: 1. Font Size 2. Line Height (Leading) 3. Line Length (Measure) (those three things work together to make text look good and easy to read) 4. Hyphenation
  • 3. Photo credit: Matt Moonlight http://www.flickr.com/photos/matt_moonlight/9173909588/
  • 4. Why Typography? Websites are about getting information to people, and that’s mostly done through text. So you need to make sure that your text is as easy to read as possible.
  • 5. Media Queries A website can have as many media queries as you want. Add a media query where something needs to change - even if it’s a small thing. Don’t think of responsive websites as being made up of a few separate designs (one-column, two-column, etc.). Think of responsive websites as a range of changes across all viewport widths. Typography media queries don’t need to happen at the same breakpoints as layout changes.
  • 6. Start with HTML Good web typography starts with HTML, not with CSS.
  • 7. <h1>Heading</h1> <h2>Subheading</h2> <p>This is a paragraph</p> It’s important to use the correct elements. For very old browsers/devices that don’t support CSS, they’ll still be able to display text using browser defaults. This is also important for accessibility.
  • 8. Typeface You need to choose your typefaces before doing layout.
  • 9. Because typefaces in the same font-size aren’t actually the same size. These are different fonts in the same size (in pixels). Changing the typeface later will affect your layout.
  • 10. Pixels Pixels are inherently unresponsive. Don’t set font sizes in pixels.
  • 11. Reference pixels aren’t even the same size on every device. This is 320 pixels viewed on an iPhone and on a laptop screen, held next to each other. http://m.ew.com
  • 12. Setting Font Size Two alternatives for font size: ems and rems.You probably know these in the context of converting from pixels. But it’s also possible (and more responsive) to start with responsive units and not use pixels at all.
  • 13. html { font-size: 100%; } Base font size for the page - 100% is the browser’s default font size for body text - what the browser thinks is a good reading size for that device. It’s not the same for every browser, but currently most computers/devices use 16 pixels. In the future, that may not be the case. By using responsive units now, you’re making your site more likely to look good on future devices.
  • 14. Starting with the browser default base size makes the site more readable for everybody, even if the text may seem too large to some users (or to the designer). http://alistapart.com
  • 15. Ems Ems are linked to the size of type. Originally derived from width of letter M in lead typesetting.
  • 16. 1 em = default 2 em = twice as big .5 em = half of default Ems are relative to the font size of the containing element.
  • 17. p { font-size: 1em; } h3 { font-size: 1.3em; } h2 { font-size: 1.5em; } h1 { font-size: 2em; } p is the base font size - h1 is twice as big
  • 19. p { font-size: 1em; } li { font-size: 1.5em; } Nested elements make ems a little bit tricky.
  • 21. <ul> <li>List item</li> <li>List item <ul> <li>Sub item</li> <li>Sub item</li> </ul> </li> <li>List item</li> </ul>
  • 22. Since the <li>s are nested, the sub items are 2.25 (1.5x1.5) instead of 1.5.
  • 23. li { font-size: 1.5em; } li li { font-size: 1em; } Adding this will keep that from happening.
  • 25. Rems Rems (root ems) are an alternative to ems. Relative to the document’s root element (the html element), not the parent element.
  • 26. h1 { font-size: 2rem; } Same syntax as em.
  • 27. h1 { font-size: 32px; font-size: 2rem; } But not all browsers support it; you need fallback in pixels for IE8 and older.
  • 28. Pixels to ems Responsive design doesn’t require converting pixels to ems (formulas). Just start with ems.
  • 29. p { font-size: .45833333333em; } Converting pixels to ems gets you weird numbers, which are difficult to use, They can also cause problems with rounding by the browser.
  • 30. p { font-size: .46; } And you don’t need so many decimal points.
  • 31. Line Height (leading) If lines are too close together/far apart, text is more difficult to read. It’s called leading because in lead typesetting, they would put pieces of lead between lines to add space.
  • 32. Leading. Photo by Marcin Wichary: http://www.flickr.com/photos/mwichary/2406450779/
  • 33. p { line-height: 1 } For line-height, use unitless numbers, which are relative to the font size of the element. 1 is default.
  • 34. Default of 1 - lines are close together, it’s hard to focus on one line at a time.
  • 35. line-height: 2 - the lines are too far apart, so it’s difficult and tiring to read
  • 36. line-height: 1.4 - good default to start with, but adjust based on typeface, line width, screen size
  • 37. Small screens need less line height (1.4 on left, 1.3 on right), plus you can fit a little more on screen.
  • 38. p { line-height: 1.3 } @media screen and (min-width: 30em) { p { line-height: 1.4 } } @media screen and (min-width: 60em) { p { line-height: 1.5 } } Media queries to increase line height as viewport gets wider.
  • 39. Line Length (Measure) Characters per line is one of the most important qualities that makes type readable.
  • 40. Obvious that super-long lines are hard to read. Difficult for eyes to move from one line to the next.
  • 41. Lines that are too short interrupt the flow of reading. This makes it tiring to read because your eyes move back and forth more.
  • 42. 45 - 75 characters Optimum characters per line for body text such as paragraphs (doesn’t apply to headings, etc.)
  • 43. Remember: to design around line length, it’s important to select the typeface first, because they’re different sizes.
  • 44. 74 72 69 69 65 58 65 73 68 67 66 Characters per line vary due to letter size, word length. Try to average 45-75.
  • 45. Testing Line Length You should test line length as you’re designing a layout, to stay within the optimal range.
  • 46. 45 75 One easy way to test: count from 45th to 75th character on the first line, and use a span to color it.
  • 47. <p>These stories are true. Although I have left <span class=”testing”>the strict line of historical</span> truth in many places, the animals in this book were all real characters.</p> .testing { color: #f00; } You can easily turn this on an off in your CSS during designing/testing.
  • 48. But this is even easier: after my talk at CSS Dev Conference, Chris Coyier made this bookmarklet that does the same thing — colors the text red between the 45th-75th characters in any text element. No need to change your HTML or CSS. http://codepen.io/chriscoyier/pen/atebf
  • 49. Add the bookmarklet to your browser’s bookmarks. Click it, then hover over the element you want to select — it will be outlined in red...
  • 50. And click to select that element. The 45th-75th characters will be colored red, and will stay red as you change the size of the browser window (unless you refresh the page.)
  • 51. Margins & Font Size The main methods to adjust line length are changing the margins and changing the font size.
  • 52. For 320 pixel screen (iPhone), text at base font size fits well in range (very handy!). For smaller screens, you may need to compromise either font size or line length to make it fit.
  • 53. article { margin: 15px 3%; } Use narrow margins on small screens to not waste space, but don’t have margins of zero. The example on the previous slide is 3% margin on each side.
  • 54. article { margin: 15px auto; width: 94%; } Using width also gives you margins.
  • 55. You can use either percentage or margins to set the width of an element.
  • 56. If you use percentage, the element width will change with the page width.
  • 57. Using ems means the element width depends on the font size.
  • 58. Changing the font size changes the width of the element.
  • 59. On our example page, starting out with a good line length.
  • 60. Make your browser window wider until you hit the end of the 45-75 range. This is where you will need to add a media query.
  • 61. Keep a tool like this open in another tab. Once the browser window is at the width where you need a media query, switch to this tab and easily see that window is now 31 ems. http://mqtest.io/
  • 62. @media screen and (min-width:31em) { article { width: 70% } } On our example, add a media query at 31 ems to increase left/right margin from 3% to 15%.
  • 63. This is the page at a width of slightly less than 31 ems.
  • 64. This is the page at slightly more than 31 ems. The media query has increased the margins.
  • 65. Again expand the browser window to the end of the 45-75 character range. Now we’re at 40 ems.
  • 66. @media screen and (min-width:40em) { article { font-size: 1.1em } } Media query to increase font size, from 1 em up to 1.1 em. Larger fonts will look okay on larger screens. It’s better to include more media queries with small changes in each one than to use only a few media queries and make dramatic jumps in font size.
  • 67. This is the page at slightly less than 40 ems.
  • 68. This is the page at slightly more than 40 ems, with a bigger font size. We changed the font size on the <article> element, so everything inside it is bigger (both paragraph text and heading). Alternatively, you could just change the <p> font size and leave the heading the same.
  • 69. Make your browser window wider again to the end of 45-75 character range.
  • 70. A media query here changed both the margins and the font size.
  • 71. Since the font size is larger, and we’re on a wider screen, it would look better if we increased the line height a bit.
  • 72. @media screen and (min-width:55em) { article { font-size: 1.2em } p { line-height: 1.5 } } Add line height to the media query. Only increase the line height for the <p> (paragraph text), not everything in <article>, because the heading line height doesn’t need to change.
  • 73. #content { max-width: 63em; } Eventually the font size is the largest you want to make it, and you want to keep the content from getting any wider. Use max-width so layout stops expanding for super-wide screens.You can use max-width on individual columns, or on an element that contains all your content.
  • 74. Real example, Trent Walton’s site. 45-75 characters highlighted. http://trentwalton.com
  • 75. body { font-size: 100%; } .container { width: 88%; margin-left: auto; margin-right: auto; max-width: 1260px; } Starting at the most narrow width, the container is 88% (6% margin on each side). The font-isze starts at 100% (base font size for the browser).
  • 76. The site at the most narrow width — the content width is 88%.
  • 77. As we make the browser window wider, the content is still 88% width.
  • 78. @media screen and (min-width: 37.5em) { .container { width: 85%; } .article .centered p { width: 80%; } body { font-size: 112.5%; } } There’s a media query at 37.5 em, where the content width changes to 68% (85% × 80%) and the font size increases.
  • 79. Making the browser window slightly wider, we get content at 68% width and 112.5% font size.
  • 80. Wider window, still at 68% width and 112.5% font size.
  • 81. @media screen and (min-width: 50em) body { font-size: 125%; } } At 50 ems, a media query increases the font size. {
  • 82. Now we’re up to 125% font size.
  • 83. Still at 125% font size...
  • 84. @media screen and (min-width: 64.375em) { body {font-size: 137.5%;} } At 65 ems, a media query increases the font size again, to 137.5%.
  • 85. Now we’re at a font size of 137.5%.
  • 86. @media screen and (min-width: 75em) and (min-height: 31.25em) { body {font-size: 150%;} } At 75 ems, a media query increases the font size, but only if screen is tall enough (so not for wide laptop screens where the vertical space is taken up with lots of browser toolbars)
  • 87. Here we’re up to a font-size of 150%. It looks good on a wide screen.
  • 88. @media screen and (min-width: 106.875em) and (min-height: 50em) { body {font-size: 162.5%;} .container {max-width:1360px;} } Using max-width to keep the layout from getting wider.
  • 89. This site uses max-width instead of min-width for media queries, so I’ll show you starting from widest screen instead of narrowest screen. http://wearyoubelong.com/
  • 90. body { font-size: 100%; } @media screen and (max-width:800px) { body { font-size:90%; } } @media screen and (max-width:680px) { body { font-size:80%; } } Start with 100% font size, then a media query takes it down to 90% at 800 pixels or narrower, and 80% at 680 or narrower. (Yes, media queries should be in ems.)
  • 91. This is how it looks at 100% font size.
  • 93. As the window gets narrower, we’re down to 90%. The media query changes the font size on the body element, so all of the text gets smaller.
  • 94. At a width of 680 pixels, the font-size goes down to 80%.
  • 95. At a narrower screen width, even though the font-size is 80%, the heading/intro text takes up whole screen.
  • 96. On iPhone it’s even worse. It wouldn’t be a good idea to make this particular typeface smaller (it would be hard to read), but you could use a media query to change the typeface on narrow screens. Also, don’t use all caps for long sections of text like this.
  • 97. Further down the page, the text is 80% of the browser default. It’s pretty small. I had trouble reading it, and wanted to zoom in on my phone’s screen...
  • 98. <meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0;"> But they used maximum-scale=1.0, which takes away the ability to zoom. Don’t ever do this.
  • 99. Also, there’s a lot of wasted space on the right at the end of lines. Hyphenation would help with this.
  • 100. Hyphenation You can even out the length of lines by letting long words wrap onto next line.
  • 101. The left example has no hyphenation, the right has hyphenation. On left, look at second-to-last line, the words look too spaced out. Hyphenation is most important on small screens, to maximize use of space.
  • 102. On non-justified text, hyphenation makes the right margin look less ragged.
  • 103. p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } The hyphen property is new, so you need prefixes. Opera and Chrome don’t support hyphenation at all, but that’s okay. This is an example of progressive enhancement. Hyphens make the design better for browsers that can support it, but the design is still perfectly okay for users with browsers that don’t support hyphenation.
  • 104. @media screen and (min-width:30em) { p { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } } Hyphens are especially important for narrow screens, but you can use a media query to remove hyphens for wider viewports.
  • 105. <html lang=”en-US”> You have to specify a language (i.e., English). If you leave it out, the browser won’t hyphenate. If you specify the wrong language, the browser will still add hyphens, but weird things may happen. Note: you can specify language on elements other than the <html> element, if you have more than one language on a particular page.
  • 106. Responsive Typography Resources The Elements of Typographic Style Applied to the Web – Richard Rutter http://webtypography.net/toc/ Fluid Type – Trent Walton http://trentwalton.com/2012/06/19/fluid-type/ Responsive Web Typography – Jason Cranford Teague http://www.jasonspeaking.com/rwt/#/ Web Typography You Should Do Now – Richard Rutter http://webtypography.net/talks/sxsw2013/ Prototyping Responsive Typography – Viljami Salminen http://viljamis.com/blog/2013/prototyping-responsive-typography/ Responsive Web Design and Typography – Danny Calderst http://www.slideshare.net/dannycalders/typography-responsive-web-design