Simple Text Formatting with CSS

3 min readJan 25, 2019

To get familiar with CSS, to use it is the best way (I think m…).

In this article, I want to record some basic text formatting technique. As a best practice, I should describe the purpose first.

When it comes to text formatting, the most important point to consider is to let readers read web pages easily. Therefore I will try out different combinations of font-size, font-weight, line-height, word-spaceing, letter-spacing, etc, and find the best one.

If the user of web pages does not have the font I designate, the browser will choose a fallback font instead. For better controlling the visual representation, I choose to use web font. I would like to use the Noto Sans TC and Noto Serif TC, since my target audience reads traditional Chinese. Moreover I would like to figure out how to use different font-weight in web pages.

Besides, I want a consistent look in various browser. Normalize.css is used.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<title>Text Formatting</title></head><body>
</body>
</html>

Now add some fake content to that file and a blank external style sheet.

Several <h1>, <h2>, <h3> and <p> elements are added to a <div> element see the default formatting inflicted by browsers. English text and traditional Chinese text are all included.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css" 
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Text Formatting</title>
  </head>
  <body>
    <!--for english-->
    <div>
      <h1>Aenean euismod cursus ligula</h1>
      <h2>Aliquam dignissim elit purus</h2>
      <p>...(ignored)</p>
      <p>...(ignored)</p>
      <h2>Sed ut eros nec nibh</h2>
      <h3>Etiam a cursus velit</h3>
      <p>...(ignored)</p>
    </div>
    <!--for traditional chinese-->
    <div>
      <h1>說個具現找陽的政識排兒</h1>
      <h2>絕三走樓</h2>
      <p>...(ignored)</p>
      <p>...(ignored)</p>
      <h2>學亞外進研病品性去情小說表</h2>
      <h3>母一內早大是不子怎</h3>
      <p>...(ignored)</p>
    </div>
  </body>
</html>

The <div> element, that does not have any style assigned, actually occupies all width of the parent element (as indicated here. I want to remember this important thing). In addition, several tags such as <blockquote>, <em>, <strong>, <i>, and <b> are added (but not listed in the code) to see the various font faces.

Now I can use Google Font, since there are some words to display. There are two ways to use Google Font as indicated in Google Font. One of them is to use CSS @import directive and I choose this way. I can use a font with different weights by one line.

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:400,700');

Just add the above line to the style sheet, and then one font with two different weights can be used.

However, I wonder whether browsers will automatically choose proper font weight for specific HTML tags. For example, <h1> typically is rendered using bold face. I check a <h1> tag using browser's Developer tools.

The font weight is indeed bold (700), not automatically rendered by the browser based on the imported font, and the font is from network.

The default setting for font-weight, line-height, word-spaceing, letter-spacing is quite decent. So I am happy.

Yes, Google Font solve my problem. :)

Simple Text Formatting with CSS

Written by Chun Ming Wang