Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing typography

From: CSS: Frameworks and Grids

Video: Customizing typography

The whole point of using a CSS framework is to take as much of the tedium of writing styles away from you and then just let you get on with the business of designing or developing a site. However, regardless of which framework that you choose unless you have absolutely no interest at all in styling your page content, you'll still probably need to do at least some minor modifications to your site's typography. In this exercise we're going to go back our SimplePrimate site and focus on modifying the framework's default typographic styles. And I just want to preview that really quickly for you in the browser.

Customizing typography

The whole point of using a CSS framework is to take as much of the tedium of writing styles away from you and then just let you get on with the business of designing or developing a site. However, regardless of which framework that you choose unless you have absolutely no interest at all in styling your page content, you'll still probably need to do at least some minor modifications to your site's typography. In this exercise we're going to go back our SimplePrimate site and focus on modifying the framework's default typographic styles. And I just want to preview that really quickly for you in the browser.

Here we can see what our SimplePrimate site looks like with just the default Foundation styles applied to it. Now if I was okay with the fonts that were being used and the sizing of the text, that sort of thing, then I really wouldn't need to do much modification at all. Obviously I want to change this up a little bit, so I am going to need to modify a few things. Now the first thing that I want to do is I want to enable use of the web fonts. Web fonts allow us to use fonts that are not typically system fonts, like Geneva, Arial Times New Roman, Georgia things like that. It allows us to a much wider palette.

Now there are a several different ways of using web fonts, one would be to host them yourself, another would be to use a service like Typekit or Google Fonts API. But there is a new one on the block right now that Adobe just released called Edge Web Fonts. You learn more about this at the Adobe Edge Web Fonts site, but this is a really, really simple service to use, and it's free. All you have to do is locate the font that you want, choose it and then you just copy and paste some code on to your site, which is really cool. This exercise is not about Adobe Edge Web Fonts, this is just about sort of customizing our blog's typography.

So rather than go too deep into this service, I am just going to write the code for you that allows me to use the fonts I want to use. Feel free to go, learn more about the Edge Web Fonts just from this site. It's really easy to use and the documentation is very good. So I am going to go back into my index page. I like to save a little bit of time by copying and pasting things rather than typing them again, and for my web fonts, all I need is another script tag down here and instead of pointing to modernizr I am going to change the source of this. I am going to change this to http://use.edgefonts.net/ and then the name of the font that I want, lato.js, so there we go.

So that's one of the fonts that I need, and I am going to copy this and paste it. And this time all I need to do is change the name of the font from lato to cardo. So there are fonts I want, lato and the cardo, and I did not realize until that exact moment that those two rhyme. Now if you look in the Edge Fonts documentation, it's going to actually advise you to not use the protocol. But I have found that if you leave the protocol off, it doesn't allow you to test them locally, so I went ahead and added a protocol, I would probably remove that for deployment. So if I save this and test it, I am not going to see anything, because I haven't defined any of these fonts yet, all that that is allowing me to do is to use the font lato and use the font cardo in my site.

So it's just a link out to the web font service, and it pulls those fonts in. Okay, so now I am ready to actually go in and overwrite some of the Foundation's default typography. To do that, I am going to work in our custom.css file. Again, if you're working in an Editor like Dreamweaver that allows you to go back and forth, you can go ahead and do that, or you can open up the custom.css from the _css directory. I am going to go right into my Global resets, because that's what we're setting right now, sort of these broader scoped styles. And I am just going to start off with the body tag, and I am going to set a font-family for that.

And the font-family is going to be Lato, the font we just used comma Arial, so I am providing it a fallback and then sans-serif that's going to be the last fallback there. Below that we're going to give it a font-weight of 500, and we're going to give it a font-style of normal. Whenever using web fonts, it's a really good idea to go ahead and state the weight and style that you need, even if it's normally-- body font style would be normal, but since I am using web-fonts, I want to be very explicit about that.

Next thing I want to style is my heading, so I am going to create a selector that styles my h1, h2, h3, h4, h5, and h6. Now if you are not going to use all of your heading levels, you might not need to do that, but I'm just going to use all of them just in case. And for this one I am going to also do font-family and here I am going to do Lato, Arial, sans-serif, font-weight: 200. Now yes, I am being a little redundant here, I don't necessarily need to establish the font-family again.

I am just doing that so that if anybody else were to come in and take a look at my styles, they could see exactly what I was going for, for the headings there. For my paragraphs, for that one I am going to use a different font-family. So here I am going to do font-family, and this time I am going to do Cardo. Now Cardo is a serif font, so I am going to give it a fallback of a couple of serif fonts, Georgia, Times, and then finally just the default serif. And I am also going to set its font weight to normal as well, so I am being very careful about explicitly stating the weight I need for each of these.

And then finally, one of the things that I want to customize are the button styles. I have noticed that for the default buttons they have explicit font declarations to them as well, so a lot of times you're going to have to dig through the actual framework's code to figure out which styles you need to overwrite. So I am going to do a class selector of button, and inside that I am going to do a font-family of Lato, Arial, and sans-serif, and yes, it will be a good idea to save this as a code snippet if I didn't want to type that out each time, and I am going to do a font-weight of 700, so much thicker for those guys.

