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
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow

Пікірлер: 133

  • @lynnemarie7885
    @lynnemarie78853 жыл бұрын

    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. 😂

  • @robertfigueroa425

    @robertfigueroa425

    5 ай бұрын

    100 percent agree. he is so badass!

  • @ziyingtan7668
    @ziyingtan76684 жыл бұрын

    This is literally the first time I understand the difference between "em" "rem" and learn about "ch" !!! Thank you Webflow and Mr.Webflow!

  • @wyattcoe8825

    @wyattcoe8825

    4 жыл бұрын

    SAME! I had know idea what those values were measuring before this video.

  • @youkba

    @youkba

    2 жыл бұрын

    You meant 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000

  • @druhin
    @druhin4 жыл бұрын

    Ok, I'm dropping my design school to join Webflow University 🙏🙌❤️

  • @ranawahid1522

    @ranawahid1522

    4 жыл бұрын

    🤣🙌🙌🙌

  • @tylerpixel

    @tylerpixel

    3 жыл бұрын

    This with Ran Segall's 10k Website Process course you'd have a WAY higher chance to be making more than the average design graduate within mere months.

  • @billsomen7953

    @billsomen7953

    3 жыл бұрын

    Lmao

  • @BobHagglundWA
    @BobHagglundWA4 жыл бұрын

    Great overview. Funny, but serious at the same time. That makes the 21 minutes fly by and the information memorable.

  • @josedanielgarcia2190
    @josedanielgarcia21903 жыл бұрын

    This guy is just the best teacher ever!!!!! Literally every joke is delivered at the right time.

  • @ShutterlabCreative
    @ShutterlabCreative4 жыл бұрын

    You guys aren't skipping a beat on the comedy. I look forward to more and more advanced tutorials from you guys!

  • @carpathianshepherdess4990
    @carpathianshepherdess49904 жыл бұрын

    Oh my gosh. my jaw literally dropped when he showed text fills. Webflow is amazing. And these tutorials are GREAT. I love how clear they are -- and funny ^_^

  • @franciscot
    @franciscot3 жыл бұрын

    I thought it wasn't possible but Webflow keeps making its tutorials even more packed with knowledge and even more entertaining.

  • @grcooley
    @grcooley3 жыл бұрын

    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.

  • @ZohebDesai
    @ZohebDesai3 жыл бұрын

    One of the few times I'm happy with KZread Recommendations! This is gold! Great work guys!

  • @Ifeomailloh
    @Ifeomailloh4 жыл бұрын

    Thank you webflow. Just recently started building my brand new site on the platform, moving from WordPress. It's been quite a sweet learning process and the output really looks good. Not to mention I learn that highlighting a specific word is done through span. I tried figuring that out for a while in the website builder.

  • @NH-en6et
    @NH-en6et3 жыл бұрын

    Thank God there's these videos. Perfect mix of informability and humor. Thank you WF! First time user with no experience and it's daunting.

  • @kylepitocchelli1738
    @kylepitocchelli17384 жыл бұрын

    Great work! So much valuable info packed into an entertaining experience.

  • @ongong9726
    @ongong97263 жыл бұрын

    I have not ever laughed by a course lesson. This one is exceptional!

  • @arnze
    @arnze3 жыл бұрын

    Amazing job by the webflow team! Love the tutorials and the humour gone into them!

  • @Webflow

    @Webflow

    3 жыл бұрын

    Thanks for your kind words, Arnold!

  • @anastasiastallcop8963
    @anastasiastallcop89633 жыл бұрын

    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!

  • @cweb1988
    @cweb19883 жыл бұрын

    webflow trainings are the best. Such good teaching....and entertaining.

  • @kidztse
    @kidztse2 жыл бұрын

    I am definitely sticking to Webflow for how you guys consider accessibility! Great great job!

  • @jaharitucker3953
    @jaharitucker39532 жыл бұрын

    Best Brand/Company ever created...literally a tv series and a god tier tutorial video

  • @uilifecteau4841
    @uilifecteau48414 жыл бұрын

    Great work Webflowers. Informative with a good balance of levity. Classic episode. I have spoken.

  • @Webflow

    @Webflow

    3 жыл бұрын

    This is the way.

  • @SRG-Learn-Code
    @SRG-Learn-Code3 жыл бұрын

    A trully masterpice. Best film about web I've ever seen.

  • @philipbenjamin4720
    @philipbenjamin47204 жыл бұрын

    Watching these videos is an absolute joy. They are actually AFFIRMING. Why? Because they give us reasons for why we were bewildered by a host of previous products and documentation - we didn't understand because they were all over the place - poorly designed and poorly explained. Those of us who have been bewildered fall into two groups: - we had the confidence to realise our failure to understand wasn't our fault - we didn't have that confidence. For the second group their not understanding was soul destroying - it's so tragic I can't bear thinking about it. I'm 55 years old and I have wanted to understand this stuff for years. I sense though that my waiting until now was for a reason. I think we are about to see an era in which power is going to be given to people who are going to use it far more responsibly.

  • @calicollective
    @calicollective2 жыл бұрын

    Dude keeps making me laugh out loud every video, good job Webflow, looking forward to more video courses.

  • @damjan9548
    @damjan95483 жыл бұрын

    OMG i LOVE the mix of COMEDY and KNOWLEDGE! THis has became my go to videos during lunch brake! Exept it didnt! LOL 😂

  • @person81045

    @person81045

    3 жыл бұрын

    I feel its illegal for me to watch these and enjoy it.

  • @danielmeador253
    @danielmeador253 Жыл бұрын

    You guys are literally pulling me by my bootstraps out of the nightmare that is dreamweaver. Bless you.

  • @vaniarensi2326
    @vaniarensi23263 жыл бұрын

    Happy and proud to have chosen Webflow.

  • @cryptified5161
    @cryptified51616 ай бұрын

    Really great work here!

  • @ahmedmaher201
    @ahmedmaher201 Жыл бұрын

    Super! Not only for using Webflow but the web itself. Thank you team

  • @MenicaFolden
    @MenicaFolden4 жыл бұрын

    We are so lucky to have you guys

  • @michaelklepacz
    @michaelklepacz3 жыл бұрын

    Best web design university. Hands down.

  • @valeriab.6224
    @valeriab.6224 Жыл бұрын

    "What happens? Nothing! Because we need to press 'return' button" xD xD omg guys you are so hilarious, and it's so much fun to learn all this stuff with such humour! Thank you!

  • @mrED123
    @mrED1232 жыл бұрын

    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.

  • @augusztinabenak1638
    @augusztinabenak16383 жыл бұрын

    This one is hugely informative. Thanks!

  • @vrajmalvi7194
    @vrajmalvi71944 жыл бұрын

    Great job webflow keep posting 🙏

  • @Webflow

    @Webflow

    3 жыл бұрын

    We're on it! Thanks for your kind words, Vraj Malvi!

  • @hasithashan
    @hasithashan3 жыл бұрын

    Max and min font size seems like a no brainer feature to implement. Great video regardless!!

  • @illdesign.studio8724
    @illdesign.studio87243 жыл бұрын

    I love watching these videos.

  • @Webflow

    @Webflow

    3 жыл бұрын

    So do we. 😍

  • @travelingjon
    @travelingjon4 жыл бұрын

    You are a tutorial boss! Thank you!

  • @dsi-films1264
    @dsi-films12644 жыл бұрын

    Such a great video ngl the jokes here and there are great

  • @Begaya23
    @Begaya233 жыл бұрын

    This is so great! Thank you 🥰

  • @uxniels
    @uxniels3 жыл бұрын

    Good job! Really great tutorial. You should talk even more about Accessibility!

  • @Webflow

    @Webflow

    3 жыл бұрын

    Thanks, Niels M. for your kind words! We’re on it - more about accessibility coming - stay tuned!

  • @perderlaprisa
    @perderlaprisa3 жыл бұрын

    My SEO friend must be crying seeing that many H1 headings per page, so some free tips for you guys. SEO 101: First you have to understand that Google use headings to list the website, so headings are mostly a SEO HTML tag. Usually you want to have ONLY ONE H1 per page. That must be the most important thing in your webpage. If you are a creative studio and your Home Section is something like "WE DO AWESOME THINGS FOR AWESOME COMPANIES" in big letters, you might think that that's your H1. But nope. That actually I would say it must be just a div with big letters, nota Heading at all, since it's most likely a UX heading than a SEO heading. Your H1 heading in that page will probably be a tiny text in top of that big text that says "CREATIVE STUDIO BASED IN LONDON". Bang, that's your H1. It's descriptive and it's good. People won't search on Google "awesome things for my awesome company", they will search exactly "creative studio in london", so that must be your aim with the H1. For H2 you can do the exact same thing. For your products or services section, you can put a big text UX oriented in a div and then, in top of that, a little text like "DIGITAL PRODUCTS FOR STARTUPS". I'm not sure how to do this in Webflow since I didn't have the oportunity to use the tool yet, but it must be simple I guess. In traditional frontend development, I usually style h1 headings some way and then create classes named "h1", "h2", "h3"... So I can distinguish between SEO tags () and UX classes (.h1). I hope I explain myself correctly. If there's any SEO expert out there that want to specify in this matter, please go ahead :)

  • @akashchoudhary5736
    @akashchoudhary57364 жыл бұрын

    Very informative video, thanx a lot for this

  • @meowzers4380
    @meowzers43802 жыл бұрын

    omg im so happy i found webflow, now I ca nactually build what I have in mind instead of fighting wordpress lmao

  • @AlexandruNastase
    @AlexandruNastase3 жыл бұрын

    That pen on top of the screen got me laughing so damn hard had to rewind 3-4 times :)))) this is proper education, for webflow and everything else there is! As another commenter put it, other teachers/trainers now put me to sleep :( Webflow ruined me for everybody else :)))

  • @rexrex8664
    @rexrex86643 жыл бұрын

    Thank you for this! It is so entertaining and I learned a lot

  • @Webflow

    @Webflow

    3 жыл бұрын

    Thank you, Rex! Glad it was helpful!

  • @MrSlickBobby
    @MrSlickBobby3 жыл бұрын

    This guy should be on TV. He is a legend. I want to get drunk with him. I am buying. LOL

  • @amitnaamani5702
    @amitnaamani57024 жыл бұрын

    Mind. Blown.

  • @TechnoPel
    @TechnoPel4 жыл бұрын

    This is 🔥

  • @osherezra8460
    @osherezra84603 жыл бұрын

    Great one keep it up

  • @hamishmaclean1629
    @hamishmaclean16294 жыл бұрын

    $5 of my monthly webflow subscription goes to this and that is ok!

  • @fatmasheikh4560
    @fatmasheikh4560Ай бұрын

    Thanks 💜

  • @wpyke
    @wpyke4 жыл бұрын

    Is there a way to make the text become a gradient on hover from a black colour?

  • @bendrechsel891
    @bendrechsel8913 жыл бұрын

    11:50 , my favorite Siri interjection yet :D

  • @jjj6390
    @jjj6390 Жыл бұрын

    omg 01:15 that ammonia joke 😂😂😂😂😂😂😂😂😂😂

  • @framerprojects
    @framerprojects3 жыл бұрын

    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.

  • @Webflow

    @Webflow

    3 жыл бұрын

    Hi, Dule! 👋 Rem doesn’t look to the body; it looks to the HTML element, which, unless you override it manually, will respect what the user has set on their browser (16px usually). Rems don’t conflict with parent containers because it ignores them entirely.

  • @LeahJacksonMedium
    @LeahJacksonMedium2 жыл бұрын

    😍 thank you 🙏🏻 also 😆

  • @MaxWeir
    @MaxWeir4 жыл бұрын

    Double thumbs up for accessibility

  • @heyjayrajput
    @heyjayrajput3 жыл бұрын

    Are these tutorials available on webflow university? Under which course name??

  • @Emotioneler
    @Emotioneler4 жыл бұрын

    When Siri said "I have spoken" I lost my shit

  • @OliverHoffmannDesign
    @OliverHoffmannDesign3 жыл бұрын

    Nicely done. Extra credit for crediting the maker of the Passat.

  • @Webflow

    @Webflow

    3 жыл бұрын

    Absolutely! Thanks, Oliver!

  • @michaelallmis2925
    @michaelallmis29252 жыл бұрын

    It's so epic

  • @transmediasamurai
    @transmediasamurai3 жыл бұрын

    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

  • @anasztaziasandor521
    @anasztaziasandor5212 жыл бұрын

    Hi! What is the platform you are building this website on?

  • @Webflow

    @Webflow

    2 жыл бұрын

    This is built on Webflow. Check it out at webflow.com

  • @normthomas5028
    @normthomas50284 жыл бұрын

    Still no text outlines? Great updates though. Me likey!

  • @orbelg9861
    @orbelg98614 жыл бұрын

    I don't have Netflix I watch these tutorials for entertainment

  • @JakePomperDesign
    @JakePomperDesign4 жыл бұрын

    Freaking dope

  • @dawahfortawheedofallah5624
    @dawahfortawheedofallah56243 жыл бұрын

    What software you are using?

  • @liv2.9

    @liv2.9

    2 жыл бұрын

    Webflow

  • @humility0is0a0virtue
    @humility0is0a0virtue3 жыл бұрын

    *HOW* did I miss *ALL* of this?!

  • @dolamaru
    @dolamaru2 жыл бұрын

    nh3.. which is ammonia

  • @alexanderpusch5280
    @alexanderpusch52804 жыл бұрын

    Amazing content as always! By the way, I directly tried out the clip to text function but nothing worked out as shown in the video. I did everything as described. Maybe someone has the secret sauce to making it work out like shown by the Webflow guy? 😩🙌🏼

  • @Webflow

    @Webflow

    4 жыл бұрын

    Hi, Alexander! Are you applying your background and setting Clipping on the text element itself?

  • @_thealexpu

    @_thealexpu

    4 жыл бұрын

    Webflow This is my other account. So I built the body, then Div, then Header. Chose header in the navigator. Clicked background and set a a gradient with two different colors. Then clicked on clipping but nothing worked in the drop down options as shown in the video.

  • @Webflow

    @Webflow

    4 жыл бұрын

    Sorry to hear this isn't working as expected! Would you mind sending an email to support@webflow.com with a read-only link to your project? We can try and dig in to see what's going on. university.webflow.com/lesson/share-your-project-and-invite-collaborators

  • @jonreesedotcom
    @jonreesedotcom4 жыл бұрын

    11:59 - 12:10 💯😆👏🏼

  • @ibtechteam
    @ibtechteam3 жыл бұрын

    I think you had a small mistake on 11:35, Body (all pages) tag should have a pixel size of 16 , great video nonetheless!

  • @excmax
    @excmax4 жыл бұрын

    👏👏👏

  • @qaerdogan
    @qaerdogan4 жыл бұрын

    What is the name of Design software which you are using on this video?

  • @Webflow

    @Webflow

    4 жыл бұрын

    This is Webflow - check it out at webflow.com!

  • @EshanAnas

    @EshanAnas

    4 жыл бұрын

    @webflow - and for the video edits, what software do you use? Is that Adobe premiere only?

  • @Webflow

    @Webflow

    4 жыл бұрын

    Hi, @@EshanAnas! Thanks for the question. Wee use a handful of tools - DaVinci Resolve, Adobe Premiere, Adobe Photoshop, Cinema 4D, OctaneRender, and of course, Calculator. 👍

  • @archrao2103
    @archrao21033 жыл бұрын

    Could you guy please do some videos on how to build a business as a WebFlow designer?

  • @Webflow

    @Webflow

    3 жыл бұрын

    Have you checked out The Freelancer's Journey? It's a free course we made that covers exactly this topic: university.webflow.com/courses/the-freelancers-journey

  • @kismetology8031
    @kismetology80314 жыл бұрын

    this guy is hilarious

  • @yehudaraice
    @yehudaraice4 жыл бұрын

    does gradient text clipping not work on safari?

  • @Webflow

    @Webflow

    4 жыл бұрын

    We’re aware of this issue and are working on a fix - the text clipping works on published sites but doesn’t display correctly in the Designer. We’ll update here as soon as we learn more!

  • @yehudaraice

    @yehudaraice

    4 жыл бұрын

    @@Webflow you guys rock

  • @riamioch8403
    @riamioch84034 жыл бұрын

    Nice video, but the new function clipping does not do anything. Don't know what I'm doing wrong.

  • @Webflow

    @Webflow

    4 жыл бұрын

    Can you send an email to support@webflow.com with your Read only link? university.webflow.com/lesson/share-your-project-and-invite-collaborators We'd love to dig in and take a look!

  • @riamioch8403

    @riamioch8403

    4 жыл бұрын

    I see the problem. I standard work in Safari, and that does not work. Chrome does.

  • @ziyingtan7668
    @ziyingtan76684 жыл бұрын

    WARNING! Turn down your screen brightness at 17:30!!! (Yet I am laughing so hard when they explain "contrast" like that LMAO)

  • @Abdurrahman-wp9ul

    @Abdurrahman-wp9ul

    4 жыл бұрын

    My eyes shocked for a moment

  • @xamznerol
    @xamznerol4 жыл бұрын

    My last question, after how many classes do I end up in hell? Imagine that every company would make such wonderful videos. No one would need Netflix anymore.

  • @EshanAnas
    @EshanAnas4 жыл бұрын

    I watch web flow tutorials for entertainment purpose only.

  • @WalterKimaro

    @WalterKimaro

    4 жыл бұрын

    Me too, I mean every now and then they drop in some stuff I didn't know like the ch unit but I come here strictly for the humor.

  • @pierrickveya
    @pierrickveya3 жыл бұрын

    How to edit a text behind elements?

  • @Webflow

    @Webflow

    3 жыл бұрын

    Hi, Pierrick Veya! If text is behind other elements, you can select that text element in the Navigator and simply press the Return key on your keyboard. From there, you should be able to edit the text.

  • @pierrickveya

    @pierrickveya

    3 жыл бұрын

    @@Webflow Thank you! Works great!

  • @Webflow

    @Webflow

    3 жыл бұрын

    @@pierrickveya You got it! Glad it worked out okay! 👍

  • @amkomura
    @amkomura3 жыл бұрын

    what is his name? he's the best!!!!!!!!!!!!!!!!

  • @philipstancil264
    @philipstancil2643 жыл бұрын

    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: wishlist.webflow.com/ideas/WEBFLOW-I-3204

  • @shubhambhardwaj921
    @shubhambhardwaj9213 жыл бұрын

    NH3 which is ammonia 😄

  • @misssunshine5932
    @misssunshine59323 жыл бұрын

    This guy is the one who I spend more time than my husband. haaha

  • @booshong
    @booshong3 жыл бұрын

    It's possible I'm missing some advanced humor, but is there some extraneous audio at 0:23? edit: oh wait...is it supposed to be a joke on how there are so many css text properties?

  • @IanDeRanieri
    @IanDeRanieri2 жыл бұрын

    An H3 (which is ammonia) made me spit out my food.

  • @MohanaKumar-xy5xm
    @MohanaKumar-xy5xm5 ай бұрын

    You never explained how we could align 2 paragraphs side by side horizontally!! 🤷

  • @kingech_B15
    @kingech_B153 жыл бұрын

    Siri needs a time out.

  • @Akshat_psd
    @Akshat_psd3 жыл бұрын

    Ammonia 😂😂

  • @Webflow

    @Webflow

    3 жыл бұрын

    We tried other chemistry jokes, too, but none of them got a reaction.

  • @Akshat_psd

    @Akshat_psd

    3 жыл бұрын

    @@Webflow I'll react to everyone of them then 😏

  • @XPilotP

    @XPilotP

    3 жыл бұрын

    @@Webflow genius

  • @Flocksta
    @Flocksta3 жыл бұрын

    Retina warning lmao

  • @murraywestenskow2896
    @murraywestenskow28963 жыл бұрын

    How do I contact this guy - to double his salary - and let him lead a development team?

  • @jayantthakur1860
    @jayantthakur18607 ай бұрын

    Ae yo Why my Siri ain't so smart,

  • @iamtommyok
    @iamtommyok3 жыл бұрын

    I feel like the last part of this video was a P.S.A. to all web designers; please do better with your typography.

  • @Webflow

    @Webflow

    3 жыл бұрын

    We feel very strongly about this, too. Stay tuned - there's plenty more coming regarding inclusivity and accessibility!