Published in


CSS Basics for Typography

CSS Basics


This font-family property is used to declare what font we want to use. It can receive an array of fonts. This can be useful to us for two reasons:

  1. If the first font isn’t working in a specific operating system, the browser will use the next font until something matches it.
  2. If the font has missed some of the characters, it will fill in the missing characters from the next font at the list.
font-family: Arial, Helvetica, sans-serif;


This property, like his name, is for declaring the font-weight of the text. The default value of this property is normal, and the second common value of it is bold.

Common weight name mapping (from MDN)
/* 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;


This property, like his name, is for declaring the font-size of the text. Even today, the most common sizing unit is pixels. Example:

font-size: 16px;


This property is telling the browser the height of the line in ratio to the text-size. This property can get fixed value like pixel, but the most common way is to give it a value of ratio without any unit.

font-size: 15px;
line-height: 1.4; // 15px * 1.4 = 21px
font-size: 30px;
// 30px(font-size) * 1.4(line-height) = 42px (total line-height)
Image from w3.org


We use it to update the text font into an italic variant state.

font-style: italic;

Text color property

The color property is used to color the text. It can receive color keywords, for example, red, magenta. It can receive a HEX color code and color functions like RGB and HSL. If you want to know more about CSS colors, you can read my article “Why CSS HSL Colors are Better!”.

/*** 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*/


This property, like his name, is to control the alignment of text in its reading axis(inline-axis). Besides the possibilities to align left and right, we have the center value and the less known justify value, which aligns the text in both ways.

text-align: left;
text-align: right;
text-align: center;
text-align: justify;


The direction property sets the direction of text, table columns, flexbox, grids, and more. It has two values:

  1. ltr value - for Latin languages that are read from left to right.
  2. rtl value - for Semitic languages that are read from right to left.
direction: rtl; /* update text-align value to right; */
direction: ltr; /* update text-align value to left; */


This property is used mainly for vertical inline text content. The main common values are baseline (default value), text-top, and text-bottom which are relative to the line-height of the text in the container.

vertical-align: baseline; // default
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
vertical-align: -4px;


This property’s most used case is for adding underline to links, and it could also be used for creating overline and line-through. Example:

text-decoration: underline overline line-through;
text-decoration: underline dashed;
text-decoration: underline dotted;
text-decoration: underline blue;
text-decoration: underline green;


The text-transform property specifies how to capitalize on texts. We use it to make text appear in all-uppercase or all-lowercase, or to make each word capitalized.

text-transform: none; // default
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;


The letter-spacing property, as his name is, decreases or increases the spacing between the letters of the words. When using this property with px units, you can use fragments of pixels for example 0.1px. To decrease the spacing, this property can get negative values as well, like -1.5px, for example.

letter-spacing: normal; // default value
letter-spacing: 3px;
letter-spacing: -1.5px;
letter-spacing: -0.1rem;


The letter-spacing property, as his name, allows us to define the space between the words.

word-spacing: normal; //default value
word-spacing: 20px;


The indent property is used to indent the first line in a paragraph. Inside with a positive value or outside with a negative value.

text-indent:  0; // default value
text-indent: 15px;
text-indent: -15px;


The ::first-letter pseudo-element selector allows us to style the first letter in different styles from the regular text in paragraphs, for example.

font-size: 26px;
font-size: 50px;


The text-shadow property allows us to add shadow to text. For it to work, we need to provide it with at least the offset-x and the offset-y of the shadow. If we provide only these two values, the shadow will be left without a spread and with the same color of the text.

text-shadow: 5px 10px;     // offset-x | offset-y 
text-shadow: 5px 10px 5px; // offset-x | offset-y | blur-radius
// offset-x | offset-y | blur-radius |color
text-shadow: 5px 10px 5px red;
/* equal to */
text-shadow: red 5px 10px 5px;
// multiple text-shadow
text-shadow: 5px 10px 5px green,
10px 15px 5px red;


The text-stroke property is a non-standard property that works in all main browsers. It works with the -webkit prefix, even on Firefox & old Edge. The property receives two values, stroke-width and stroke-color.

/* Short writing */
-webkit-text-stroke: 2px purple;
/* or Full writing*/-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: purple;

More and More and More!

There are more properties of CSS for typography and big new topics like Variable Fonts, which are dynamic. But in this article, I have tried to show the main basic elements to control typography with CSS.

To Summarize

In this article, my primary purpose was to show the most useful properties for CSS typography and to provide you with this knowledge.

Final Words

I hope I inspired you and showed you some new possibilities.
If you like this post, I would appreciate applause and sharing 🙂.

Who Am I?

I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.

(Me talking at ConFrontJS 2019, Warsaw, Poland)



Open-source projects, articles, tutorials and more.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store