Website Design System: Text

magic of css

Text Alignment

Left (text-align: left) - aligns the text to the left.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Right (text-align: right) - aligns the text to the right.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Center (text-align: center) - puts the text in center of the page.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Justify (text-align: justify) - stretches the line of text to align both the left and right ends (like in magazines and newspapers). Browsers by default align text to the left, and if there is need to align text to the right or put it in the center, we should use the corresponding value.

“Life is what happens when you are busy making other plans.” ~ John Lennon.

Back to Submenu

Text Decoration

Overline (text-decoration: overline) - each line of text has a line over it.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Underline (text-decoration: underline) - each line text is underlined.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Line-through (text-decoration: line-through) - each line of text has a line going through it.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



None (text-decoration: none) - no text decoration is applied.

“Life is what happens when you are busy making other plans.” ~ John Lennon.

Back to Submenu

Text Transform

Uppercase (text-transform: uppercase) - converts all characters to uppercase.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Lowercase (text-transform: lowercase) - converts all characters to lowercase.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Capitalize (text-transform: capitalize) - converts the first character of each word to uppercase.

“Life is what happens when you are busy making other plans.” ~ John Lennon.

Back to Submenu

Line Height

Normal (line-height: normal) - which defines a normal line height. It is the default value of this property.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Length (line-height: 45px) - which defines a fixed line height in px, cm etc.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Number (line-height: 3.5) - which defines a number which is multiplied with the current font size to set the line height.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



% (line-height: 200%) - which defines a line height in percent of current font size.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Initial (line-height: initial) - which makes the property use its default value.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Inherit (line-height: inherit) - which inherits the property from its parent’s element.

“Life is what happens when you are busy making other plans.” ~ John Lennon.

Back to Submenu

Letter Spacing

Normal (letter-spacing: normal) - which means that there won’t be extra spaces between characters. It is the default value of this property.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Length (letter-spacing: 3px) - which defines an extra space between characters. Negative values are allowed.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Initial (letter-spacing: initial) - which makes the property use its default value.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Inherit (letter-spacing: inherit) - which inherits the property from its parent’s element.

“Life is what happens when you are busy making other plans.” ~ John Lennon.

Back to Submenu

Word Spacing

Normal (word-spacing: normal) - which specifies normal word spacing. This is the default value of this property.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Length (word-spacing: 2em) - which specifies an extra word spacing. Can be specified in px, pt, cm, em, etc. Negative values are valid.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Initial (word-spacing: initial) - which makes the property use its default value.

“Life is what happens when you are busy making other plans.” ~ John Lennon.



Inherit (word-spacing: inherit) - which inherits the property from its parent’s element.

“Life is what happens when you are busy making other plans.” ~ John Lennon.

Back to Submenu