p
  | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

+docs-subheading('typography-headings', 'Headings')

.docs-demo.columns
  .column.col-12
    h1
      | H1 Heading 
      small.label 40px
  .column.col-12
    h2
      | H2 Heading 
      small.label 32px
  .column.col-12
    h3
      | H3 Heading 
      small.label 28px
  .column.col-12
    h4
      | H4 Heading 
      small.label 24px
  .column.col-12
    h5
      | H5 Heading 
      small.label 20px
  .column.col-12
    h6
      | H6 Heading 
      small.label 16px

//- headings
pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
H1 Heading
      
H1 Heading 40px
      H1 Heading

+docs-subheading('typography-paragraphs', 'Paragraphs')

p
  | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit].
  | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
p
  | 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.

//- paragraphs
pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
Lorem ipsum dolor sit amet, ...
      
...

+docs-subheading('typography-semantic-text', 'Semantic text elements')

.docs-demo.columns
  .column.col-6.col-xs-12
    abbr(title='Internationalization') I18N
    code.ml-2 abbr
  .column.col-6.col-xs-12
    strong Bold
    code.ml-2 strong
    code.ml-2 b
  .column.col-6.col-xs-12
    cite Citation
    code.ml-2 cite
  .column.col-6.col-xs-12
    code Hello World!
    code.ml-2 code
  .column.col-6.col-xs-12
    del Deleted
    code.ml-2 del
  .column.col-6.col-xs-12
    em Emphasis
    code.ml-2 em
  .column.col-6.col-xs-12
    i Italic
    code.ml-2 i
  .column.col-6.col-xs-12
    ins Inserted
    code.ml-2 ins
  .column.col-6.col-xs-12
    kbd Ctrl + S
    code.ml-2 kbd
  .column.col-6.col-xs-12
    mark Highlighted
    code.ml-2 mark
  .column.col-6.col-xs-12
    ruby
      | 漢 
      rt kan
      | 字 
      rt ji
    code.ml-2 ruby
  .column.col-6.col-xs-12
    s Strikethrough
    code.ml-2 s
  .column.col-6.col-xs-12
    samp Sample
    code.ml-2 samp
  .column.col-6.col-xs-12
    | Text 
    sub Subscripted
    code.ml-2 sub
  .column.col-6.col-xs-12
    | Text 
    sup Superscripted
    code.ml-2 sup
  .column.col-6.col-xs-12
    time 20:00
    code.ml-2 time
  .column.col-6.col-xs-12
    u Underline
    code.ml-2 u
  .column.col-6.col-xs-12
    var x
    |  = 
    var y
    |  + 2
    code.ml-2 var

+docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')

.docs-demo.columns
  .column
    p.h5
      | #[small(lang='zh-Hans') 你好], #[small(lang='ja') こんにちは], #[small(lang='ko') 안녕하세요]
    p.h6 Chinese (Simplified)
    p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
    p.h6 Chinese (Tranditional)
    p(lang='zh-Hant')
      | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
    p.h6 Japanese
    p(lang='ja')
      | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
    p.h6 Korean
    p(lang='ko')
      | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

p
  | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
革命不是请客吃饭，不是做文章……
      
祇園精舎の鐘の声、諸行無常の響きあり……
      
나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……

p
  | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

.docs-demo.columns
  .column
    p(lang='ja').
      祇園精舎の鐘の声、諸行無常の響きあり。
    p(lang='ja').
      祇園精舎の鐘の声、諸行無常の響きあり。

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
祇園精舎の鐘の声、諸行無常の響きあり。……
      
祇園精舎の鐘の声、諸行無常の響きあり。……

+docs-subheading('typography-fonts', 'Fonts')

p
  | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
  | There are also fonts targeted East Asian typography.

pre.code
  code
    :highlight(lang="scss")
      /* Western typography targeted */
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      /* Monospace typography targeted */
      font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;

      /* Chinese (lang="zh" and lang="zh-Hans") targeted */
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
      /* Chinese (lang="zh-Hant") targeted */
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
      /* Japanese (lang="ja") targeted */
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
      /* Korean (lang="ko") targeted */
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;

+docs-subheading('typography-blockquote', 'Blockquote')

blockquote
  p
    | 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

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

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

+docs-subheading('typography-lists', 'Lists')

.docs-demo.columns
  .column.col-4.col-xs-12
    ul.list
      li list item 1
      li
        | list item 2
        ul
          li list item 2.1
          li list item 2.2
          li list item 2.3
      li list item 3
  .column.col-4.col-xs-12
    ol.list
      li list item 1
      li
        | list item 2
        ol
          li list item 2.1
          li list item 2.2
          li list item 2.3
      li list item 3
  .column.col-4.col-xs-12
    dl.list
      dt description list term 1
      dd description list description 1
      dt description list term 2
      dd description list description 2
      dt description list term 3
      dd description list description 3

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

- list item 1
        
- list item 2

- list item 2.1
            
- list item 2.2
            
- list item 2.3

- list item 3

      <!-- description list -->
      <dl>
        <dt>description list term</dt>
        <dd>description list description</dd>
      </dl>