CSS tutorial series: CSS Typography (font, text transform and other properties)

#javascript #java #career #interview

Typography is the layout and display of text. A large portion of the content on your website most likely will be text, so it's good to add to some styling to make it appear nicer. You can significantly improve your users' reading experience by making a few simple changes. Proportions and spacing are the foundation of typography. Let's discuss some basic CSS font properties.

A font is a set of characters that are displayed in a particular way to give text a particular appearance.

properties	Description
`font-family`	An element's font is specified by this property. This property accepts a list of strings, separated by commas, that can be either specific or general references (generic) to font families. Quoted font families such as "Helvetica" are specific fonts whereas for example `sans-serif` or `monospace` are font-families are generic
`font-style`	this property sets the text's style. Font style has several values.
`font-weight`	This property determines how thick or thin characters should be displayed in text.
`font-size`	A font's size can be changed using the font-size property.

Let's check out some property values and see what each of them mean:

Property	some values
`font-family`	`serif`, `sans-serif`, `monospace`, `cursive`

These fonts are generic fonts which means that they are fallback fonts. Fallback fonts are applied when none of the specified fonts are available.

Property	some values
`font-style`	`normal`, `italic`, `oblique`, `inherit`, `initial`

The normal value is the default style of the text displayed.
The italic value displays the text in italic. The oblique value displays the text in oblique. The initial value resets the style to its default value.
The inherit value makes the element inherit the style from its parent element. Italic font faces tend to be cursive in nature and typically take up less horizontal space than their unstyled equivalents, whereas oblique faces are simply sloped versions of the regular face.

Property	some values
`font-weight`	`normal`, `bold`, `bolder`, `lighter`, from `100` t0 `800`, `initial`, `inherit`

The normal value is the default.
The bold value displays thick characters.
The bolder valuedisplays thicker characters.
The lighter value displays lighter characters.
The range 100...400 displays the same value as normal. The 700 value displays the same value as bold. The initial and inherit value have the same functions as the ones in font-style.

Line height & letter spacing.

Line height is a key to determining the space between text lines. Number, length, percentage, or the word normal are all acceptable values for this property. In general, it's advised to use a number rather than a length or percentage to prevent problems with inheritance.

The letter-spacing determines how much horizontal space there is between characters. The length values em, px, and rem are accepted for this property.

This example is a before and after specifying letter-spacing: .2rem and line-height: 1.2.

Text transform property

`text-transform` values	Description
`uppercase`	Makes all the characters uppercase
`lowercase`	Makes all the characters lowercase
`capitalize`	Makes the first character of each word uppercase
`none`	This is the default
`initial` & `inherit`	They hold the same description as in the `font-style`

This example demonstrates text-transform with the values uppercase, capitalize and lowercase respectively.

Text decoration

text-decoration is a shorthand property for which we will discuss in a moment.
This property allows you to add lines to your text, whether underline, line-through or overline.

`text-decoration` shorthand	values
`text-decoration-line`	`underline`, `overline`, `line-through` or the three of them at the same time
`text-decoration-color`	accepts any color
`text-decoration-thickness`	accepts any length values to set the thickness of the stroke

The styling was set using the shorthand property text-decoration like so

text-decoration: underline overline line-through brown;

Text indent, Overflow and white space

The first line of a text-block is indented according to the text-indent property's value. This property accepts positive and negative length values like for example 1em, 20%, or even 5em.
Only content that is spilling outside a block container in an inline direction is affected by the text-overflow property.
How white space is treated within an element is controlled by the white-space CSS property.

Property	values
`text-overflow`	`clip`,`ellipse`, `string`, `initial`, `inherit`

The clip value clips the text and is no longer accessible.
The ellipse adds a (...) to represent the clipped text.
The string displays the given string to represent the clipped text.
inherit and initial represents the previous given explanation.

Property	values
`white-space`	`normal`, `nowrap`, `pre`, `pre-line`, `pre-wrap`, `initial`, `inherit`

The normal value is the default, the text will wrap when deemed necessary
The nowrap value will not allow the text to ever wrap onto a new line.
The pre value will only allow the text to wrap on a new line when a line break is used.
The pre-line value is a combination of the default and the pre value. The text will wrap when necessary and with the use of a line break. white space is not preserved by the browser and will collapse)
The pre-wrap value is the same as pre-line but the browser will preserve the white space.