extends ../_layout/_docs-layout.pug
block variables
- var slug = 'typography'
- var parent = 'elements'
- var title = 'Typography - Elements - Spectre.css CSS Framework'
- var description = 'Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('typography', 'Typography')
include ../_layout/_ad-g.pug
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(class='accent')
| H4 Heading
small.label 24px
.column.col-12
h5(class='accent-2')
| H5 Heading
small.label 20px
.column.col-12
h6(class='accent-3')
| 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(class='accent')
| 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
| Add the #[code lang] attribute to the #{''} element or use the class #[code lang-zh], #[code lang-zh-hans], #[code lang-zh-hant], #[code lang-ja] or #[code lang-ko] 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 lang-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 term
- description list description
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug