We're doing quite a large application here and I happened to be the leader of the frontend team. My question is how to decide which part of style should go into typogragphy.css and which to layout.css.

Should all rules regarding the text go into a separate stylesheet or there might be some exceptions? Could you please suggest me some good theroetical source with examples so that I can make the right choices?

There are many articles on how to divide CSS to organize it but there are no clear guidelines what precisely should fall in each category.

  • It's known that cash makes us free. But how to act when someone has no money? The one way only is to receive the <a href="http://bestfinance-blog.com/topics/credit-loans">credit loans</a> and just secured loan. KATHYRamirez26 over 6 years ago

3 answers


I think there are no clear guidelines because there's no clear 'best' way to do it. What benefits are you seeking to gain by dividing your CSS this way? Are changes to layout.css always going to be independent of changes to typography.css or will you end up having to edit both files at the same time in most cases? Are there going to be dependencies between rules in the two stylesheets that are going to mean you always have to load them in a particular order? Will having two files make certain expected maintenance tasks easier?

In short - you can't answer the question of which rules go into which file unless you tell us the answer to the question "Why do I have these two files?"

Answered over 7 years ago by Rob Crowther

If both css files are being called in every page of the site, I would merge them into one file and keep that file organized with comments. The less http requests for your site the faster it will load. The more you can merge any css files into one, javascript files into one, and image icons into a single sprite the better it will be for page load time.

Answered over 7 years ago by Artistic Abode
  • There is a mechanism to merge all CSS file into one according to clients' needs, so this is not that much of a problem. cyrylski over 7 years ago

If I have a typography.css then I use it for everything pertaining to text in a general sense - e.g. which fonts will be used for which elements, font-size, height, style etc.

I divide it into body text and headings and special page sections where appropriate.

I only put in things that affect font.

things that affect layout, like heading margins etc go into a similarly structured layout.css

my simple rules - if it affects the font being used or how the font is used - typography.css if it affects the element layout, then it goes in layout.css.

That said, I generally use a different method of CSS organisation now.

style.css imports reset.css, master.css and enriched.css and during development it also imports diagnostic.css.

master.css looks like this (at the start of a project) and I edit the typography section accordingly:

feel free to borrow ideas - most of them I have borrowed and hopefully remembered to credit.

version:    2.0
author:     Tony Crockford
email:      tonyc@boldfish.co.uk
website:    http://www.boldfish.co.uk/
date:       Friday March 2010 09:27 
copyright:  2010 Tony Crockford All Rights Reserved

        1.  General
        2.  Typography
        3.  Structural
        4.  Headings
        5.  Links
        6.  Branding
        7.  Main Nav
        8.  Sub Nav
        9.  Main Content
        10. Secondary Content
        11. Footer
        12. Fomrs
        13. Tables
        14. Misc 1
        15. Misc 2

----------------------------------------------------------------------------- */

bul-    BULLETS (usually ico-)
btn-    BUTTONS
ico-    ICONS

/* !=General ---------------------------------------------------------------------------- */