All right, we're going to go ahead and save that. If I save this page, go back into my browser and refresh this, you can see that we get a little bit of a subtle change here. I didn't change any of the size of the text yet, but I did set the font that I want for those specific elements, and for my page in general and set the weight for it as well. At this point it's kind of odd because I'm doing the typography before I do layout. I don't know, you might work a different way from me, but what I typically do when I'm designing a site is I'll do the layout first and concentrate on making sure that all the different regions are sort of where they need to be on the page and then I go in and start working on the typography.

So I am kind of working backwards a little bit and the reason for that is the very next chapter is going to be on working with grids, so we'll tackle layout then, so right now we're just focusing on only things like modifying the framework's default styles. At this point I would need to go in and drill down into specific areas, find out what was controlling those styles and then overwrite that. Now I would need to do this for the entire page and the entire site, but I just want to show you what that's like by focusing on a specific area, in this case the top navigation bar. So if I go back into my code, I am going to scroll down a little bit in my custom file 'til I find my top navigation styles.

If you remember in the previous exercise, I actually created, and I'll go back in the source code to show you this. I created the navigation bar up top. Notice that we have this one little toggle for the word menu, and it has the class of menu applied to it. Now that's not part of the Foundation framework that's something that I created so that when the page is resized down to a small size or is viewed on a small device, instead of just seeing this blank bar up here, the word menu shows up. But right now it doesn't really show up, and that has everything to do with the default styling of text within the navigation bar.

So I need to overwrite that and the easiest way for me to overwrite this was to use a custom class. So back in my top navigation styles, I am just going to do class selector of menu, and inside menu I'm going to go head and do a color of white, that's going to help that show up on the black menu bar or whatever color I'd decide to use. And for padding I am just going to do a little bit of padding on the left-hand side of about 30 pixels, which is going to hold it off the edge. So now if I save this, go back into my browser and resize the page so that the menu shows up, I am going to refresh the page, and there is my menu text.

So now on a smartphone or a tablet device, at least they know that this black bar now represents the menu, and they can click on it to toggle it or to collapse it again based on their preferences. I also noticed that the links aren't looking exactly the way I want them to either. And a lot of times when you decide to overwrite styles within a framework, you're going to write a selector that you think is going to work and then you try, and it doesn't work, and the reason for that is the styles that are written inside of the framework are often extremely specific, so you sometimes have to deal with that.

Let's take a quick look at that before we finish up here. Right after menu I am going to type in .top-bar so a class selector for top-bar li a. And this is pretty common, you want to target the links inside the navigation bar so you switch over to the source code, and you say, okay, they are in a nav with a class of top bar applied to it and these would be the links that are inside the list items. That's a typical selector that you would write, and I even added the class here to make sure that I'm being very specific about which links I want to style.

So inside that I am just going to go ahead and give them a font-weight of normal, because right now they look bold, so I am just going to say normal. Then I am going to change their size, I am going to give them a font-size of 14 pixels. Now I don't normally use pixels to size my type, it's a personal preference. But since the Foundation framework uses pixels, I am going to stick with that so there isn't some real confusion about what size something is. I am going to stick with whatever the framework that I am using is using as well. So I am going to save this, and now when I get back out to my browser and refresh my page, nothing, these guys did not change at all.

Now the reason they didn't change has everything to do with the selector that I used for that. That would be the normal selector that I would write based upon the structure of the page. And a lot of times that's going to be all you need to overwrite a framework. But sometimes like this, it's not going to work, and you're going to be left scratching your head and wondering why. Well, that's going to require you to dig into the actual framework's stylesheet to determine exactly what selectors are driving this. So if I go into the foundation.css, and I scroll down, I am going to go all the way down into my menu styles, now I just happen to know where these are, they are right around 799, so now I can see that I have got all of these different menu styles here.

But see here is the deal. Obviously, before I did this exercise, I had to go and find these on my own. So if you use something like Firebug or WebKit Inspector or even Dreamweaver has some tools built into it to allow you to kind of tell what styles are being applied, that might be easier than having to dig into the framework itself, but there really isn't any substitute for digging into a framework and finding out exactly what it is that you're looking for. In this case what I am looking for is a selector that's styling those links, and I think I have found it right here.

We have a selector that is targeting any links that are inside the top bar navigation that are not styled with the class of button, perfect. I am going to go ahead and grab this selector, and I am going to copy this and then I am going to go back to my custom.css, and I am going to replace the selector that I wrote with that one. So that ensures me that it's going to overwrite that one. A lot of times that's all you're going to need, but in this case I had to do some more digging, and I have found out that the menu wasn't being styled either because of the unordered list it's inside of.

And I had to basically do this selector all over again, so I am just going to paste it, but instead of saying button, I had to say name. Again, remember, if I go back to the source code, normally inside this unordered list you'd have a list item with a class of name applied to it. So what I wanted to do is I wanted to make sure that I wasn't overwriting that style as well based on this. So I am going to go ahead and Save that, go back in, Refresh my page, and now it's a very subtle change, but the text is looking the way that I wanted it to look.

Now of course, this doesn't mean that we're done with all of the typographic overrides that we would need to get from the starting point of the framework to where our finished site is. Still, what I want you to take away from this exercise is that any framework that you use, no matter which one it is it's just a starting point. So you'll need to have a strategy in place that drives exactly how you plan on overwriting the framework's typography so that you're going to do it in an efficient manner. You also need to carefully study all the styles within your framework so that you know how specific you'll need to be when writing your own custom selectors.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13458 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.