Skip to content

Latest commit

 

History

History
190 lines (161 loc) · 6.38 KB

Website-Typography.md

File metadata and controls

190 lines (161 loc) · 6.38 KB

Web Typography

Embedding and applying a custom webfont in CSS

@font-face {
    font-family: 'MyWebFont';
    src: url('/path/to/webfont.woff2') format('woff2'),
        url('/path/to/webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html {
    /* Custom font */
    font-family: 'MyWebFont';
    /* Websafe fallback */
    font-family: 'MyWebFont', Arial;
    /* Select type like 'serif', 'sans-serif', 'monospace', 'cursive' */
    font-family: monospace;
    /* Full control */
    font-family: 'MyWebFont', Arial, sans-serif;
}

More on CSS Tricks

Finding webfonts

Websafe fonts

There is a group of typefaces that are most likely installed on every computer that uses a latin alphabet. These fonts are called web safe, because you can use them without worrying that the browser replaces it with another typeface. These include:

  • Arial
  • Times New Roman
  • Courier New
  • and more

Webfont services

There are also services that let you directly embed fonts into your websites

Custom webfonts

Of course you can also provide custom font files. The modern way would be to have it in woff2 or woff format, but otf and ttf often works as well.

All modern type foundaries will offer their typefaces in these formats. You can also export webfonts from typedesign software like Glyphs or Robofont. And then you can convert your regular desktop fonts to webfonts with tools like Transfonter or Fontsquirrel.

Typesetting

Font size & spacing

html {
    /* fixed font size */
    font-size: 16px;
    /* relative font size with min, max value */
    font-size: clamp(14px, 2vw, 24px);
    letter-spacing: -0.05em;
    /* optimize text-redering for exact shapes */
    text-rendering: geometricPrecision;
    /* optimize text-redering for legibility */
    text-rendering: optimizeLegibility;
    /* normalize font anti-aliasing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2 {
    font-size: 2rem;
    line-height: 1;
    margin: 1rem 0;
}
p {
    font-size: 1rem;
    line-height: 1.2;
}
p + p {
    text-indent: 3em;
}
p a {
    text-decoration: underline;
}
sup, figcaption {
    font-size: 0.7em;
    letter-spacing: 0.05em;
}
sup {
    vertical-align: baseline;
    position: relative;
    top: -0.3em;
}

Use rem for values that you want to make relative to the root font size. Use em for values relative to the current font-size.

Open type features

If a font provides open type features, you can also use them on your website:

h1 {
    /* use alternates set 7 */
    font-feature-settings: "ss07";
}
h6 {
    /* switch on small caps */
    font-feature-settings: "smcp" on;
}
table {
    /* tabular figures */
    font-feature-settings: "tnum";
}

To find out, which features you font provides, it is often stated at the type foundry website or specimen PDF. You can also open the typeface in InDesign or Glyphs to find out.

Hyphanation and word breaking

CSS Hyphenation

<html lang="de">
p {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* min word length, min length pre-split, min-length after-split */
    hyphenate-limit-chars: 8 4 4;
    /* max consecutive lines with hyphened words */
    -ms-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-lines: 2;
    hyphenate-limit-lines: 2;
}

Special Characters

  • <br /> forced line break
  • &nbsp; no break space, whitespace that will never break into the next line (geschütztes Leerzeichen)
  • &emsp; m-width space
  • &thinsp; thin space
  • &#8203; zero width white space
  • &shy; soft hyphen, optional line break with hyphen
  • <wbr> optional line break without hyphen (deprecated)

Read more

Exporting font settings from Adobe InDesign

CSS rules much work like text formats in layouting software. When editing a format in InDesign, you can click on the last tab ”export tags“ or ”Tagsexport“, copy the CSS rules and use it like:

p.format-name {
    /* paste css rules here */
}
<p class="format-name">Lorem Ipsum</p>

You can easily assume that 1pt in InDesign ≈ 1px in browser.

Detail typography

Libraries like Smartypants (PHP, Kirby) can run over some text to fix "wrong" characters.

Further reading