Deviant Login Shop  Join deviantART for FREE Take the Tour
About Design & Interfaces / Professional Member The Happy BitItaly Groups :iconwebdesignfactory: WebDesignFactory
The group for Real Webdesigners
Recent Activity
Deviant for 4 Years
Needs Premium Membership
Statistics 15 Deviations 1 Comment 4,300 Pageviews

Newest Deviations

deviantID

thehappybit's Profile Picture
thehappybit
The Happy Bit
Artist | Professional | Design & Interfaces
Italy
The Happy Bit is a web and digital agency. The design is focused on simplicity and readability, with particular attention to its responsiveness and adaptability towards different devices.
Originally posted on thehappybit.com

When designing using text, no matter if it's for print or the Web, one vital thing to do is to ensure that the design stays harmonious in every aspect.

The best way to do so is quite possibly using a so called typographic scale, which means giving text portions precise, regular and linear dimensions, based on the hierarchical relationships they hold with other text elements.

This has been long known, of course, and we're not bringing anything new to the cause.

But being the Web one of our domains, we felt like managing the typographic scale in CSS could be done better, and in an easier, sort of automatic, way.

Our goal was to create a base-level CSS that could set a well thought series of values for the typographic scale, hence establishing a vertical rhythm, with absolutely no reference to pixels. Instead, we wanted it to graciously adapt itself when varying the font size declaration of the document's body.

Using ems and percentage we were able to create such base stylesheet, defining the headings (from h6 through h1) and paragraphs main proportions, relying on the body's font-size value, with a pre-defined line-height set at 1.5em.

Proportions are then extracted keeping the value of 14 pixels as the smallest value (paragraph); the biggest value, on the contrary, is 48 pixels, used for the primary level heading.

The scale would degrade as follows, from the biggest element to the smallest:

48, 32, 24, 21, 18, 16, 14

Should we want to get the code for our H1s to be properly styled according to our chosen rhythm, we could write:

paragraph = 14px
line-height = 21px (14px * 1.5)
h1 = 48px
line-height * 3 = 63px

font-size : 48 / 14 = 3,428571429em
line-height : 63 / 48 = 1,3125em



/*
=================================================
Basic text sizing
=================================================
Set your main font size for paragraph

Reference
62.5%  => 10px
68.8%  => 11px
75%    => 12px
81.3%  => 13px
87.5%  => 14px
100%   => 16px
112.5% => 18px
125%   => 20px
=================================================
Proportions based on typographic scale
14, 16, 18, 21, 24, 32, 48
=================================================
*/

body {
font-size: 87.5%;
line-height: 1.5;
}

h1 {
  font-size: 3.4285714285714284em;
  line-height: 1.3125em;
}

h2 {
  font-size: 2.2857142857142856em;
  line-height: 1.96875em;
}

h3 {
  font-size: 1.7142857142857142em;
  line-height: 1.75em;
}

h4 {
  font-size: 1.5em;
  line-height: 2em;
}

h5 {
  font-size: 1.2857142857142858em;
  line-height: 2.3333333333333335em;
}

h6 {
  font-size: 1.1428571428571428em;
  line-height: 2.625em;
}

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 1.5em;
}

Again, the resulting values for line heights are a direct consequence of having set the base line-height at 1.5. In our next article we'll see how's possible to combine LESS and our typographic scale to get an even more flexible base stylesheet for typography.

Articles on the subject:
The typographic scale by retinart.com
Five simple steps to better typography by Mark Boulton

Suggested lectures:
Elements of Typographic Style – Robert Bringhurst

AdCast - Ads from the Community

×

Groups

Comments


:iconrodsgfx:
RodsGFX Featured By Owner Jul 9, 2011   Interface Designer
Great Work thehappybit!
Reply
Add a Comment: