Citation Characters
Citation and reference markup for attributing sources.
Basic Citation
As mentioned in The Elements of Typographic Style by Robert Bringhurst, typography is the craft of endowing human language with a durable visual form.
<p>
As mentioned in
<cite>The Elements of Typographic Style</cite>
by Robert Bringhurst, typography is the craft of endowing human
language with a durable visual form.
</p>Citation with Blockquote
"Design is not just what it looks like and feels like. Design is how it works."
<blockquote
style="
border-left: 4px solid var(--color_text_primary);
padding: 20px 24px;
margin: 0;
background: var(--color_fill_secondary);
"
>
<p
style="
margin: 0 0 12px;
font-size: 18px;
font-style: italic;
line-height: 1.6;
"
>
"Design is not just what it looks like and feels like. Design
is how it works."
</p>
<footer style="font-size: 14px; opacity: 0.8">
— <cite>Steve Jobs</cite>, in an interview with The New York
Times, 2003
</footer>
</blockquote>Academic Citation Formats
Bringhurst, R. (2004). The elements of typographic style (3rd ed.). Hartley & Marks.
Bringhurst, Robert. The Elements of Typographic Style . 3rd ed., Hartley & Marks, 2004.
Bringhurst, Robert. The Elements of Typographic Style . 3rd ed. Point Roberts, WA: Hartley & Marks, 2004.
<div style="display: flex; flex-direction: column; gap: 20px">
<!-- APA Style -->
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 2px;
"
>
<span
style="
font-size: 12px;
opacity: 0.6;
text-transform: uppercase;
"
>
APA Style
</span>
<p style="margin: 8px 0 0; font-size: 14px">
Bringhurst, R. (2004).
<cite style="font-style: italic">
The elements of typographic style
</cite>
(3rd ed.). Hartley & Marks.
</p>
</div>
<!-- MLA Style -->
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 2px;
"
>
<span
style="
font-size: 12px;
opacity: 0.6;
text-transform: uppercase;
"
>
MLA Style
</span>
<p style="margin: 8px 0 0; font-size: 14px">
Bringhurst, Robert.
<cite style="font-style: italic">
The Elements of Typographic Style
</cite>
. 3rd ed., Hartley & Marks, 2004.
</p>
</div>
<!-- Chicago Style -->
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 2px;
"
>
<span
style="
font-size: 12px;
opacity: 0.6;
text-transform: uppercase;
"
>
Chicago Style
</span>
<p style="margin: 8px 0 0; font-size: 14px">
Bringhurst, Robert.
<cite style="font-style: italic">
The Elements of Typographic Style
</cite>
. 3rd ed. Point Roberts, WA: Hartley & Marks, 2004.
</p>
</div>
</div>Inline Citations
Typography has been described as "the craft of endowing human language with a durable visual form" [1] . This definition emphasizes the relationship between language and visual representation. Recent studies have shown that good typography can improve reading comprehension by up to 20% [2] .
References:
[1] Bringhurst, R. (2004). The Elements of Typographic Style
[2] Smith, J. (2020). Typography and Reading Comprehension Study
<p style="line-height: 1.8">
Typography has been described as "the craft of endowing human
language with a durable visual form"
<cite
style="
font-size: 13px;
vertical-align: super;
color: var(--ss-color-link);
"
>
[1]
</cite>
. This definition emphasizes the relationship between language and
visual representation. Recent studies have shown that good
typography can improve reading comprehension by up to 20%
<cite
style="
font-size: 13px;
vertical-align: super;
color: var(--ss-color-link);
"
>
[2]
</cite>
.
</p>
<div
style="
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color_line_secondary);
font-size: 13px;
"
>
<p style="margin: 0 0 4px"><strong>References:</strong></p>
<p style="margin: 0; opacity: 0.8">
[1] Bringhurst, R. (2004). The Elements of Typographic Style
</p>
<p style="margin: 0; opacity: 0.8">
[2] Smith, J. (2020). Typography and Reading Comprehension
Study
</p>
</div>