Foundation 6.5 – Typography | Jeppe Schaumburg Jensen | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

2 Lessons (18m)
    • 1. Base Styles

    • 2. Helper Classes

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


This class is for the beginner who wants to get a quick introduction to the latest version of Foundation. This framework is one of the most popular ones used today by web designers and developers all over the world.

In this class you will learn about all of the components in the category "Typography" that are part of the Foundation framework.

These includes the basic font styles as well as various helper classes.

We'll go through each one of them and see how they are used and in what variations you can use them.


In addition to the videos this class contains a special built Foundation Learning Kit that you can download and use for referencing and practicing building Foundation components.

You can download the Learning Kit from the "Project & Resources" tab under "Resources" in the right side or access the Learning Kit online.

Meet Your Teacher

Teacher Profile Image

Jeppe Schaumburg Jensen

Front-end developer and digital designer


Hi there,

My name is Jeppe Schaumburg Jensen and I'm a teacher in topics related to front-end development, interaction design, music and productivity.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Base Styles: based styles these basic topography styles that comes with foundation. We don't need to use any class names for these elements that proceeding this page. So this is the very basic styling off regular eight email elements we see. We have paragraphs with a strong check and intact. Inside, we have some headings. We have headings with a small segment. Inside. We have a link inside text, have a divider on on our list or wrote list definition list, block quote coat and keys, drugs. So let's see how we create all of this. Using semantic mike up. You know, Cody will start creating a paragraph. So we had the P Tech and then outpaced in this take to you, like so close the p tech again. Now we want to add a strong tech to emphasize or to knock something as being important. And then we wanna at an Imtech to mark something as being emphasized, just like so. So these are two in line text that we can use. Let's go. She was the browser on Refresh. He would see our basic paragraph with the strong check and in tech. Now let's create the headings. We have an H one heading element and we haven't h two hitting element and it's three hitting Element and H Full Hitting Element and H five Hitting Element and H six hitting Element. Let's say this. Go back into the browser and re fresh. He received the various front sizes for these normal hitting elements. We can also add small segments inside or hitting. So let's see how we could do this. Just copy all of this killed and pasted in. Now we're select all of these headings inside of this for at a small attack a small hitting segment text like this and close this mortal again that saved this go back and re fresh. He received the same headings, but this time also with small heading segments next to them which a great color and some smaller fun size. All right, let's create a link inside from text. Just copy this ticked from up here, create a paragraph element pasting the text. Now it's great link out off the last word here. So we're just at any ink attacked like so save it. Go back and refresh. You see the basic link, which is blue collar? We can great divider which is simply the HR element. That staying small horizontal Rula. That's a full bag with fresh. He received the divider. Now let's look at different kinds of lists. First, we have the on order list. So we have a you attack. It's out this week. Haven't ally a tech on our list item. Just paste it in for your times inside of a second. This item wanna missed at your will and on ordered list. Like so. So we create you attack inside of this a lie Check Missed it on order this item. Paste this in two more times so we can see we have this nest that you tech inside of the parent you attack hidden inside one of the Children elements One of the list items that say this good back and refresh. You can see the on order list with the bullets in front of it. Now let's create an ordered list instead. So we're just copy all of this. Change the U. S. Tax for them to over tax. It also changed text to you Ju ordered. I think so. Just remove this from here and here. That was attacker. Let's go back. Refresh Now we see the order lists with numbers and we can see that we have a nested order list that starts from the one again. Now there's take a little get definition lists, definition lists, starts with de el attack. This apparent element that we have a definition term and a definition description like so. So we have the term here and then we had some random text here. Now copy this a few times. Se go back and refresh. Here we have our definition list. Let's continue to the black quote element. So we had the quote check inside of this. We had a paragraph and outpaced in some text again inside of a paragraph. And after this were at the site element and at the author made inside of this. Let's save Go back Refresh. He was yelling Nice block quote element with the great color and a vertical line or border in front of it. And the site element has this dash placed in front of the text and the text is italic style . Now I see how we can include coat Big ST Louis inside of paragraph. So we at paragraph element and the text use the following coat. Now we'll read a Kodak shame inside effect code element like so. And since this is a female, we need to use HTML entities for good, greater than Thatcher than symbol greater than and less than symbols. So here we have the less then 80 mil entity created, like so a text code and the greater than a steam ill entity which looked like this. Then we'll have text code again. Great. This then simple at the text slash coat. And finally great greater than simple again. So let's see what this looks like in the browser. We can see that the co tech gives the code example at Backroom Cola and nothing Bordeaux and we used the appropriate A female entities for the less than symbols and the greater than symbols. All right, let's see how we can markup keystrokes in a paragraph element. So we have a paragraph and the text usedto following short cut. Now we're at the K V. D. The K PG element is out of this. We can at whatever command plus, and to open a new window of creating new far, I will say this go back and re fresh Now we see that this keyboard short cut has a great background behind the text and also another fund like the one up here and moments based fund. So this was all the basic styles for typography. Once again, you don't need to use any classes to these elements. Just need to use the correct semantic elements. 2. Helper Classes: help of classes. These classes, you can apply for topography elements change their appearance and behavior. So here we have different kinds of topography elements, and now you can see how they have been modified using these help of classes. First, we can changed the text alignment. You have justified text for all screen sizes for medium and up break points and for large and up break points. And we have left the line text right aligned text center line text, also for various brake parts. Then we have a type scale so we can format text to just play s or heading elements, even though we're using another eight email element that we have subheadings also the same sizes as, oh, hitting elements. But another color. Great. We can create elite paragraph that it is larger than the regular paragraph. We can make an on our list unpiloted, so we remove all the bullets from the A parent element. Any nested lists will still have the bullet. The same goes for unbolted Order lists with numbers have been removed from the main list and not the nested list. Finally, we have a statistics element which is a laborer with text and a large number. Now let's see how we create this. So far, all of these examples we have that text already here and now we want to modify it. So our first paragraph I want to make it takes justified for all screen sizes. So we had the text. All the cost takes justify for the second paragraph. We only want the text to be justifies justified for raping media manner. So we had the class medium text justify for 1/3 paragraph. Wanted to be justified for preparing large end up. So we had the glass large text justify. Let's say this. Go back and select the right seven. Refresh. Now we can see when we resize the broader win browser window. The first paragraph is justified for all screen sizes. The 2nd 1 becomes justified, but the medium screen size and up and the last one the last one becomes justified for the last great point right there. And now let's kick. It's have a look on left, right and center line text. So to left, align this text for that bus text left, and we can also do this for break points, so shame would weaken that the last texts, right to make it text. Right? All right, line a default. And then at the cross medium text left, then it will become left the line for medium great punch up. Stupid. Something similar here takes right and then large text left them it. Come lift the line for last device Send up. Now we can make this text right, aligned for all screen sizes using the glass text, right? Only for certain screen sizes by using cross medium text, right? Oh, large. It takes right. Finally, we have the centerline class. So to make it centerline on all sizes we had last take center and for specific break points , we have glass medium text center. Oh, large text center. Now let's take a look in the browser seal this so we have to the left the line text. Then we have the bridal and text a Steve old that becomes left the line foot break for medium and up and the other one for break point Large gin up. So when we increase browser window, we can see that this one has now become lift the line break for medium. And when he reached a lot break burned. The next paragraph will become ill after line right there. All right, The next three examples is the right aligned text. This one. It's right in line for all breaking sizes to others only for medium and lots, respectively. So we can see this just became right, aligned. And now also this one. The last examples is for the center alignment. This text will always be center line and the next two paragraph change will reach the right break point this question medium brake line. And there we go the lots break point. Now let's continue to have a look at the time scale. So we just have paragraphs elements, you. But we can add a class H one through age six like so I say this go back and re fresh. Now we see that it has been formatted to look just as the regular headings. This could be useful in some situations, while you can't use a specific heading element that you want. But you wanted to look like you're using that. All right, we can change all of this into stop hitting. So notice here we have the regular heading elements. Let's quickly go back. See there right there. Now Warner changed him into a sub hitter by adding the class sub hitter. So when you go back and refresh, we can see that being giving this gray Carla. Here we have a regular paragraph. We want to make it into a lead paragraph so the text will become more prominent. We do that by simply adding the class lead to the paragraph. Let's go back and refresh. Now we see that the fund size have increased, so it's now 100 and 25%. All right, let's check out how we create an unpolluted on order list and order list. So do this assembly at the class. No bullet on either the on order list or the orders list that safe. Go back and refresh. Now we see that this Balducci and the number here disappeared from the parent list, not the messed it list. Finally, let's look at the statistics element, which is the label here with text and the number noticed when we go back with numbers as small as the text or the same size we can now at the Gus step to this day, Tech, which will increase this text size to a large number, so this has been increased to the front size 2.5 brands. This was all the helper classes that you can use which foundation to change your topography elements.