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:
- 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.
1 2 | font-family: Arial, Helvetica, sans-serif; |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Keyword values */ font-weight: normal; font-weight: bold; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// = normal font-weight: 500; font-weight: 600; font-weight: 700;// = bold font-weight: 800; font-weight: 900; |
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:
1 2 | font-size: 16px; |
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:
1 2 3 4 5 6 7 8 9 | body{ font-size: 15px; line-height: 1.4; // 15px * 1.4 = 21px } .inner-class{ font-size: 30px; // 30px(font-size) * 1.4(line-height) = 42px (total line-height) } |
font-style
I use it to update the text font to italic.
1 2 | font-style: italic; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*** the color red in diffrent writing methods ***/ /* Keyword syntax */ color: red; /* Hexadecimal syntax */ color: #ff0000; color: #ff0000ff; /*last two characters for alpha*/ color: #f00; 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*/ |
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