loading...

CSS Typography

ziizium profile image Habdul Hazeez 惻7 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Have you ever stumbled on a website and you ask yourself one or all of the following questions:

  • How can i read this?
  • Who made this?

Then you proceed to another site and you are like WOW! this is so cool!. Now let's ask ourselves two questions:

  • What made the First Website unreadable or unusable to you?
  • What made the Second Website enjoyable?

For the Second Website you might just scroll and keep scrolling probably without actually reading anything but you are just marveled at the web developer(s) creation.

So many factors can determine if a site is either unreadable or enjoyable they can include:

  • Layout
  • Color combination
  • Animation
  • Typography

We will be talking about the last mentioned factor: Typography.

Typography can be considered as an art of letters and fonts. The way these duo can align with each other to create a good reading experience for the user coupled with appropriate character count per line.

This post is not a seminal work on the entire concept of Typography but rather a gentle introduction to Typography on the Web using Cascading Style Sheets (CSS).


We might be discussing Typography on the Web but it is worth mentioning the work of individuals that took their time to study and write about Typography in general especially the work of Robert Bringhurst in their book The Elements of Typographic Style. From the Forward of the book (emphasis mine):

Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence. Its heartwood is calligraphy - the dance, on a tiny stage, of the living, speaking hand - and its roots reach into living soil, though its branches may be hung each year with new machines. So long as the root lives, typography remains a source of true delight, true knowledge, true surprise.

Is that not beautiful? Let's proceed.

Most text in a web document are surrounded in paragraph tags (p) and it flows from left to right (ltr) or right to left (rtl) depending on the language of the source document and if the text can not be contained on a single line they will gladly wrap into another line and this might lead to some reading difficulties for the user due to the default User Agent styles for most HTML elements including the p tag.

CSS provide tools and techniques that can be employed to alleviate these reading difficulties and also enhance the reading experience creating a feeling of web typography done right. The tools are in the form of properties and some are:

  • font-size
  • font-weight
  • line-height
  • font-family

The techniques can include:

  • Vertical Rhythm
  • Responsive Typography

That's enough theory. Time for some code.


Save the following HTML and CSS and make sure the CSS file is linked with the HTML file.

<header>
  <h1>CSS Typography</h1>
</header>
<main>
  <section>
    <p class="paragraph-1">Lorem ipsum dolor sit amet,
      consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit
      in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident,
      sunt in culpa qui officia deserunt mollit anim id est
      laborum.
    </p>

    <p class="paragraph-2"><!-- Duplicate the content of .paragraph-1 --></p>

    <p class="paragraph-3"><!-- Duplicate the content of .paragraph-1 --></p>

  </section>
</main>
/*
 * This code is similar to the snippet we used in
 * CSS Media Queries https://dev.to/ziizium/css-media-queries-14fa
*/

header {
  padding: 1.2em;
  text-align: center;
  background-color: #1560bd;
  color: #ffffff;
}

main {
  background-color: #dddddd;
  padding: 1.2em;
}

And kindly note that all screenshots are from Firefox 70 web browser and its Developer Tools.


If we take a look at the HTML in the browser it is evident the text is difficult to read.

Text on a blue and grey background

The paragraph text is set to its default font-size of 16px which is the Browser default and you can use the Developer Tools to confirm this.

Text on a blue and grey background

The first thing we'll add is the font-family property which accepts comma separated values of font names. We can apply the font-family to the entire document or just specifics.

Let's apply it to the body element:

/* Create a declaration for the body tag */

body {
  font-family: Georgia, "Trebuchet Ms"; /* Add this */
}

Next we need to modify the font-size of the paragraph text.

/* Create a declaration for the p tag */

p {
  font-size: 1.3em; /*Add this */
}

Save and refresh your browser.

Text on a blue and grey background

The text readability is getting better but the line of text seems to be jam packed. We'll make use of the line-height property to give them a little bit of breathing space.

From Mozilla Developer Network:

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text

Update the p CSS rule with the following:

p {
  /* All other properties remain the same */

  /* Note the we've used a unit less line-height for simplicity */

  line-height: 1.618; /* Add this */
}

If you take a look at the HTML file in the browser, you will realize the readability is getting better but we can do better by putting some space between the letters. This is where letter-spacing comes into the picture.

From MDN:

The letter-spacing CSS property sets the spacing behavior between text characters.

Make the following modifications to p:

p {
  /* All other properties remain the same */

  letter-spacing: 0.02em; /* Add this */
}

The result in the browser:

Text on a blue and grey background

We have made some progress so far but the number of words per line is way too much. The best thing we can do is to reduce the width of the text parent container the main element.

main {
  /* All other properties remain the same */

  width: 60%;
  margin: 0 auto;   /* This will align the main to the center of the page */
}

Save and refresh your browser.

Text on a blue and grey background

Let's make some improvement to code:

p {
  /* All other properties remain the same */

  font-size: 1.5em;   /* These are just */
  line-height: 1.8;   /* updated values */
}

Save and view the output in the browser the changes you will notice will be minimal.


CSS has some selectors that can be used to add some swag to our text, in this context we can use two of these selectors:

  • ::first-line
  • ::first-letter

Officially these selectors are called pseudo-elements.

The ::first-line will select the first line of a text and with this we can style it the way we want. For the sake of simplicity we will only make the font-weight bold.

/*
 * We are only working with the first paragraph hence
 * we using the class selector with the pseudo element
 * selector.
*/

.paragraph-1::first-line {
  font-weight: bold;
}

The ::first-letter selector strictly apply to the first letter of a container element that has some text in it.

The code snippet below will increase the font-size of the first letter of .paragraph-1:

/*
 * Here are using the ::first-letter selector to get
 * the first letter of the paragraph
 *
*/

.paragraph-1::first-letter {
  font-size: 120px;
}

The result in the browser is not that good.

Text on a blue and grey background

The fix for this behavior is to apply the float property with a value of left and some margin for outer spacing.


.paragraph-1::first-letter {

  /* All other properties remain the same */

  float: left;         /* This will move the letter to the left of its parent */
  margin-right: 12px;  /* Some outer spacing to keep the letter away from other text*/
  margin-top: 0.15em;  /* This will let it align with the rest of the line */
}

The output should be better.

Text on a blue and grey background


Our web page is readable in its current state but we can make a tiny addition by applying some vertical rhythm.

Vertical rhythm is a concept in Web Typography that as to do with applying some space after block of texts in order to aid readability.

We can use CSS margin property to get this space. Remember that margin is shorthand for four other properties namely:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

The margin-bottom property will get us the needed vertical rhythm because each text is in a block level element; the p tag. And if we remember quite clearly block level element are laid out vertically one after the other.

Therefore the margin-bottom will create a space after each paragraph.

Add the following to the p tag:

p {

  /* All other properties remain the same */

  margin-bottom: 48px;
}

The result in the browser:

Text on a blue and grey background


Aside vertical rhythm, the other technique that can aid text readability is responsive typography. Responsive typography require us to change our mindset and design process when developing website(s), that's why we will discuss it under Responsive Web Design.

You should know we've merely scratched the surface and there is more to Web Typography than what we've discussed. We will cover more web typography in the Final Project.

Up next, CSS Animations and Transitions.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide