Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Clarissa Peterson

In Control - February 18, 2014

MoDev East 2013, CSS Dev Conference ...
Covered in these slides:
1. Font Size
2. Line Height (Leading)
3. Line Length (Measure)
(those three things work together ...
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 mak...
Media Queries

A website can have as many media queries as you want. Add a media query where something
needs to change - e...
Start with HTML

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

It’s important to use the correct elements. For very old ...

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 pixe...

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,...
Setting Font Size

Two alternatives for font size: ems and rems.You probably know these in the context of converting from
html { font-size: 100%; }

Base font size for the page - 100% is the browser’s default font size for body text - what the
Starting with the browser default base size makes the site more readable for everybody, even if
the text may seem too larg...

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 - ...
p { font-size: 1em; }
li { font-size: 1.5em; }

Nested elements make ems a little bit tricky.
<li>List item</li>
<li>List item
<li>Sub item</li>
<li>Sub item</li>
<li>List item</li>
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.

Rems (root ems) are an alternative to ems. Relative to the document’s
root element (the html element), not the paren...
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 als...
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
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 defa...
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) ...
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 ...
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.

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.


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 p...
But this is even easier: after my talk at CSS Dev Conference, Chris Coyier made this
bookmarklet that does the same thing ...
Add the bookmarklet to your browser’s bookmarks. Click it, then hover
over the element you want to select — it will be out...
And click to select that element. The 45th-75th characters will be colored red, and will stay
red as you change the size o...
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 t...
article {
margin: 15px 3%;

Use narrow margins on small screens to not waste space, but don’t have
margins of zero. The ...
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...
@media screen and (min-width:31em) {
article { width: 70% }

On our example, add a media query at 31 ems to increase lef...
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....
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,...
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 q...
#content { max-width: 63em; }

Eventually the font size is the largest you want to make it, and you want to keep the conte...
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 a...
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: ...
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 ag...
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 increa...
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;}...
This site uses max-width instead of min-width for media queries, so I’ll show you
starting from widest screen instead of n...
body { font-size: 100%; }
@media screen and (max-width:800px) {
body { font-size:90%; }
@media screen and (max-width:680...
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 t...
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),...
Further down the page, the text is 80% of the browser default. It’s pretty small.
I had trouble reading it, and wanted to ...
<meta name="viewport"
content="width=device-width; initialscale=1.0; maximum-scale=1.0;">

But they used maximum-scale=1.0...
Also, there’s a lot of wasted space on the right at the end of lines. Hyphenation would help with this.

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 s...
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 nee...
@media screen and (min-width:30em) {
p {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
<html lang=”en-US”>

You have to specify a language (i.e., English). If you leave it out, the browser won’t
hyphenate. If ...
Responsive Typography Resources
The Elements of Typographic Style Applied to the Web – Richard Rutter
Clarissa Peterson
<meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0;">
<meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0;">
<meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0;">
Prochain SlideShare
Chargement dans…5

<meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0;"> Responsive Typography

112 944 vues

Publié le

<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.

Publié dans : Design, Technologie
  • Is Your Ex With a Man? Don't lose your Ex girlfriend! This weird trick will get her back! ➤➤ http://ow.ly/f23I301xGAo
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • SECRET: Men usually out of emotion, not logic. Take advantage of this and get your Ex back today! See how at:  http://ow.ly/mOLD301xGxr
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Controversial method reveals inner psychology of techniques you can use to get your Ex back! See it now! ●●● http://t.cn/R50e2MX
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Secrets To Making Up, These secrets will help you get back together with your ex. ■■■ http://goo.gl/nkXEkK
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • SECRET: Men usually out of emotion, not logic. Take advantage of this and get your Ex back today! See how at: ♣♣♣ http://t.cn/R50e2MX
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici