Web Build Snippets

Typography

Notes

Paragraph indenting

A common way to visually separate paragraphs in books is to indent the first line. It's actually more common than putting an empty line between them. In terms of rhythm, we're changing the horizontal rhythm to separate paragraphs instead of the vertical one. The contrary is true on the web-paragraphs are more commonly spaced apart but indenting the first line is quite a simple thing to do. There are two rules that must be followed:

Don't indent the first line of the first paragraph or of the paragraph that comes after a heading, an image or any other type of figure. I know it sounds quite complicated but it's actually very simple when it comes to CSS.

This works because the text-indent property will only be applied to paragraphs that are preceded by another paragraph. If a paragraph is preceded by an hi, for example, the text indent won't be = applied. That's exactly what we want.

Don't put a bottom margin on your paragraphs. They're visually divided by the indented line and that's enough. There's no point in having space between them. Indented and spaced-apart paragraphs make skilled typographers cringe.

This will set the top and bottom margins of all paragraphs to o, just to make sure that a top margin doesn't put a blank space between the paragraphs.


p + p {
text-indent: 1em;
}

p {
margin: 0 auto;
}

Here are some CSS code snippets that can help set excellent web typography for good legibility and expert type setting:

Font Stacks


body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

Line Height


body {
  line-height: 1.5;
}

Text Alignment


body {
  text-align: justify;
}

Paragraph Indenting


p + p {
  text-indent: 1em;
}

p {
  margin: 0 auto;
}

Letter Spacing


h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.05em;
}

Font Weight


h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

Text Decoration


a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Text Transform


h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}


h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

To make the HTML a fluid size but equal to 16px, you can use the following CSS code:


html {
  font-size: 100%;
}

Here is the CSS code to make the HTML font fluid in size using vw and equal to 21px at 1440 viewport width:


html {
  font-size: calc(0.9375vw + 12.25px);
}

@media (min-width: 1440px) {
  html {
    font-size: 21px;
  }
}

This will set the HTML font size to be responsive and scale proportionally to the viewport width, while also ensuring that it is equal to 21px at a viewport width of 1440px.

To prevent widows:


h1, h2, h3, h4, h5, h6, caption, figcaption {
    text-wrap:balance;
}