metamn/typography.md

## typography.md

      
    Raw
  

              typography.md
            
          
    Typography (Responsive)

Introduction

Responsive typography means two important things:

The HTML <body> gets a default size set in percentage
All other elements (larger and smaller text) are sized relative to 1.) using em instead of px.

You can read more about on:

http://typographyhandbook.com/#web-style-guide
http://alistapart.com/article/howtosizetextincss
http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/

but the tldr; is a following construct:
body {
  font-size: 100%; // This sets the default font size to 16px
  line-height: 1.25; // This sets the default line height to 20px
}

h1 {
  font-size: 1.25em;
}

with the following best practice:

font-size: 100%; is the current best option for cross-browser and cross-device compatibility

PSD to Responsive typography

Finding the default text style

Since for responsive typography we'll have to set the base font size to 16px, the first thing to do is to find in PSD those text styles which can be considered default text styles having a font size of 16px.
Default text styles are, for example, the body of a blog post, or an excerpt, ie. long text blocks.
In the Specless PSD default text styles can be considered to be:


"Forget tired standard units and “off-the-shelf” formats from other vendors. Specless offers the industry’s first technology developed specifically for publishers — to create, deliver and sell any format of ads imaginable."


"Offer more, earn more. On average, Specless-enabled formats sell at 10x the value of standard rich media."


"This is a subheader that will help balance out this whitespace"


"Specless plays well with others. It works seamlessly with major publishers and advertiser-owned ad servers. Our open-source approach extends capabilities through most plugins and extensions."


and more ...


Converting text styles

All above text styles have the following properties in PSD:
font-family: "Roboto",
font-size: 19px; // 19pt
line-height: 1.526; // 29pt the leading

And we know that for responsive typography the font-size must be reduced to 16px. Something like:
font-family: "Roboto",
font-size: 16px;
line-height: ???;

How much is the line-height is not important here. What is important that we have to convert all text settings from PSD using the '19pt = 16px' formula.
Avoid scale bloat

Responsive typography uses Modular Scale to easily calculate how other text styles differ from the default text style. In such way to preserve a visual harmony during the scaling across devices. And to make typography settings clean, to avoid scales which are in between the modular scales, and might be introduced into the design by mistake.
For example:
body {
  font-size: 100%; // This sets the default font size to 16px
  line-height: 1.5; // This sets the default line height to 20px
}

.small {
  font-size: 0.667em;
}

h3 {
  font-size: 1.5em;
}

h2 {
  font-size: 2.25em;
}

h1 {
  font-size: 3.375em;
}


In the current PSD we have the following text styles / sizes: 14, 64, 26.14, 17, 36, 19, 26, 25, 20, 16, 24, 18.
It's clearly too much and doesn't follows a modular scale approach.
We have two solutions here:

Rethink sizes to follow a modular scale. The current implementation is using modular scale.
Use sizes as they are in the PSD not taking into consideration a modular scale.

The current text styles / scales are:

Hero: Creativity at scale
Headline 1: Any Format, Any Concept, Rich Media .., Everything .., We believe ..
Headline 2: Finally ..., Unlock Valuable ..., Open Architecture, ..., Specless Publisher Api, ..., Specless Web Interface (???), Stephen Corby, ..., Specless, Social, Contact Us,
headline 3: Are You Ready to Go Specless (???)

The current inconsistencies / exceptions / questions are:

Finally ... : has size 26,14pt instead of 26
Syfy Childhood's End: has Roboto Medium, Lexus has set Roboto Regular
Open Architecture, Specless Publisher API, ...: has size 25pt instead of 26, and character spacing -10
Specless Web interface: doesn't deserves a bigger size?
Are You Ready to go Specless: it has unique settings used only here. If Specless Web Interface goes bigger size (headline 1) this can become headline-2 and headline-3 can be removed.
Specless, Social, Contact Us: has size 24pt, instead of 25 or 26
Atlanta, Chicago: uses Roboto Medium instead of Roboto Regular, has size 18pt instead of 19
Menu items: 14pt seems to be too small in the browser

Font families

Currently we use 7 font families and Google gives us warnings this will reduce page speed consistently.

Roboto Condensed: Regular
Roboto: Light, Regular, Medium, Bold
Lato: Black, Bold

If we could remove Roboto Condensed (used only for 10x) and Roboto Medium (used for Atlanta, Chicago, and some of the slider titles like Blizzard Overwatch, Penzoil) the page speed warning would go from red to orange, which is quite satisfactory.