body { 
    background: #fff;
    color: #000;
    font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
    line-height: 1;
    margin: 0;
    padding: 0;

/*  text-shadow: rgba(0,0,0,0.01) 0 0 1px; */

/* !=Typography ------------------------------------------------------------------------- */

#page {
* font size and line height declarations are based on the following ALA
* article:  http://www.alistapart.com/articles/howtosizetextincss

* To use a 12px font size on the page, delete the 14px declarations.
* to use a 14px font size on the page, delete the 12px declarations.

  /* Use a 12px base font size with a 16px line height */
  /* font-size: 0.75em; */ /* 16px x .75 = 12px */
  /* line-height: 1.333em; */ /* 12px x 1.333 = 16px */

  /* Use a 14px base font size with a 18px line height */
  /* font-size: 0.875em; */ /* 16px x .875 = 14px */
  /* line-height: 1.286em; */ /* 14px x 1.286 = 18px */

  /* Use a 16px base font size with a 20px line height */
  font-size: 1em; /* 16px x 1 = 16px*/
  line-height: 1.25em; /* 16px x 1.25 = 20px */

fieldset {


Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.

bt GARAMOND(23.84% on Mac, 86.24% on Windows)                      font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
LUCIDA BRIGHT(64.90% on Mac, 33.84% on Windows) Huge x-height   font-family: "Lucida Bright", Georgia, serif;
hl PALATINO(79.71% on Mac, 98.04% on Windows)                      font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
BIG CASLON(85.10% on Mac)                                       font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
DIDOT(87.72% on Mac)                                            font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
bt BASKERVILLE(88.60% on Mac, 49.10% on Windows)                   font-family: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
HOEFLER TEXT(88.70% on Mac, 1.16% on Windows)                   font-family: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
BODONI(47.89% on Windows)                                       font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
GOUDY OLD STYLE(51.30% on Windows)                              font-family: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
CONSTANTIA(53.81% on Windows)                                   font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
CAMBRIA(54.51% on Windows)                                      font-family: Cambria, Georgia, serif;
BOOK ANTIQUA(86.09% on Mac)                                     font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

Sans-Serif font-stack

OPTIMA(90.14% on Mac)                                           font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
FUTURA(91.01% on Mac)                                           font-family: Futura, "Trebuchet MS", Arial, sans-serif;
bt GILL SANS(91.52% on Mac, 51.74% on Windows)                     font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
hl TREBUCHET(94.20% on Mac, 99% on Windows)                        font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
HELVETICA NEUE(94.74% on Mac)                                   font-family: "Helvetica Neue", Arial, Helvetica,  sans-serif;
VERDANA(96.81% on Mac, 99.40% on Windows)                       font-family: Verdana, Geneva, sans-serif;
LUCIDA GRANDE(99.13% on Mac, 98.25% on Windows)                 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
bt GENEVA(98.84% on Mac)                                           font-family: Geneva, Tahoma, Verdana, sans-serif;
SEGOE(45.04% on Windows)                                        font-family: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
CANDARA(54.31% on Windows)                                      font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
CALIBRI(54.76% on Windows)                                      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
FRANKLIN GOTHIC MEDIUM(97.89% on Mac)                           font-family: "Franklin Gothic Medium", Arial, sans-serif;
TAHOMA(99.30% on Windows)                                       font-family: Tahoma, Geneva, Verdana, sans-serif;


  font-family: "Helvetica Neue", Arial, Helvetica,  sans-serif;

h3 {
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

h6 {
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

code {
  font-size: 1.1em; /* Monospace fonts can be hard to read */
  font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;

/* to hang the quote marks on quoted text, wrap a p in a blockquote */
blockquote p { 

/* !=Structural ------------------------------------------------------------------------- */

/* 100% height */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;

#page {
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    width: 960px;
    margin: 0 auto;

#skipto {
} /* Hides the skip to link - useful for screen readers */

blockquote {
  margin: 1em 0;

a img {

.hide {
    display: none;

hr {
  height: 1px;
  border: 1px solid #666;

/* self-clear floats */
/* new clearfix http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.group:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;

/* !=Headings --------------------------------------------------------------------------- */

h1 {
  font-size: 2em;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0.5em; 
/* 0.5em is equivalent to 1em in the page's base font. Remember, a margin specified in ems is relative to the element's font-size, not to the pages' base font size. So, for example, if we want a 1em margin (relative to the base font), we have to divide that length by the element's font-size: 1em / 2em = 0.5em */

h2 {
  font-size: 1.5em;
  line-height: 1.3em;
  margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
  margin-bottom: 0.667em;

h3 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
  margin-bottom: 0.769em;

h6 {
  font-size: 1.1em;
  line-height: 1.3em;
  margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
  margin-bottom: 0.909em;

/* !=Links ------------------------------------------------------------------------------ */
a:link {

a:visited {

a:focus {

a:active {

/* !=Branding --------------------------------------------------------------------------- */

/* !=Main Nav --------------------------------------------------------------------------- */

/* !=Sub Nav ---------------------------------------------------------------------------- */

/* !=Main Content ----------------------------------------------------------------------- */

/* !=Secondary Content ------------------------------------------------------------------ */

/* !=Footer ----------------------------------------------------------------------------- */

/* !=Forms ------------------------------------------------------------------------------ */

/* !=Tables ----------------------------------------------------------------------------- */

/* !=Misc 1 ----------------------------------------------------------------------------- */

/* !=Misc 2 ----------------------------------------------------------------------------- */
.emphasis {
    color: red;
    font-size: 12px;
    font-style: italic;
Answered over 7 years ago by Tony Crockford