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 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:
- If the first font doesn’t work in a particular operating system, the browser will use the next font until something matches it.
- If the font is missing some characters, it fills in the missing characters from the next declared font.
font-family: Arial, Helvetica, sans-serif;
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
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:
950 . See the following table for more details
normal values have a weight of
400 , and the
bold value is
700 . Below is an example
/* Keyword values */
/* Numeric keyword values */
font-weight: 400;// = normal
font-weight: 700;// = bold
This attribute is used to declare the font size of the text. Right now, the most common sizing unit is pixels. For 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
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: 1.4; // 15px * 1.4 = 21px
// 30px(font-size) * 1.4(line-height) = 42px (total line-height)
I use it to update the text font to italic.
color property is used to set the color of the text. It can receive color keywords, for example
green … In addition, it can also receive color HEX or color features like RGB and HSL.
/*** the color red in diffrent writing methods ***/
/* Keyword syntax */
/* Hexadecimal syntax */
color: #ff0000ff; /*last two characters for alpha*/
color: #f00f; /*last character for alpha*/
/* RGB Function syntax */
color: rgb(255, 0, 0);
color: rgb(255, 0, 0, 1); /*last value for alpha*/
/* HSL Function syntax */
color: hsl(0, 100%, 50%);
color: hsl(0, 100%, 50%, 1); *last value for alpha*/
Above is part 1 of the series on CSS Basics for Typography. Thank you for following this article.