CSS tutorial series: CSS Typography (font, text transform and other properties)
Tags: beginners, webdev, tutorial, css
Published: 2023-01-19 09:14:46

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 value `displays 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`.

![letter-spacing and line height](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5ld1z6aq05b69i6z1u7.png)

## 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`|

![text-transform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b90brr3gyq57v3lp02g9.png)

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|



![text-decoration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z6e9pb3z8qcbf7z4k42.png)

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

```CSS
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.

`inherit` and `initial` still hold the same function as previously mentioned.

## Research these properties
- `text-align`
- `word-break`
- `text-shadow`