Simple Text Formatting with CSS
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
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.
Now add some fake content to that file and a blank external style sheet.
<p> elements are added to a
<div> element see the default formatting inflicted by browsers. English text and traditional Chinese text are all included.
<link rel="stylesheet" type="text/css" href="style.css" />
<h1>Aenean euismod cursus ligula</h1>
<h2>Aliquam dignissim elit purus</h2>
<h2>Sed ut eros nec nibh</h2>
<h3>Etiam a cursus velit</h3>
<!--for traditional chinese-->
<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
<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.
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
letter-spacing is quite decent. So I am happy.
Yes, Google Font solve my problem. :)