Getting Started: HTML and CSS

[SOUND] Welcome to the final project of our web typography course. 0:00 Here we'll be putting everything we learned to the test as we 0:07 build out a one page site that heavily relies on typography. 0:11 As seen as an example in one of our stages, 0:14 CSS Zen Garden is a site that encourages web designers to explore the power of 0:17 CSS by showcasing different style sheets of the same HTML file. 0:21 I really like the site because it encourages participation in 0:26 the web design world. 0:29 You can enjoy all the different ways people took the design. 0:30 Also, it's a great learning tool to see how other well known 0:33 designers are handling different CSS and layout techniques. 0:36 We'll utilize the HTML provided from CSS Zen Garden, and 0:40 see how we can typographically create a unique version of the site through CSS. 0:43 Since the HTML is provided for us, I've built out our work space with it. 0:49 We won't be able to change any of the classes that have already been set up, but 0:54 that's okay, because it's been semantically written well. 0:57 And we can utilize child and 1:00 pseudo elements to access different parts of the page as needed. 1:01 We'll start with the basic style sheet that has all our classes and 1:06 elements within it. 1:09 A few margin and padding resets have been set up, but other than that I've left 1:10 the classes and elements empty that we've been styling out. 1:14 For reference for this project, 1:18 here's the barebones web pages that's currently displayed with our CSS and HTML. 1:20 This is where we're starting. 1:24 There's nothing too special here. 1:26 And here's the final version where we'll end up. 1:30 You can see we're using typographic hierarchy, different colors, and 1:33 change states to present the typography along with 1:36 different layout techniques with 1 column and 2 column and so forth. 1:39 I'm really excited to show you guys how to do this so, let's jump in. 1:43 As I read through the content I'll write down adjectives that I 1:47 feel like describe it, as this will inform us on choosing the colors and 1:50 typefaces to fit the mood of the content. 1:54 Some of the adjectives I wrote down were clear-minded, inspiring yet soothing. 1:57 I'll also want to do research on zen gardens in general. 2:02 This will inform design choices. 2:05 Some of the ideas that stuck out to me about them were minimalistic, 2:07 very neatly arranged, and full of white space. 2:11 With those thoughts in mind, I perused Google Fonts and 2:15 landed on Alegreya Sans as the body copy, 2:18 due to its wide range of weights, calligraphic nature, and humanist feel. 2:21 It also includes small caps which will be great due to the many 2:26 abbreviations utilized within the text. 2:29 Will pair it with the italic version of Alegria for 2:31 headings, since it complements the Sans version well. 2:34 And its heavier pen-like appearance feels like it fits a Zen garden. 2:37 It will also add some nice variety and helps distinguish hierarchy in the design. 2:41 For color, I landed on a palette inspired by real Zen gardens. 2:45 Our background will be a white with hints of gray and 2:50 yellow in reference to the sand in the garden. 2:53 Our main body font color will be a navyish gray symbolizing the rocks or 2:55 water in a garden. 3:00 And we'll also utilize a vibrant green for the moss, trees or bushes. 3:01 We also have some secondary colors that we'll be using here and 3:06 there that are based off of our primary ones. 3:09 I've left these as a comment in the top of our CSS file for reference. 3:12 If you want help in building out color palettes, 3:16 then I'd recommend checking out Adobe Kuler at Kuler.Adobe.com. 3:19 You can create your own palette with different color rules or, 3:23 you can explore other people's palettes for inspiration. 3:27 As we begin to get a good grasp on all this I wanna start sketching and 3:31 mapping out the structure of the site on a piece of paper. 3:35 We can sketch different iterations of what our site will look like for 3:38 mobile sizes to larger size screens. 3:41 I like doing this because, it's quick to get ideas down or change things around. 3:44 We're thinking at more of a macro level here, trying to typographically arrange 3:48 the content in a way that makes the most sense. 3:52 This helps us make choices about the layout without getting bogged down in 3:55 the details. 3:58 I also like the fact that this is not pixel perfect, so we'll be able to 4:00 make the right design choices as we build out the Fluid site and the browser. 4:03 Sometimes you may be given a predesigned layout which will be 4:08 translated on to the web. 4:11 In those cases, work closely with the designer and 4:13 make sure you're taking everything into account when it comes to the web, 4:15 which is not a static medium like a pixel perfect layout. 4:18 Since we have the HTML built out, let's begin by styling it through our CSS. 4:23 Before we just jump into styling each element, we wanna make sure we have our 4:28 body copy set up, as it will be our base size for everything else. 4:32 Notice that the color for our background is our sandy white and 4:36 our body font color is our navy grayish tone. 4:39 In Google fonts, I've already selected the different styles and 4:43 weights from the Alegreya super family that I'll need. 4:46 So since we can't change the HTML, we're gonna use the add import setting here. 4:50 So we can import it through our CSS. 4:55 I'll copy that, and add to our style sheet up here under the web fonts and hit save. 4:57 So notice all our web fonts are getting caught here on that one line. 5:02 Now we want to start implementing these fonts in our style sheet. 5:07 So first, I'll go down here and 5:10 grab Alegreya Sans, and set it as our body font. 5:12 And we'll set the fall back fonts to be Verdana, and 5:15 Tahoma, as those are similar humanist sans typefaces to Alegreya. 5:20 Next, I wanna set all our headings to be the serif version of Alegreya. 5:25 So we'll copy that code, and paste it into all our H1's to H6's. 5:29 Give it a fallback of Georgia, hit save, and 5:34 let's also give it a font weight of normal and a font style of Italian. 5:37 Let's save and check it out. 5:45 Great, so it looks like all our web fonts are getting called properly as we 5:47 see Alegreya in our headings and Alegreya sans as our body. 5:51 Currently, our font size is a little small. 5:55 And our line spacing down here is pretty tight. 5:58 So let's go adjust those for our body. 6:01 I'll head over here and we'll set our body font size to be 1.25m, 6:03 or 20 pixels, and our line height to be 1.6. 6:10 Let's check it out. 6:17 Great. That's much better. 6:18 It's much more legible and the line height feels comfortable here. 6:20 I'll also want to give my paragraph tags a margin of zero to keep consistent rhythm. 6:23 And we'll add a text indent for P plus P of 1.5 em, so 6:28 we can tell when the next paragraph starts. 6:32 Let's check it out. 6:38 Nice. 6:40 Although it looks a little crazy now because our font is spanning across 6:41 the whole browser, this will look much better when we get the measure in place. 6:44 Now, let's look at setting up a typographic scale, so 6:49 I'll head over to typescale.com. 6:52 And we'll give our font size here 20 pixels or 1.25 em, what we liked. 6:54 And I wanna use the perfect fourth for this. 6:57 We could set up Alegre Sans down here, but I'm just gonna grab these numbers for 7:01 our headings, so let's start doing that. 7:05 At 3.175 em, that'll be our h1s. 7:09 So we'll head over here and give our h1 a font size. 7:11 Of that. 7:16 Our h2 will be 2.369m. 7:17 And our h three will be 1.777m. 7:24 [SOUND] So this is our typographic scale which will help us keep it in place as 7:30 we change things responsively because they're set in ems, and 7:35 our HTML doesn't have any h4s, 5, or 6s, so 7:39 I won't set those up, but we'll wanna take note of these other numbers in 7:42 our scale as they could be helpful if we end up sizing elements at a smaller size. 7:48 So now, I wanna set our line heights for our H1's, H2's, H3's. 7:53 We'll head over here and 7:58 I'll give our H1 a line height of 1.1. 8:01 These are just guesstimates because I know my line height and 8:07 headings needs to be a little tighter, so we'll see where those end up. 8:10 I'll save and refresh. 8:14 So, let's drag our browser in to see when they break to the next line and 8:18 how our line height's looking. 8:21 It feels like it could be a little tighter, so I'll go in and 8:23 give our h2 a 1.15, and our h3 a 1.2, and save and check that out. 8:27 That's a little better, I like that. 8:36 Now I'll head over to basehold.it and grab the link to paste into my HTML file. 8:38 We won't be changing the html, as this is only for testing and 8:43 will be removed later. 8:47 I'll set the last number here to be 32 since our body line height of 1.6 is 8:48 multiplied by our body font size of 20 pixels to end up at 8:53 that number which will give us our vertical rhythm. 8:57 So we'll save that and check it out. 8:59 Great. So 9:02 our baseline grade is now showing up and 9:03 we see our paragraphs have pretty good rhythm down here. 9:05 But we're going to want to work on our headings. 9:08 So I'll start with our h2 and h3, 9:10 as our h1s are gonna be styled completely differently. 9:11 For our h2, we're going to set our margin of zero for the top, zero for the left and 9:16 right, and .54m for the bottom, and after testing our h3 some, 9:22 I found that I want to give it a margin of .9m for 9:26 the top 0 for the left and right and 0.62 em for the bottom. 9:30 So we'll refresh and we see that those margin changes have 9:35 now allowed our paragraphs to all line up on the baseline, so that's good. 9:38 Now we can comment out basehold.it as it's no longer needed at this point. 9:43 So, finally I want to set our abbreviations to be small caps. 9:48 So in order to do that we'll need to grab out small caps fonts family code, 9:53 and we'll want to head over to our CSS, and paste it into our abbreviation tag. 9:56 I'll also grab the fall back fonts for our body here. 10:03 And paste those as the fallback for this font family. 10:08 Now our abbreviations have been written in upper case in our HTML, 10:11 so we'll want to set out text transform to 10:14 lower case as our small caps are in the lower case version of that font family. 10:17 We'll hit save and check it out. 10:22 Great, so notice now we're using small caps for our abbreviations, and 10:25 it tends to flow a lot better with the text. 10:28 We've got a lot more work to go, but I'll stop here for 10:31 now, as our basic typography has been set. 10:33 This will be a foundation as we look at building out the different areas 10:36 of the site. 10:40