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.
- Add an “Embeded” Field for HTML input
- 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 - Write your text in the
…
space - Design the fine typography by using these codes and replacing the corresponding blank lines with them
for a protected space (prevent wrapping)
­
for a protected break (with hyphen)
​
for a predetermined breaking point (without hyphen) - 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!