Typography in CSS
Tags: css, html, codenewbie
Published: 2021-05-23 13:35:05

####1.The Font Shorthand
With the syntax:
```CSS
element {
 font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}
```
You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.
For example, to make all p elements bold with a font size of 20px and using Arial as the font family typically you would code it as follows:
```CSS
p {
 font-weight: bold;
 font-size: 20px;
 font-family: Arial, sans-serif;
}
```
However with the font shorthand it can be condensed as follows:
```CSS
p {
 font: bold 20px Arial, sans-serif;
}
```
Initial value for each of the properties: 
* `font-style: normal;`
* `font-variant: normal;`
* `font-weight: normal;`
* `font-stretch: normal;`
* `font-size: medium;`
* `line-height: normal;`
* `font-family – depends on user agent`

####2.Quotes
The quotes property is used to customize the opening and closing quotation marks of the `<q>` tag.
```CSS
q {
 quotes: "«" "»";
}
```
####3.Font Size
#####HTML
```HTML
<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>
```

#####CSS
```CSS
#element-one {
 font-size: 30px;
}
#element-two {
 font-size: 10px;
}
```
The text inside `#element-one` will be `30px` in size, while the text in `#element-two` will be `10px` in size.

####4.Text Direction

```CSS
div {
 direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
 direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
 writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
 writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
 writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}
```
The direction property is used to change the horizontal text direction of an element.
Syntax: `direction: ltr | rtl | initial | inherit;`
The writing-mode property changes the alignment of text so it can be read from top-to-bottom or from left-to-right, depending on the language.
Syntax: `direction: horizontal-tb | vertical-rl | vertical-lr;`

####5.Font Stacks
`font-family: 'Segoe UI', Tahoma, sans-serif;`
The browser will attempt to apply the font face "Segoe UI" to the characters within the elements targeted by the above property. If this font is not available, or the font does not contain a glyph for the required character, the browser will fall back to Tahoma, and, if necessary, any sans-serif font on the user's computer. Note that any font names with more than one word such as "Segoe UI" need to have single or double quotes around them.

####6.Text Overflow
The `text-overflow` property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text.
```CSS
.text {
 overflow: hidden;
 text-overflow: ellipsis;
}
```
Unfortunately, text-overflow: ellipsis only works on a single line of text. There is no way to support ellipsis on the last line in standard CSS, but it can be achieved with non-standard webkit-only implementation of flexboxes.
```CSS
giveMeEllipsis {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: N; /* number of lines to show */
 line-height: X; /* fallback */
 max-height: X*N; /* fallback */
}
```
[Resource](https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0)

####7.Text Shadow
To add shadows to text, use the text-shadow property. The syntax is as follows: 
`text-shadow: horizontal-offset vertical-offset blur color;`

#####Shadow without blur radius
```CSS
h1 {
 text-shadow: 2px 2px #0000FF;
}
```
This creates a blue shadow effect around a heading

#####Shadow with blur radius
To add a blur effect, add an option blur radius argument
```CSS
h1 {
 text-shadow: 2px 2px 10px #0000FF;
}
```
#####Multiple Shadows
To give an element multiple shadows, separate them with commas
```CSS
h1 {
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
```
####8.Text Transform
The text-transform property allows you to change the capitalization of text. Valid values are: `uppercase, capitalize, lowercase, initial, inherit, and none`
```CSS
.example1 {
 text-transform: uppercase;
}
.example2 {
 text-transform: capitalize;
}
.example3 {
 text-transform: lowercase;
}
```

```HTML
<p class="example1">
 all letters in uppercase <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
 all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
 all letters in lowercase <!-- "all letters in lowercase" -->
</p>
```

####9.Letter Spacing
```CSS
h2 {
 /* adds a 1px space horizontally between each letter;
 also known as tracking */
 letter-spacing: 1px;
   }
```
The letter-spacing property is used to specify the space between the characters in a text.
! letter-spacing also supports negative values:
```CSS
p {
 letter-spacing: -1px;
}
```
[Resource](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)

####10.Text Indent
```CSS
p {
 text-indent: 50px;
}
```
The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element.
Resources:
* [Stackoverflow](https://stackoverflow.com/questions/5856952/indenting-only-the-first-line-of-text-in-a-paragraph)
* [w3.org](https://www.w3.org/TR/CSS21/text.html#propdef-text-indent)
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)

####11.Text Decoration
The text-decoration property is used to set or remove decorations from text
```CSS
h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
```
text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:
```CSS
.title { text-decoration: underline dotted blue; }
```
This is a shorthand version of

```CSS
.title {
 text-decoration-style: dotted;
 text-decoration-line: underline;
 text-decoration-color: blue;
}
```
####12.Word Spacing
#####CSS
```CSS
.normal { word-spacing: normal; }
.narrow { word-spacing: -3px; }
.extensive { word-spacing: 10px; }
```
#####HTML
```HTML
<p>
 <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
 <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
 <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>
```
Resources:
* [MDN](https://developer.mozilla.org/de/docs/Web/CSS/word-spacing)

####13.Font Variant
#####CSS
```CSS
.smallcaps{
 font-variant: small-caps;
}
```

#####HTML
```HTML
<p class="smallcaps">
   Documentation about CSS Fonts
   <br>
   aNd ExAmpLe
</p>
```