CSS Basics for Typography (part 1)

Tram Ho

In 2020, many developers and designers want to learn about basic CSS. In the series below, I will introduce you to that topic. Specifically in this article, are the sharing of CSS typeformat properties with simple examples.

font-family

This font-family property is used to declare the font we use. It can recognize a wide range of fonts. This is useful to us for 2 reasons:

  1. If the first font doesn’t work in a particular operating system, the browser will use the next font until something matches it.
  2. If the font is missing some characters, it fills in the missing characters from the next declared font.

font-family types CodePen Example

font-weight

This attribute, like the name implies, defines the “weight” of a character. The default value of this attribute is normal , and its second common value is bold .

In more advanced fonts this property has more than two states. Instead of using the name of these values, these fonts are using numeric values: 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 and 950 . See the following table for more details

The normal values ​​have a weight of 400 , and the bold value is 700 . Below is an example

Font-weight types CodePen Example

font-size

This attribute is used to declare the font size of the text. Right now, the most common sizing unit is pixels. For example:

Font-size CodePen Example

In my opinion, it’s better to control the font size with rem . If you want to learn more about rem , you can refer to some other articles, eg: About rem

line-height

This tells the browser that the line dimension is proportional to the text size. This property can take a fixed value like pixels, but the most common way is to give it a scale value without any units.

line-height is a legacy property, which means that you enclose it once at the root element, and it will affect all children on the page. This way if we have different font size in the child element, then the line height will still be at the same scale and we don’t need to declare it many times. For example:

line-height CodePen Example

font-style

I use it to update the text font to italic.

font-style CodePen Example

color

The color property is used to set the color of the text. It can receive color keywords, for example red , green … In addition, it can also receive color HEX or color features like RGB and HSL.

Text color CodePen Example

Epilogue

Above is part 1 of the series on CSS Basics for Typography. Thank you for following this article.

Source: https://medium.com/cssclass-com/css-basics-for-typography-160025e3aeca

Share the news now

Source : Viblo