Markup For Type

Inline Elements And Block Elements

In normal body copy, text typically flows from one line to the next as we reach the edge of the visible page. We add words to a line, progressing horizontally from left to right, until we reach the end of the line and drop down to continue on the next line. In HTML, this is the default behavior for text without any markup. Many HTML elements are intended to flow with text in this way without interruption. Elements that have this behavior are known as inline elements.

Common inline elements include <a>, <strong>, <em>, <b>, <i>, <sup>, <sub>, <button>, <code>, and <span>.

HTML also has elements which do not follow the normal flow of text, but instead define the containers, or blocks, within which inline text flows. Most HTML documents are fairly complicated hierarchies of nested elements — blocks containing blocks, etc. Elements that create these containers are block elements.

Common block elements include:

• <p>
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <article>, <section>, <nav>, <aside>
• <header>, <footer>, <div>

Code Comments

Sometimes, you want to put notes or comments into the code itself that are not visible to the end user. These comments can also be useful for temporarily removing code from the page without actually deleting it, because code within a comment does not get parsed by the browser.

<!-- This is a comment. It will not be shown on the page. -->

Meta Charset

There are many different technical standards for how text data can be encoded. It's a good idea to tell the browser how the text in your document is encoded so it can be interpreted correctly. UTF‑8 is widely used and supports a huge array of glyphs for many languages.

<meta charset="UTF-8">

HTML Entities

Some characters are used to create markup and must be escaped in your code with short words called HTML entities. These words begin with an ampersand and end with a semicolon.

• Less-than < → <
• Greater-than > → >
• Ampersand & → &

There are entities for many glyphs, but if you use UTF‑8 you rarely need most of them.

Styles For Type (CSS)

Format of a CSS Ruleset

selector {
  property-name: value;
  another-property-name: value;
}

Inheritance

Most CSS properties set on a container are inherited by its descendants. An element accumulates inherited rules from its ancestors. A rule on the element itself takes precedence over a rule inherited from a parent, which takes precedence over a rule from a grandparent, and so on. Use the browser's element inspector to view the full stack of inherited rules.

CSS Properties for Styling Type

• font-family — a prioritized list of font faces; the browser uses the first available.
• font-size — size of type.
  • Absolute units: pt, px.
  • Relative units: rem, em, %.
  • 1rem equals the document's base size (set on html).
  • 1em equals the parent element's font size.
  • % is relative to the parent (e.g., 100% ≈ 1em).
• font-weight — boldness of the typeface. Values: normal, bold, or numeric 100–900 (400 = normal).
• font-style — italic or normal (note: some elements are italic by default).
• line-height — space between lines (leading). Can be unitless; 1 equals the font size. Typical paragraph values: around 1.2–1.6.
• letter-spacing — tracking; spacing between characters. Often use em units. Negative values are allowed.
• text-align — inline content alignment within a block container (e.g., left, center).
• margin — controls white space around blocks; also useful for page edge spacing and gaps between sections.
• text-decoration — underline, overline, line-through, none; with text-decoration-style for solid, wavy, or dashed.
• text-transform — uppercase, lowercase, capitalize.
• text-indent — indent first line; can outdent with negative values.
• color — text color.
  • Named: gray
  • Hex: #cc0000
  • RGB: rgb(200, 0, 0)
  • RGBA: rgba(200, 0, 0, 0.5) (with alpha for transparency)

Human sacrifice, dogs and cats living together... mass hysteria! — Ghostbusters, 1984

Using Web Fonts

Google Fonts

fonts.google.com provides a free collection of web fonts. Quality varies, but they're free, plentiful, and easy to use.

Typekit Fonts (Adobe)

Available to Creative Cloud subscribers. Not free and a bit more involved to use, but generally higher-quality typefaces. Educational subscriptions may have limited access.

Font Awesome (Icon Font)

Icon fonts are typefaces where glyphs are vector icons instead of letters. Very handy for UI controls.