Avoid widows in webflow and use responsive fine typography for better web design [Workaround]

Hey,

if you’re searching for a possibility to style your typography in webflow exactly the way you wanted to, your in the right place. I was searching for a possibility to finally design the fine typography.

Here is what I found that is possible with Webflow right now.

Before:
it looks like this…

or like this…

After:

This is, what the typo in the heading should look like: No widow in the bottom line and as cherry on top a “triangle” in one direction (to the bottom in this case).

Ok, let’s see, how we can make use of it in Webflow.

  1. Add an “Embeded” Field for HTML input
  2. Put the code of your text structure in it
    <h1>…</h1> for a H1 Heading
    <h2>…</h2> for a H2 Heading
    <p>…</p> for a paragraph
  3. Write your text in the space
  4. Design the fine typography by using these codes and replacing the corresponding blank lines with them
    &nbsp; for a protected space (prevent wrapping)
    &shy; for a protected break (with hyphen)
    &#8203; for a predetermined breaking point (without hyphen)
  5. Style the tag for the text element you used.

To style the tag for the headline, follow this tutorial: HTML tags | Webflow University

It is relatively simple, but unfortunately not a no-code solution. I hope that Webflow will soon give a user interface to the responsive fine typo.

But at least we have a short-term solution for now. And I recommend voting for this wish on the Webflow Wishlist.

https://wishlist.webflow.com/ideas/WEBFLOW-I-1122?return_to_action=vote_6522613768567704485

Cheers
Hiram

PS: If you find a better option, please let me know!