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

[Music] our goal here with typography is to cover the same principles used by design leaders throughout the industry not only typography that looks beautiful to humans but text that's been formatted with search engines and accessibility in mind that includes fonts and weights and size color and alignment and breaking and letter spacing after a few minutes it was obvious this dry list of properties wasn't going to cut it plus the screenshot of google we showed at the front had not one but three colors off from the proper logo so let's do this differently there's a lot to cover we have headings that'll include hierarchy and page organization indicators and tags which are magic we'll cover text fills that's knockout text using backgrounds or gradients we'll talk about paragraphs and text inheritance we'll talk about using spans to style parts of our text we'll cover different typography units and finally we'll cover advanced quantum key distribution except we won't because we'll use that time originally allotted for physics and instead cover accessibility and inclusive typography let's start with headings because they're more than just big text then when we add a heading to the project we have our immediate options we'll get to a lot of them but let's start with this question is it an h1 an h2 nh3 which is ammonia in terms of hierarchy it's helpful to think of our headings wherever they are on the page as content guides that is someone should be able to understand the way the content on our page is organized by glancing at the headings and a great way to think of this is the front page of a newspaper in this context an h1 would be the big statement on the page h2s would be smaller headings that fit into our big statement and h3s are even more detailed and something to note when styling headings there are two major ways to do this how you go about it will have serious implications for how you use this on the web for implications not now siri i've had it up to here don't even that's the big question here the big question is how should we style headings on the web and there are two things that factor into styling headings classes and tags so let's start with classes with our heading selected we can create a class we'll just click into the selector field and name a class we'll name ours big heading and hit return but you can name yours whatever makes sense to you and the class we created will remember all the styling changes we make so as we change the font or if we go and change the weight of our typography the class we made big heading we'll remember these changes any change is indicated by the label turning blue if we want to remove a change we just reset that property and of course when we want to reuse that class when we want those same changes those blue labels to apply to another heading we just make sure the new heading is selected click in start typing and select our big heading that's it and now if we change either of them that change is reflected on the other heading that's because we're not styling the heading itself we're styling the class we've applied to both headings our big heading class now we also mentioned tags this is the second and really powerful way to style headings for elements like headings and paragraphs text links we have special tags that let you change the default styling of all h1 headings so with any heading selected we can click in without even adding a class and we can go to the all h1 headings tag and changes we make here maybe we want all h1s to be a heavier font weight by default and maybe we want these h1s to be a different color we make the change here and now anytime someone adds another h1 it has that styling applied in fact with any h1 selected we can click on the amber colored indicator for font color and see that it's taking its styling cues from the all h1 headings tag and we'll talk more about tags in a moment because it's actually even more powerful than what we just covered but for now we want to talk more about styling classes and styling the text itself using text fills this uses what's called clipping text fills apply to the inside of the actual glyphs here's a heading by default the text fill is going to use the font color if we change the font color the text is predictably that color pretty straightforward and when we made that change a class was automatically created for us if we want we can click in to rename that class bigger heading but what about backgrounds let's go in and set a background on this text element and for right now let's make it a gradient and we can double click to go in and choose our first stop that's the first stop color and of course let's choose our second stop color same deal here now even if we adjust our angle here this isn't really the look we're going for because in order to clip our background to the text and not just sit behind the text we need to choose our clipping option and we'll clip it here to the text and that's it if we make a change to our gradient it updates inside the text in real time now we could put any background or even stack multiple backgrounds using this method in fact when the background is clipped to text it's going to ignore the font color and instead use whatever is set in your backgrounds section but that's text fills let's talk about paragraphs well paragraphs are a myth except they're real they're absolutely real here are several of them and we could use classes on paragraphs maybe we want 1.5 spacing in fact we can make our line height 1.5 and type the hyphen key and then return now we're using scalable unitless line height which scales proportionally with the font size but what happens when we want to apply this brand new style to other paragraphs well now we have to apply this to other paragraphs and this gets tedious but it doesn't have to be a few options here this is the real power of text inheritance in css and it works like this we can select our body element we can do this on any page and go over to style our body all pages tag and by the way if you already have a class applied to your page body you can get to the tag by clicking the little inheritance drop down thing but what is the body all pages tag this is our top level tag and a change here like the font will pass down through the hierarchy to all our text this is a great way to set defaults like our default font on a project even though we just styled the body all pages tag we can go into a more specific tag by selecting any paragraph and editing the all paragraphs tag maybe we want all paragraphs to have some more breathing room some more margin on the bottom so we can better differentiate between groupings but let's go further maybe we like our default font we said a moment ago but we want all paragraphs to be a different font right now if we click into the font we see it's taking its cues from the body all pages tag that makes sense considering we just did that but we can override we can change the font on all paragraphs without messing with other types of elements so we have a default font on our project that's being inherited by text everywhere we have a different font that just applies to paragraphs now what if we were slightly more extreme what if we wanted even more specific customization maybe we want this one paragraph to be styled differently yet again on this paragraph we can see that the font is coming from the all paragraphs tag but what if a class was applied well a class is automatically created on something the moment we style a specific property so if we just change the font it'll automatically create a class let's click in to rename that class we'll call it special paragraph and once we do that we unlock secret stealth superpowers because now we can go up and click in to see the entire inheritance hierarchy this paragraph is taking cues from the class which is taking its cues from all paragraphs which is taking its cues from the body class which is taking its cues from the body all pages tag which is taking its cues from john williams and that's inheritance in the context of paragraphs what about spans styling only part of a text element well here's a paragraph we know that because it says paragraph and if we double click to edit we can highlight any specific characters or words and bold them we can pick other words and italicize them we can pick a few more and add a link to whatever website we want and when we're done it looks like a dumpster fire so we can always select part of our text or maybe all of it and just clear formatting that clears bolds italicize stuff it clears links but there's one text formatting option that gives us nearly unlimited power the lesser known seventh infinity stone is span with any text selected we can wrap that text with a span and once we do we can create a class on that specific part of the text highlight and with that maybe we want this text to look like it's highlighted so we can just set a background color on the text itself of course we can change the font we can make any overrides we want and what's happening is the span is a more specific style on our selected text and that style builds off whatever we're inheriting from the paragraph and if we want to clear out that span same thing as before highlight the text clear formatting you know the drill that's wrapping things with a span let's move on to units starting with pixels and let's clear up something a lot of typography units on the modern web are set in pixels there's nothing wrong with pixels they're used by apple and sketch and stripe and google to set things like font size so by default we can set our font size in pixels that's what happens if we just type in a number and hit return but here's the problem as it relates to line height as we change the font size and pixels notice how things are starting to get crushed that's because if we want our line height to scale proportionally we have to set it to something that scales proportionally if we type 1.4 and then a little hyphen when we hit return we now set our line height to unit list the line height is 1.4 times whatever the font size is change our font size even if we change it quite dramatically the line height scales with it but we'll cover some other options here too starting with m's specifically on the font size and if you're curious about the etymology and m was originally based on the width of a typeface's capital m that's where m comes from it's phonetic also second piece of trivia it's why an m dash is called an em dash let's select this paragraph and set it to 1m let's set the font size to 1m and what's happening here what is an m and why is a pen on the top of the screen well when it comes to ms it goes like this every project has a default font size it's in the body all pages tag but you can change this let's make ours 16 pixels here's a paragraph in a div block inside the page body there's nothing typography specific we said on the div block and really nothing on the paragraph either so what that means for m's is this one m on the paragraph is going to equal 16 pixels that's because 1m is going to equal whatever font size this paragraph is inheriting in this case it's inheriting the font size from the body all pages tag but it scales proportionally so 1m is 16 pixels 2 m's that's 32 pixels 1.5 ms is 24 pixels makes sense but check this out we can also set the font size on its parent the div block called card layout 20 pixels on the div block here now the paragraph is sized based on that because the div block we just messed with is more specific than the body one m is now 20 pixels two m's is 40 pixels three m's you get the idea again m's look to their parents and scale the font size proportionally however what if our paragraph is set to 1.5 ms and the div block is set to 1.5 ms as well well here's where inheritance and trigonometric calculus collide but if you don't want to keep track of nesting especially in hierarchically complex typography it's not how you say higher arc clearly no it's hierarchically it's irish hmm higher cli it comes from character there's no way that's right i have spoken you can always use rems root m's let's go back to our same example it's a mess but none of it matters because rems instead of being sized relative to their parent and that parent's parent rems are relative to the html font size which is going to respect the browser's default font size if we go into our chrome settings for instance we can set the browser's default font size which is usually 16 pixels in fact let's leave it where it is for now and wherever we are in the hierarchy setting something to one rem will equal 16 pixels it skips all the other mess and goes straight to the root these are root m's rems that means two rams 32 pixels three rems 48 pixels and all of this is constant even if you change literally all the numbers in between because a ram is calculated by taking whatever your rem value is and multiplying it by the html font size which unless you manually change it in the code will respect the browser's font size this has the benefit of respecting a user's browser preferences if a custom text size is set on the browser in addition to ms and rems we have percentages like m's the percentage is going to refer to the parent element font size we also have viewport width vw of course is both a measurement of the width of the browser's viewport and a manufacturer of the passat and when we set a text element to vw it will scale proportionally based on the width of the viewport and of course we have ch this one's great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line we'll talk about that in the next section but here's how ch works if we set a paragraph's maximum width to 60 ch what happens nothing because we have to return but when we do it now has this seemingly arbitrary maximum width but it's not arbitrary at all it's taking the selected font the typeface we're using on the paragraph and setting the paragraph's boundary it's box to 60 of that font's number zero don't believe it here's sixty zeros let's count one two three four five six seven eight nine ten eleven twelve thirteen yeah i'm gonna ask him to cut it how much nobody needs to see you count to 60. yeah i'm cutting it what's gonna be there instead nothing we can just cut right as i finish my sentence so ch lets us set the width on a text element if we're trying to limit the number of characters and it bases that width on the fonts 0 character now when it comes to font size in most cases pixel values are a safe bet we have alternatives like m's rams percentages viewport width ch is and the best way to get familiar with all of these is to try them out inside a project to see how they interact we can see these changes right on the canvas and simulate browser and device widths at any time and of course we have full documentation on all these units in much more detail so check that out on webflow university if you haven't yet done so let's move on to accessibility and we'll cover a lot of characteristics of more inclusive design here these are all important things to consider when designing for the web and we'll do nine of these here first is font legibility thin fonts were a huge trend back in 2013 or so but let's push this to an extreme to prove a point fonts that are ultra thin are extremely difficult to read not only in headings but especially in paragraphs this is also the case with uneven weight distribution there's these kind of characters which aren't very legible so consider how legible your fonts are second is alignment of text especially as it relates to paragraphs something to consider here this is pretty big a jagged or uneven rag in typography this is a rag the whole thing can create a sort of disjunct reading experience and this is really evident on centered text because that jagged alignment this kind of rag makes it really tough for the reader to follow the text from line to line so it helps to consider alignment and how that alignment contributes to legibility next is all caps languages that distinguish between capitalized and lowercase letters are often far more legible when written in sentence case or title case that is where you write out the text by using capitalization only where it's needed or expected that's because all caps can introduce a heavier cognitive load for the reader especially in longer paragraphs consider limiting the use of all caps on longer strings of text as you're designing and iterating on your typography number four underlines there's an expectation on the web that underline text means a thing is a hyperlink if you want to or you need to draw emphasis to something consider italicizing or bolding it or even making stylistic changes by wrapping things with a spam as we covered earlier in this lesson number five is contrast this one's huge and we can all do better here contrast in this context is the measurement of the difference between background and foreground low contrast would be somewhat lighter gray on somewhat darker gray or maroon on red or purple on pink or in this extreme example retina warning pure red on pure blue you can use a contrast checker there are tons of these available for free to input or measure your foreground color the text against the background color usually a solid color or gradient or maybe an image now high contrast doesn't mean we stop considering other things like font weight a super thin font weight that happens to have high contrast against the background is still super illegible but higher contrast usually leads to increased legibility which is a great thing on the web next up is characters per line we like to look at stripes documentation as a great example here it's legible and it uses a container to constrict how far the text goes horizontally if that container width didn't exist someone's eyes would have to travel really far from left to right much easier to track with a container and like we covered earlier one way to do this is to set these limits on the maximum width of a text element to however many characters we want in a line 60ch is equal to 60 zeros on whatever font you've selected then we have line height here's a line height of one we're using the unitless option the hyphen from the drop down that means whatever the font size is we're basically saying the height of each line of typography is equal to one times that font size way too close at minimum 1.25 is a tiny bit of breathing room but more space between each line of text makes it much less heavy looking and much easier to track the end of one line and the start of the next so consider line heights as your optimizing text for legibility next is the penultimate note on the topic clearly defined links here's a pattern we see a lot to learn more and download this proposal click here emphasis on here because that's the link but it's not actionable technically it is you can click it but the link doesn't describe the action instead using a much more direct description of the action makes the link far more relevant to learn more download the proposal in this case the link directly describes the action that'll happen when you go to the link but there's another reason this is important and that leads us to our last and one of the most important points here navigation through a document through a web page or even a full site should be tested not just for what it'll look like but for how you can interact with it using a screen reader this is a great way to develop an understanding of how people can navigate your content and if it's just a link that says link here's what someone hears if for instance they're tabbing through the document voiceover on system preferences entering screen reader example web content link here link link link link and that's a critical thing to consider when designing now there's tons to consider here and we're adding more and more teaching to webflow university on the topic of accessibility and inclusive design so keep checking back for more and more on the topic but that's our last point on the topic at least consider the legibility of your typefaces consider how text alignment affects readability same thing with all caps consider limiting your use of underlines so they're only associated with links think about contrast as it relates to legibility and the searing of a user's retinas keep an eye on the length of each line and the space between each line line heights think about active descriptive text when creating links and always consider how your design is interpreted from all different kinds of browser experiences including utilities like voiceover but that's our overview and we covered a lot today we covered headings and how to use classes and tags to keep things consistent we covered text fills and knockout text we did paragraphs and inheritance we covered wrapping text with spans to style only part of a text element we covered units we avoided a conversation about key distribution and quantum physics and we went over some inclusive best practices to consider when making our designs even more accessible and that's an overview of typography on the web

Channel: Webflow

Views: 64,128

Keywords: web design, webflow, responsive web design, graphic design, web development, cms, content management system, web design tutorial, css text effects, css heading styles, html tags, webflow text animation, css inheritance, css em vs px, webflow university, webflow text, webflow span, webflow accessibility, css typography, webflow tutorial 2020, web designer career, web design inspiration 2020, text span webflow, webflow tutorial, webflow typography

Id: J2846GiZuLA

Length: 21min 27sec (1287 seconds)

Published: Thu Aug 06 2020