You get to pick the font's color, weight, size, and so on. And all these features make your websites and apps look better and more presentable to the user.

With the font-size property in CSS, you can change how big or small the text is on the web page. You can use this property in any type of CSS you are writing – external, internal, or inline.

In this article, I will show you how to change the size of the text with the font-size property in inline CSS.

What is inline CSS?

Inline CSS is one of the three different ways you can use to style any HTML element.

Instead of targeting the element with a class or id attribute, or the element itself as the selector and styling it with that, you put all the CSS styles in the opening tag.

In addition, you have to make sure all the properties and values of your stylings are inside the style attribute. This style attribute is one of the numerous attributes accepted by all HTML tags.

In the example below, I change the background color of the text to crimson, the text color to #f1f1f1 (light-grey), and the font-weight to bold with inline CSS.

<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
      Hello Campers...
</p>

By the way, my browser is zoomed-in to a level of 400% which is why everything appears so big. I didn’t apply any additional styles to accomplish that :)

How to Change Text Size Using Inline CSS

To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.

There are built-in values such as large, larger, medium, small, x-large, and so on:

In the code snippet below, I change the size of the “Hello Campers…” text to x-large, one of the built-in values of the font-size property.

<p style="font-size: x-large">Hello Campers...</p>

You can also set the value of the font-size property using a number with any unit such as pixels (px), rem, or em.

It’s better to go with numbered values because they give you more freedom to pick any font size you want.

In the code snippet below, I changed the size of the text to 30px with inline CSS:

<p style="font-size: 30px">Hello Campers...</p>

Conclusion

In this article, you learned how to change text size with inline CSS and the font-size property. You also saw how you can assign values to the font-size property.

Just a heads up, though: inline CSS is great for styling, but you should not rely heavily on it as it makes your HTML hard to read, especially if you are working in a team. You don’t want to be the only one who will be able to read your own code.

Be aware that it also overrides any styling set with internal or external styling. You should use external style or internal style instead, as they make your HTML and CSS codes separate, which is better for readability.

While assigning values to the font-size property, it is better to assign the values in rem units instead of px, for example. This is because when you use rem, the browser will be able to make font size adjustments as the user zooms in or out, which won't happen when you use px.

Thank you for reading, and keep coding.

How to Set Text Color in HTML

In CSS, the background-color property is pretty straightforward for setting the background color of anything.

So what if you want to set the foreground color of something on the page? Especially text, which under normal conditions you wouldn't want to set a background color for.

There's no foreground-color property in CSS, so what makes this possible is the color property.

In this article, I will walk you through how to set the color of text using the color property. We'll also look at the various ways it takes values.

The color property takes values in 4 different ways: named color, hexadecimal color, RGB color, and HSL color. Let's look at each one now.

Named Colors

As the name implies, you bring in the color property and apply the value by naming the color you want. This may be red, green, blue, orange, crimson, cyan, or any other named color. There are around 147 named colors recognized by browsers.

The basic syntax looks like this:

element {
    color: colorName
}

<p>freeCodeCamp</p>

 p {
     color: crimson;
}

Hexadecimal Colors (or just Hex Colors)

Hex values are used to represent colors with a total of 6 characters. They start with the pound/number sign (#), then any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue. With hex values, there's no limit to the shades of colors you can use.

<p>freeCodeCamp</p>

 p {
    color: #dc143c;
 }

RGB Colors

RGB stands for red, green, and blue. With RGB colosr, you specify the color in terms of how much red, green, and blue you want. All three are expressed with numbers between 0 and 255.

There is a type of RGB called rgba. The extra ‘a’ stands for alpha, which lets you specify the opacity of the color. It takes a value from 0.0 to 1.0 – 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

The basic syntax is rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha).

You can limit it to rgba(amountOfRed, amountOfGreen, amountOfBlue) if you don't want an alpha value.

Here's the syntax for the regular RGB values:

<p>freeCodeCamp</p>

 p {
   color: rgb(220, 20, 60);
 }

And here it is demonstrating the alpha value in action with 50% (0.5) opacity:

p {
    color: rgb(219, 20, 60, 0.5);
}

HSL Colors

HSL stands for hue, saturation, and lightness. It is another way of specifying color for text (and anything else that takes color) in CSS.

• Hue represents the color wheel in 360°. So, 0° is red, 120° is green and 240° is blue.
• Saturation is the amount of gray in the color, expressed as a percentage. 0% is the shade of gray and 100% is the color itself.
• Lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

Just like the RGB colors, you can also set the opacity of the color. So, there's also hsla.

The full basic syntax is hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha). You can limit it to hsl(colorDegree, saturationPercentage, lightnessPercentage) in case you don't want an alpha value.

<p>freeCodeCamp</p>

 p {
   color: hsl(348, 83%, 47%);
 }

You can apply a particular opacity to the hsl color like this:

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }

Should You Use Named Colors, Hex Colors, RGB Colors, or HSL Colors to Assign Colors?

One of the wonderful things about CSS is that there are multiple ways of doing the same thing. You've seen this by applying colors to text.

Since you can apply colors in 4 different ways, you must be wondering which is the best to use.

When you use named colors, you're kind of limited in how far you can go in applying different shades of colors. Red, green, blue, yellow, or any other named color has a lot of variations you won't get access to with named colors. You'll only have access to around 147 predefined colors recognized by browsers.

Hexadecimal colors are very dynamic. They are the most commonly used among developers because your limit is your creativity. With hex colors, you can use various shades and even use a color no one has ever used.

RGB colors are as dynamic as hex colors. Apart from being able to specify how much red, green, and blue you want from 0 to 255, you can also set how transparent you want the color to be with the extra alpha value.

HSL is the most dynamic of all. You get to specify the exact color you want in degrees from 0 to 360 within the color wheel, set how saturated and dark you want it to be in percentages, and also set an opacity from 0.0 to 1.0.

So really, it's up to you and your use case – and just how creative or specific you want to get.

Conclusion

Applying colors to text helps make your website more attractive to visitors. The right color combo can also help your content become more readable too.

In this article, you have learned how to apply colors to text with the 4 different kinds of values you can use with the color property.

Thank you for reading, and keep coding.

And you can do this in HTML with various text formatting tags.

In this article, I will take you through how to emphasize certain text by making it bold.

In HTML, there are three major ways that you can use to make text bold. You can use the <b> tag, the <strong> tag, or you can do it in CSS with the font-weight property. Let's look at each method in more detail.

How to Make Text Bold With the <b> Tag in HTML

HTML gives us the <b> tag for making text bold. To make text bold with this tag, you need to wrap it around the text like this:

<p><b>This text is bold</b>, but this text is not.</p>

As you can see in the image, the tag makes part of the text stand out.

How to Make Text Bold With the <strong> Tag in HTML

With the <strong> tag, you are not just making the text bold – you are calling special attention to it.

<strong> also makes text bold just like the <b> tag, but there is a slight difference between the two. I'll discuss this later in the article.

Just like the <b> tag, you need to wrap the <strong> tag around the text to make the text bold with it.

<p>
   Before paying to learn programming, check out
   <strong>freeCodeCamp</strong>.
</p>

With the <strong> tag, the freeCodeCamp text isn’t just bold, it has a semantic meaning and emphasis.

How to Make Text Bold with the CSS font-weight Property

The font-weight property takes lighter, bold, and bolder as values. It also takes numbers from 100 to 900. So, with it, you don't just make text bold, you can also make it lighter than its surrounding text.

To make some text bold with the font-weight weight property, you need to select the text with its class, id (if any), or element and then apply the values you want. Here's how it works:

<p>This is a <span class="lighter">lighter text</span>.</p>

<p>This is a <span class="bold">bold text</span>.</p>

