Advanced web typography (headings, text fills, inheritance, typography units) — web design tutorial



In this lesson, we’ll cover headings, text fills (knockout text using backgrounds or gradients), paragraphs, text inheritance, spans, typography units (including the all-new CH unit), and accessible, inclusive typography.

Steps in the video:
00:00 – Introduction
01:04 – Headings
03:50 – Text fills (knockout text)
05:08 – Paragraphs & text inheritance
07:59 – Spans
09:14 – Units
15:22 – Accessibility & inclusive typography
———-
Get started with Webflow:

30 comments

  1. Haha, this is one of my favorite videos by you guys and a very informative one. I liked the joke with the pen on screen, had to go back and confirm that it wasn’t there the whole time (psst. It wasn’t). Amazing video.

  2. I use webflow not because its best or functionality, but because their tutorial is so good and entertaining.

  3. Another perspective on em: setting size with em will return em times the size of the nearest ancestor.

  4. I love how you explained the use of direct CTA copy makes it's more accessible to everyone; I knew this was a better practice but not why!

  5. Stupid question, though (1:37 the newspaper): If H1 is "MEN WALK ON MOON", what is "ASTRONAUTS LAND ON PLAIN; COLLECT ROCKS, PLANT FLAG"? It can't be H1 because it's smaller and using italics, and I know the point you are making (hierarchy), but why wouldn't you consider "ASTRONAUTS LAND" as H2? I know it is a stupid question, but I couldn't help myself from asking @webflow

  6. I dangerously love this guy's sense of humour. If he was a rocket science professor I could have became a rocket scientists

  7. Tried to use rem unit for my headings yesterday and it didn't scale at all even though I set a smaller body font on mobile. Worked only with percentage or em units. But in that case conflicts with parent container font sizes cannot be ruled out.

  8. Please Webflow, don't ever change out your Webflow Explainer Guy, because he is amazing. He makes me excited to watch your instructional videos and wow, that's something I don't think anybody's ever said in the history of anything. 😂

  9. While I definitely DO love these videos (!!), I have a hard time understanding how Webflow made a video about advanced web typography without discussing responsive typography… Sure, some of the units are proportional, but that's only part of it. Would LOVE to see Webflow embrace the new CSS clamp function, giving us min/max values for font-size! Please go upvote it here: https://wishlist.webflow.com/ideas/WEBFLOW-I-3204

  10. Perfect blend in presentation of information and humor. Especially love all the subtle references to physics and Star Trek which make great points at the same time.

Leave a comment

Your email address will not be published. Required fields are marked *