/basic-typography

Basic typographic considerations

Primary LanguageCSS

Basic Typography

This is an example on how to apply typographic rules to an HTML document.

What rules are used?

First, we set the base font size of the desired value - the default is 16px:

html {
    font-size: 16px;
}

Then we can use rem units to define margin, font-size and line-height values, e.g.:

h1 {
    font-size: 4rem;
    line-height: 6rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

What do we need to style?

  • headings: h1, h2, h3, ...;
  • paragraphs and lists: p, ul, ol;
  • various: blockquote, pre, ...

Copy text example

Mrs. Dalloway said she would buy the flowers herself.

For Lucy had her work cut out for her. The doors would be taken off their hinges; Rumpelmayer’s men were coming. And then, thought Clarissa Dalloway, what a morning — fresh as if issued to children on a beach.

What a lark! What a plunge! For so it had always seemed to her, when, with a little squeak of the hinges, which she could hear now, she had burst open the French windows and plunged at Bourton into the open air. How fresh, how calm, stiller than this of course, the air was in the early morning; like the flap of a wave; the kiss of a wave; chill and sharp and yet (for a girl of eighteen as she then was) solemn, feeling as she did, standing there at the open window, that something awful was about to happen; looking at the flowers, at the trees with the smoke winding off them and the rooks rising, falling; standing and looking until Peter Walsh said, “Musing among the vegetables?”— was that it? —“I prefer men to cauliflowers”— was that it? He must have said it at breakfast one morning when she had gone out on to the terrace — Peter Walsh. He would be back from India one of these days, June or July, she forgot which, for his letters were awfully dull; it was his sayings one remembered; his eyes, his pocket-knife, his smile, his grumpiness and, when millions of things had utterly vanished — how strange it was! — a few sayings like this about cabbages.