<p>This is a <span class="bolder">bolder text</span>.</p>

 .lighter {
    font-weight: lighter;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

Should You Use <b>, <strong> or font-weight to Make Text Bold?

You might be wondering which to use for making text bold – <b>, <strong>, or the CSS font-weight property.

You should generally avoid using <b> because it's already a style. When you make text bold with the <b> tag, you're explicitly telling the browser to make the text bold right from the HTML.

<strong> also makes the text appear bold, but it is semantic. With it, you're not styling from the HTML (which HTML was never meant for originally), but rather you're telling the browser to make the text appear stronger in appearance than other surrounding text.

The CSS font-weight property gives you more control over how light or bold the text should be. The values lighter, bold, and bolder are a start, but you can take things a step further by applying numbers/weights like 100 200, 300, 400, 500, 600, 700, 800, and 900 as values, which gives different variations of lightness and boldness.

Conclusion

Bold font helps you place emphasis on certain words in HTML. In this article, you've learned about the 3 different ways you can make text bold, as well as which of them is best to use.

Thank you for reading, and keep coding.

How text is formatted affects how readable your designs and webpages are.

You can modify how your HTML text appears in many ways using CSS. You can select the type of font you want to use, whether it's bold or not, how big it is, and you can even change the color and add different spacing or decorations to it.

In this article, we'll go over the differences between the two most popular font types, Serif and Sans Serif.

In addition, we'll cover the syntax and how to use the font-family property so that with the help of CSS, you can choose and then use different fonts in your web design projects.

Let's get started!

Typeface Terminology

First, let's discuss some of the most common and frequently used font types that modern browsers support.

The Serif font type

Serif fonts are characterised by the little extra fine details on the ends of the letters.

At the end of the main strokes of characters, there are small flourish strokes called serifs.

Serif fonts are traditionally used widely in print as they are considered readable for lengthy passages of text. But they don't always display well on screens.

Serif fonts are considered to be among the most classic, elegant, and traditional fonts you can use.

The Sans-Serif font type

This type of font creates a clean design look, while at the same time being very readable and clear.

This font type has straight ends on each letter and there are no strokes at the edges, making the characters look sharp and flat and with clean lines.

Sans-serif fonts are considered modern, minimalistic, contemporary and a bit more readable choice for high resolution computer screens.

The Monospace font type

With this font type, every letter has the same fixed width and letters are equally spaced apart.

With the previous font types we've discussed so far, each letter has a different width.

So, with the monospace typeface, all letters have the same width. This makes text align nicely and makes it easy to follow, giving designs a clean appearance and mechanical feel.

There are two more generic font types available, fantasy and cursive, but the most widely used fonts are the ones mentioned above.

How to choose a font for your website – font names

Now that we've covered the basics of font terms and descriptions, its time to look at the many different font styles within each family.

Some common styles within each font family are listed below:

Serif Fonts

• Georgia
• Times
• Times New Roman
• Bodoni
• Garamond
• Palatino
• ITC Clearface
• Plantin
• Freight Text
• Didot
• American Typewriter

Sans-Serif Fonts

• Arial
• Verdana
• Helvetica
• Geneva
• Tahoma
• Trebuchet MS
• Open Sans
• Liberation Sans
• Impact

Monospace Fonts

• Courier
• MS Courier New
• Monaco
• Lucinda Console
• Andalé Mono
• Menlo
• Consolas

How to use the font-family property

In CSS, the font-family property defines a specific font for an element and how its text content will look and be rendered.

The syntax for the font-family property is:

element {
font-family: value;
}

We write the propepty font-family followed by a colon :, a space, a value, and finally end the specification with a semicolon ;.

We have to set the property we want to target and assign the value we want.

How to set a CSS font

Say we have the HTML below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Fonts</title>
</head>
<body>
    <h1>HTML Font – CSS Font Family </h1>
    <p>I am a paragraph</p>
</body>
</html>

Without any style applied and without explicitely setting a value to the font-family property, browsers display headings and paragraphs in the font of their own choosing.

The default, standard font used in Google Chrome is Times New Roman, a serif font.

The result looks like this:

There are a few ways to set a different typeface and specify the font we want.

When choosing a typeface – that is the value part – it's worth mentioning that sites use a limited set of typefaces. They'll grab fonts that are already installed on the user's computer.

A browser will display a font only if its already installed on a user's computer.

So let's see the ways in which you can set a font in CSS.

How to use a generic font-family name

In this case, the names are keywords and include one of the font categories mentioned earlier (serif, sans-serif, monospace).

It would look something like this:

 p {
  font-family: serif;
  }

This sets the font to a generic serif font.

How to use a specific font-family name

p {
 font-family: Times,serif;
 }

This rule sets Times as the desired font and then serif as the generic fallback option, in case the first option is not installed on the user's computer.

If the name contains any white space, you need to enclose it in quotation marks.

p {
font-family: "Courier New",monospace;
}

This sets the font to Courier New and adds monospace as a backup.

If we're specifying a font other than one of the generic names (like serif, sans-serif) we need to give the browser a fallback.

How to use a font-stack

In this case, the font-family property has multiple values.

It is a prioritized, comma-separated list of font family names you can apply to text, indicating that all the fonts are alternatives. This makes for maximum browser and operating system compatability.

The list is prioritized from left to right, from highest to lowest priority.

p { 
  font-family: "Lucida Console", Courier, monospace;
}

By applying more than one font-family name, you create an order of preference. We start with the font we want first.

If a user doesn't have the first option installed on their computer or if it isn't supported by the browser, the browser moves on to the second font and uses that one. If that font is also not available it moves to the third one, and so on.

We can list as many fonts as we wish, but best practice is to list three to four.

If all else fails, there will always be a generic font listed at the end as a last option-fallback mechanism.

From the group listed, the browser has to support at least one option and the generic name guarantees that something in the desired font-family will be rendered.

p {
 font-family: Georgia, "Times New Roman", Times, serif;

The fonts you list are known as a font stack.

The browser will first look for Georgia. If it is installed, the browser will display that font. Overwise it will look for Times New Roman. If that also isn't available, it will resort to displaying the generic default serif family font.

Conclusion

In this article, we went over the different font families and gave some examples of the different styles within each family.

We also went over the font-family property and the three different ways to set a font in CSS.

If you want to learn more about HTML and CSS and the different modern techniques used, freeCodeCamp has a free certification on Responsive Web Design.

You'll start from the absolute basics and go up through Flexbox, CSS Grid, and how to make websites resonsive. These are essential skills to have for digital design and front-end web development.

In the end, you'll build 5 projects, including a portfolio site where you can show off the other projects you've built if you want.

Thanks for reading and happy learning.

Here are a couple of things to keep in mind when you add Font Awesome to your next project.

Add the link to the head

Imagine you have the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="testing.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
    <i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
    <i class="fab fa-facebook"></i>
</body>
</html>

Like other CDNs, you need to add a <link> element to the <head>. For Font Awesome 5.7.2, it'll look something like this:

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

Online vs local

If you run the following code in a web based editor like CodePen or CodeSandbox, the following code renders icons properly:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
    <link rel="stylesheet" type="text/css" href="testing.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
    <i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
    <i class="fab fa-facebook"></i>
</body>
</html>

But if you try to open the page locally in a browser, you'll still see the black rectangles instead of the icons:

Take another look at the href in the <link> element above. Do you see it?

The problem is that, when you load the page from your local file system, the browser is trying to find the Font Awesome CSS file at the root of the file system.

To get things working online and locally, make sure to add the URL scheme (HTTP, or better, HTTPS) to the href:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

What's going on here?

When you leave off the URL scheme (href="//use.fontawesome..."), then the browser uses the same URL scheme the page was loaded with.

So if you run the page locally by running the HTML file in a browser, the href assumes the Font Awesome CSS is also a file that is also saved locally (file:).

Just make sure the href attributes for your <link> elements all point to the full URL, including the URL scheme, and you should be good to go.

Web safe fonts are fonts that are included with most operating systems, the implication of such high availability is that a designer can expect typography involving web safe fonts to appear exactly as intended to most users. Below are non-exhaustive lists of some fonts that are considered web safe at the time of writing, categorized by CSS generic font families.

Web safe serif fonts:

• Georgia
• Times New Roman

Web safe sans-serif fonts:

• Arial
• Tahoma
• Trebuchet MS
• Verdana

Web safe monospaced fonts:

• Courier New

It is worth noting that font stacks with fallback options including a generic font family should still be used even if your design uses only web safe fonts. For example:

p {
  font-family: Tahoma, Arial, sans-serif;
}

A Note on Web Fonts

Just because some fonts are safer than others does not mean you should confine your designs to using only web safe fonts. Modern designs with CSS can also take advantage of web fonts to ensure consistent typography across operating systems.

More info on fonts:

• How to load web fonts correctly
• Google font superfamilies
• How to use Google Fonts in your next design project

These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

Basic use

To include Font Awesome in your app or page, just add the following code to the <head> element at the top of your HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">

The i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i element to turn it into an icon, for example:

<i class="fas fa-info-circle"></i>

Note that the span element is also acceptable for use with icons.

Here's how you add an icon:

<i class="fas fa-thumbs-up"></i>

This will produce a simple thumbs up icon:

And here's how you would insert that icon onto a button:

<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>

Notice that there are two parts to using an icon, the style prefix and the icon name. In the example above, the style prefix and icon name are fas and fa-thumbs-up, respectively.

Font Awesome offers the following style prefixes:

Brand icons are often submitted by the company itself, and are useful for building things like buttons for social authentication or payment. These icons include Twitter, Facebook, Spotify, Apple, and even freeCodeCamp:

<i class="fab fa-free-code-camp"></i>

While you'll only have access to solid and brand icons under the free plan, there are still many ways to style them.

Styling Font Awesome icons

For simple applications, you could use inline styles:

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-thumbs-up"></i>
</span>

For sizing, you could also use Font Awesome's built in keywords:

<i class="fas fa-thumbs-up fa-xs"></i>
<i class="fas fa-thumbs-up fa-sm"></i>
<i class="fas fa-thumbs-up fa-lg"></i>
<i class="fas fa-thumbs-up fa-2x"></i>
<i class="fas fa-thumbs-up fa-3x"></i>
<i class="fas fa-thumbs-up fa-5x"></i>
<i class="fas fa-thumbs-up fa-7x"></i>
<i class="fas fa-thumbs-up fa-10x"></i>

An important thing to remember is that FA icons inherit the font-size of the parent container. This means that the icons scale with any text that might be used with them, which keeps the design consistent.

For example, say you want to create several buttons. The default size for the buttons is quite small, so you write some CSS to increase the size of the buttons, along with the text and icons within them:

<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>

<button>
  <i class="fas fa-thumbs-down"></i> Dislike
</button>

<button>
  <i class="fas fa-share"></i> Share
</button>

button {
  font-size: 1.5em;
  margin: 5px;
}

You can also adjust an icon's size directly by targeting the icon itself and adjusting its font-size.

Font Awesome is, well, awesome! As the most popular icon toolkits, it's easy to include and use in all of your projects. Now go on icon up all the things.

More Information

• Font Awesome docs
• All available Font Awesome icons

In this article, you'll learn how to create a unified custom look throughout your app with these simple tricks.

What we want to do

In iOS, there is a mechanism called UIAppearance to define an app’s global configuration. For example, you can set a consistent background color of the navigation bar with just one line :

UINavigationBar.appearance().barTntColor = UIColor.blue

However, if you apply the same approach to the font like this:

UILabel.appearance().font = UIFont(named: "Gills Sans", size: 14)

all the UILabel instances will indeed have “Gills Sans”, but with 14pt size as well. I don’t think any app would want to have only 14pt fonts throughout the app. Since UIFont always needs the size information to be initialized, there is no standard way in UIKit to just change the typeface without affecting the size.

But, don’t you want to change the font typeface without hunting down all the Swift files and Interface Builder files? Imagine you have an app with tens of screens and the product owner decides to change the font for the entire app. Or your app wants to cover another language, and you want to use another font for the language because it would look better.

This short article explains how you can do that with just several lines of code.

UIView Extension

When you create UIView extension and declare a property with @objc modifier, you can set that property through UIAppearance.

For example, if you declare a UILabel extension property substituteFontName like this:

You can call it in AppDelegate.application(:didFinishLaunching...)

UILabel.appearance().substituteFontName = "Gills Sans"

And voilà, all UILabel will be in the “Gills Sans” font with appropriate sizes. ?

But you want to use bold font as well, don’t you?

Life is good so far, but what if you want to specify two different variations of the same font, like bold font? You would think you can just add another extension property substituteBoldFontName and call it like this, right?

UILabel.appearance().substituteFontName = fontNameUILabel.appearance().substituteBoldFontName = boldFontName

Not that easy. If you do this, then all the UILabel instances show up in bold font. I will explain why.

It seems that UIAppearance is just calling all the setter methods of the registered properties in the order they were registered.

So if we implemented the UILabel extension like this:

then setting the two properties through UIAppearance results in the code sequence similar to the following at every UILabel initialization under the hood.

font = UIFont(name: substituteFontName, size: font.pointSize)font = UIFont(name: substituteBoldFontName, size: font.pointSize)

So, the first line is overwritten by the second line and you are going to have bold fonts everywhere. ?

What can you do about it?

In order to solve this issue, we can assign proper font style based on the original font style ourselves.

We can change our UILabel extension as follows:

Now, the code sequence that is called at UILabel initialization will be as follows, and only one of the two font assignment will be called in a condition.

if font.fontName.range(of: "Medium") == nil {   font = UIFont(name: newValue, size: font.pointSize)}if font.fontName.range(of: "Medium") != nil {   font = UIFont(name: newValue, size: font.pointSize)}

As a result, you will have an app with beautifully unified text style while regular and bold fonts co-exist, yay! ?

You should be able to use the same logic to add more styles like italic fonts as well. Also, you should be able to apply the same approach to another control like UITextField.

Hope this helps fellow iOS devs, happy coding!!

#

For digital design, it’s important to know and understand how to use and how to combine different fonts. There’s a font for every mood!

This post is going to give you a quick introduction to the biggest families in Typography: Serif and Sans Serif. And how, as a designer, you can choose the right fonts and combine them.

Let’s start!

Serif Type Family

Example of a Serif font.

The typeface Serif is differentiated from Sans Serif by the tiny little feet-like thingy called Serifs.

The areas in red are called the serif.

A lot of Serif typefaces that you’ll see will look a lot more traditional or conservative.

Origins: The reason they have these tiny feet is actually because of stone carving. Back in the days when people needed to carve out Latin letters in stone, the designer would usually paint the letters they wanted with a paintbrush. But the stonemasons would have to carve it out from that painting. And that stone carving created these serifs on the letters.

People tend to use Serif typefaces for something quite serious. This is because of their traditional and conservative look and feel.

Serif is further divided into four typeface families.

1. Old Style

This is the oldest Serif family. It includes fonts such as Adobe Jenson, Centaur, Goudy Old style, and many more. Their typeface is modeled on what text used to look like in the 1400s. Very old-looking.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

2. Transitional

This is a bit more modern-looking. This typeface family includes Times New Roman, Baskerville, Georgia, etc.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

3. Modern

Even more modern-looking and classy-looking. This includes Didot, which is the typeface used for the title of Vogue magazine.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

4. Slab-Serif

They’re a type family with thick serifs. Examples of slab-Serif typefaces include American Typewriter, Archer, etc.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

Now, how do you differentiate between these four major classes in the Serif Family?

It’s actually quite easy. Look at the first three families: Old style, Transitional, and Modern. Put them side-by-side. If you have a look at the thinnest versus the thickest part of the letters, you’ll see that as you progress from the older to the more modern types. You’ll see an increased difference in what we call the modulation of the typefaces. Concentrate on the O’s for example. Comparing the Old Style to the modern types, the thickness and thinness difference will be lesser compared to Modern.

And a lot of this modulation comes from when people used to write with flat-nibbed pens.

What about Slab-Serif?

If you have a look at a Slab-Serif font, you’ll see there’s pretty much zero difference between the thickest and the thinnest parts of the font.

And it was designed intentionally like this. It’s one of the modern members of the Serif family. Yet, it doesn’t follow the rule of “more into the future you go, the greater the difference between the thickest and thinnest part of the font.” Slab-Serif was created for newspaper printing for clearer reading when the quality of the paper used to be poor.

Sans-Serif Type Family

Example of a Sans-Serif font

Sans-Serif differs from the Serif. It does not have serifs (the tiny little feet) or any decorative elements along the central beams and the top bars. Sans-Serif is slightly more modern than the serifs.

They’re also subdivided into four families.

1. Grotesque

The oldest one. This includes News Gothic, Franklin Gothic, and more.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

2. Neo-Grotesque:

Slightly more modern. Helvetica and Ariel are examples.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

3. Humanist:

Even more in the future. Gill Sans is an example.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

4. Geometric:

They’re based on geometric shapes. Futura is an example.

_[Image credits](https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-the-basics-of-type.html" rel="noopener" target="blank" title=")

How do you differentiate between the four?

Now, similar to the serifs, you can move from the older Grotesque family to the Neo-Grotesque to the Humanist. You can see the difference in the thickest and the thinnest parts of the font get more and more exaggerated. When you look at the Grotesque, it’s almost equidistant at all points. And when you look at the Humanist typefaces, you start to see the variation of the modulation.

In a Geometric typeface, the O’s are always perfectly round. The O’s look exactly like as if you draw with a protractor. And this typeface is a bit like Slab-Serif type. Even though it’s one of the modern typefaces in the family, it bucks the trend and pretty much has no modulation and is equidistant at all points.

How Typography Determines Readability

Having a knowledge of the font families and their subfamilies helps with styling. But more importantly, it’s about readability. Design is both about function and form. What makes a typeface more readable?

Humanist Sans-Serif is considered to be more readable than Grotesque. And the reasons are:

• Humanist typeface has more open shapes.
• The inter-character spacing in the Humanist typeface is more than in Grotesque, making it slightly easier to read.
• In the Grotesque typeface, the characters are ambiguous from each other. A lowercase ‘g’ and 9 in Grotesque look pretty similar, they’re all very square, adding more confusion and making it less readable. Whereas in the Humanist typeface, you can clearly differentiate between the characters.

These are some factors that make fonts more readable. Now you can choose the typeface depending on the purpose.

How to combine fonts

When you’re combining different typefaces, usually you’ll have a different typeface for the heading and a different one for the body. And this is to create a slight contrast and interest in your designs.

Some of the common rules that designers use when they combine different fonts :

1. The Serifs and Sans-Serif work really well together. It tends to create a good design. Sans-Serif have slightly increased readability compared to Serifs. Which is why Sans-Serif is a great typeface for the body of text.
   Don’t combine a Serif with a Serif and a Sans-Serif with a Sans-Serif because it can look a little bland and undifferentiated.
2. Too many fonts in one design is not a good thing. It ends up looking too strange. Stick to 2 fonts (one from Serif family and the other from Sans-Serif).
3. Appreciate the mood of the typeface just like colors. And don’t combine different moods together. Try to combine more modern fonts with modern fonts and older fonts with more traditional ones.
   If you get the mood of your typefaces, you start to create some incredibly beautiful designs.
   Things that you should keep similar: Mood and Time era of the font
   Things that you should contrast: Serif-ness (for instance, one font should be Serif and the other Sans-Serif) and Weights.
   Weight means how heavy or bold your text is. Most design software have a whole range of weights. For example, light, medium, bold, extra bold, and so on. Play around with different weights contrasting them to create interesting designs.

NEVER EVER use — Comic Sans, Papyrus, Viner, Kristen, Curlz. No matter what you’re designing, they’ll make your designs look terrible.

Tools for Typography

1. WhatFont
   A chrome extension that tells you the name of a font on any website.
2. Font Squirrel
   I usually download fonts from here. They’re free for commercial use.

That was a brief overview of the vast field of typography. Hope you learned interesting things that you can use in your designs! :)