---
title: 'Text & Typography'
url: 'https://staging-2.chinookarbor.ca/blog/text-typography'
markdown: 'https://staging-2.chinookarbor.ca/blog/text-typography.md'
date: '2020-10-09'
description: 'The Typhoon theme is powered by the Tailwind CSS framework which is a modern utility-based CSS framework. It provides utility classes for almost every possible CSS style element, but it also provides some basic built-in styling for for common HTML tags such as those that are output by Markdown content from Grav. To make use of this built-in styling, simply ensure you content is wrapped in the .prose class, and let Typhoon'
taxonomy:
  category:
    - blog
  tag:
    - journal
  archives_month:
    - oct_2020
  archives_year:
    - '2020'
---

![Hero Image](https://staging-2.chinookarbor.ca/user/pages/04.blog/text-typography/unsplash-text.jpg)

   9th Oct 2020  

#  Text & Typography 

 [  journal  ](https://staging-2.chinookarbor.ca/blog/tag:journal#blog_list) 

  [ Home ](https://staging-2.chinookarbor.ca/)     [ Blog ](https://staging-2.chinookarbor.ca/blog)      Text & Typography    

The [Typhoon theme](https://getgrav.org/premium/typhoon) is powered by the [Tailwind CSS framework](https://tailwindcss.com) which is a modern utility-based CSS framework. It provides utility classes for almost every possible CSS style element, but it also provides some basic built-in styling for for common HTML tags such as those that are output by **Markdown** content from Grav.

To make use of this built-in styling, simply ensure you content is wrapped in the `.prose` class, and let Typhoon do the rest!

Details on the full capabiltiies of Tailwind CS framework can be found in the [Official Tailwind Documentation](https://tailwindcss.com/docs)

Here's some example markdown showing off the built-in CSS styling of the `.prose` class:

### Headings

# H1 Heading `40px`

## H2 Heading `32px`

### H3 Heading `28px`

#### H4 Heading `24px`

##### H5 Heading `20px`

###### H6 Heading `16px`

```html
# H1 Heading
# H1 Heading `40px`</small>`

<span class="h1">H1 Heading</span>
```

### Paragraphs

Lorem ipsum dolor sit amet, consectetur [adipiscing elit. Praesent risus leo, dictum in vehicula sit amet](#), feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

### Markdown Semantic Text Elements

**Bold** `**Bold**`

*Italic* `_Italic_`

Deleted `~~Deleted~~`

`Inline Code` ``Inline Code``

### HTML Semantic Text Elements

I18N `<abbr>`

Citation `<cite>`

Ctrl + S `<kbd>`

TextSuperscripted `<sup>`

TextSubscxripted `<sub>`

Underlined `<u>`

Highlighted `<mark>`

20:14 `<time>`

x = y + 2 `<var>`

### Blockquote

> The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
> 
> \- Bill Gates

```markdown
> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>- Bill Gates</cite>
```

### Unordered List

- list item 1
- list item 2 
    - list item 2.1
    - list item 2.2
    - list item 2.3
- list item 3

```markdown
* list item 1
* list item 2
    * list item 2.1
    * list item 2.2
    * list item 2.3
* list item 3
```

### Ordered List

1. list item 1
2. list item 2 
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
3. list item 3

```markdown
1. list item 1
1. list item 2
    1. list item 2.1
    1. list item 2.2
    1. list item 2.3
1. list item 3
```

### Table

| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |

```markdown
| Name                        | Genre                         | Release date         |
| :-------------------------- | :---------------------------: | -------------------: |
| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |
| The Godfather               | Crime, Drama                  | 24 March 1972        |
| Schindler's List            | Biography, Drama, History     | 4 February 1994      |
| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |
```

### Notices

The notices styles are actually provided by the `markdown-notices` plugin but are useful enough to include here:

This is a warning notification

This is a error notification

This is a default notification

This is a success notification

```markdown
! This is a warning notification

!! This is a error notification

!!! This is a default notification

!!!! This is a success notification
```

 [ Previous Post](https://staging-2.chinookarbor.ca/blog/daring-fireball-link) [Next Post ](https://staging-2.chinookarbor.ca/blog/page-overrides) 

#### Other Related Posts:

 [ ![Powerful Overrides](https://staging-2.chinookarbor.ca/user/pages/04.blog/page-overrides/unsplash-overcast-mountains.jpg) ](https://staging-2.chinookarbor.ca/blog/page-overrides) [  journal  ](https://staging-2.chinookarbor.ca/blog/tag:journal#blog_list) [  photography  ](https://staging-2.chinookarbor.ca/blog/tag:photography#blog_list) 

###  Powerful Overrides 

[Powerful Overrides](https://staging-2.chinookarbor.ca/blog/page-overrides)

The [Typhoon theme](https://getgrav.org/premium/typhoon) has powerful **page-level overrides** that let you customize the look of each page. Child pages will then use any parent's settings as overrides before falling back to the **theme-level defaults**. This allows you to easily give your blog post some **bling**.

 9th Oct 2020 - Tasha Maxwell 

 [  journal  ](https://staging-2.chinookarbor.ca/blog/tag:journal#blog_list) [  link  ](https://staging-2.chinookarbor.ca/blog/tag:link#blog_list) 

###  » DF Style Article Link 

[» DF Style Article Link](http://daringfireball.net)

The Typhoon blog skeleton also supports **Daring Fireball** style link posts. Simply add a link setting in your page header:

```
link: http://daringfireball.net
```

And your blog title becomes a link directly to that link you specified. Easy peasy!

 8th Oct 2020 

- [Home](https://staging-2.chinookarbor.ca/)
- [Services](https://staging-2.chinookarbor.ca/services)
- [About](https://staging-2.chinookarbor.ca/about)
- [Blog](https://staging-2.chinookarbor.ca/blog)
- [Blog-chinook](https://staging-2.chinookarbor.ca/blog-chinook)
- [Request A Quote](https://staging-2.chinookarbor.ca/request-quote)
- [Modular Page](https://staging-2.chinookarbor.ca/modular)
- [Login](https://staging-2.chinookarbor.ca/login)

---

## Navigation

- Parent: [Blog](https://staging-2.chinookarbor.ca/blog.md)
- Previous: [Powerful Overrides](https://staging-2.chinookarbor.ca/blog/page-overrides.md)
- Next: [DF Style Article Link](https://staging-2.chinookarbor.ca/blog/daring-fireball-link.md)