A typographic widow is what happens when text wraps and puts a single word on the second line, e.g.:
One year on and what next for remote
working?
Applying text-wrap: pretty; avoids that, making a better wrapping:
One year on and what next for
remote working?
While many typographic widows can be avoided editorially, applying pretty avoids them in responsive contexts as well. This should be applied globally across the entire platform, as part of a baseline set of CSS:
/* Progressive enhancement to reduce widows and orphans. */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
text-wrap: balance; /* Fallback for Safari/Firefox which do not support pretty. */
text-wrap: pretty;
}
p {
text-wrap: pretty; /* Omit the Safari/Firefox fallbacks, as balance is too agressive for paragraphs. */
}
A typographic widow is what happens when text wraps and puts a single word on the second line, e.g.:
Applying
text-wrap: pretty;avoids that, making a better wrapping:While many typographic widows can be avoided editorially, applying pretty avoids them in responsive contexts as well. This should be applied globally across the entire platform, as part of a baseline set of CSS: