Typography and modern CSS

While some CSS properties that are responsible for all sorts of prettiness (like filter, mix-blend-mode or transition) attract the attention of everyone and everyone, others are very little covered on the Internet. Take at least the properties that are responsible for typography. They are very useful and effective, but not widely known. Let’s correct the injustice and highlight what usually remains in the shadows.

Correct hyphenation (hyphens)

There was always something wrong with line wrapping in CSS. At first, we had the word-wrap property , which seems to work, but is listed as draft and is not recommended for use. Then came the word-break , which arranges hyphens based solely on whether the words are placed in the container, but still does not mark them with any signs. Only now, after so many years, CSS hyphenation is ready to get up from our knees: finally, we can transfer words according to the rules of the language using the hyphens property :

article {
    hyphens: auto;
}

Possible values:

• manual - Words are transferred only in those places of the text where a special character or tag is added . It is used by default;
• auto - the browser automatically adds hyphens based on the built-in dictionary;
• none - words are not hyphenated.

An important nuance: in order for the hyphenation dictionary to work, in the tag you must specify the lang attribute with the language code:

You can also set this attribute directly in a paragraph of text:

Some long text

It works everywhere except desktop Chrome and Opera, everything will look as usual in them. But in other browsers we get normal hyphenation, so you can safely use it.

Capital (font-variant: small-caps)

Capital is a typeface in a headset in which lowercase characters look like small caps. In CSS, it can be set using the font-variant property , which is responsible for representing lowercase letters. Available Values:

• normal - default value;
• inherit - inherits the value of the parent;
• small-caps is what interests us. Displays all lowercase characters as uppercase, but reduced in size.

h1 {
    font-variant: small-caps;
}

It looks very interesting:



Font-variant has long been supported in all browsers. You can play with other text or font here:

Advanced underline decoration (text-decoration-skip)

I already wrote about the text-decoration-style and text-decoration-color properties . But there is one more: text-decoration-skip . It includes the omission of detail elements in the underlined text, which looks pretty impressive. A property can take several values, but more or less only work:

• ink - the underline draws letters that go beyond the baseline;
• objects is the default value. A line skips objects such as images and inline-block elements

a {
    text-decoration-skip: ink;
}

It works in Chrome, Opera and Safari (and Safari on the poppy uses text-decoration-skip: ink by default).

Quotation marks (quotes)

Did you know that in CSS you can set the format of all quotes used on the site? There is a special property called quotes for this . It applies to the content of the tag , as well as to pseudo-elements with the content property equal to open-quote or close-quote .

q {
    quotes:  "«" "»";
}

q {
    quotes: "“" "”";
}

q {
    quotes: "\0022" "\0022";
}

The property has long been supported by all browsers.

Tuning multicolumn texts (orphans and widows)

The properties of orphans and widows can be called outsiders. Here, for example, what is written about one of them in the Mozilla documentation:

The CSS widows property determines how many lines should be left at the beginning of a new page on paged media. In typography, a “widow” is the last line of a paragraph that appears at the beginning of the next page. Setting the widows property prevents dangling lines.

On non-page media such as screen, the CSS widows property has no effect.

It looks like something useless for 99.9% of developers. Tell me, how often did you have to use it? If this happened at least once, please write about it in the comments.

But this is not all that these properties are capable of! For some reason, few have described that they work for multi-column layouts!

article {
  columns: 2;
  orphans: 10; /* минимальное число строк для всех столбцов, кроме последнего */
}

---

article {
  columns: 2;
  widows: 5; /* минимальное число строк для последнего столбца */
}

The question immediately arises: “What if both properties are specified for a block? Will they start to conflict? ” In such cases, widows takes precedence and is considered first.

In the context of page styling, properties have long been working everywhere except Firefox. Regarding column styling, they do not work in IE / Edge.

---

As you can see, among the little-known properties you can find a lot of useful things. Properties are just around the corner for more fine-tuning hyphens, text flow for different blocks (CSS Regions), decoration of frames (CSS Exclusions) and much more.

If you know other typographic innovations in HTML and CSS that already work in browsers, please write in the comments!