Keeping Your Typography Clean (Heading 1 <h1>)
- Always use <p> tags to fragment paragraphs, pay attention to heading structure. If you’re a novice with XHTML, just challenge yourself to use the most often used codes such as <p>, <h1>, <h2>, <h3>, <img>, and <a>. You’ll be amazed at what you can do.
- Familiarize yourself with the provided CSS styles.
- Never paste directly into the editor from layout programs such as Microsoft Word
- Use a WYSIWYG Editor with a code friendly view.
Component Heading <h1 class=”componentheading”> – i.e. Section | Category
Content Heading <h2 class=”contentheading”> – i.e. Article Title
Heading Two <h2>
This is paragraph <p> text. The image to the left is wrapped inside the paragraph tag and is using a class name of “left”.You can also use a class name of “right” for a right floated/aligned image. The rest of this paragraph is filler text to maintain balance. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam. Pellentesque feugiat sapien a est. Suspendisse augue. Nam ultricies suscipit enim. In hac habitasse platea dictumst. Sed elementum est vel ipsum. Etiam nec sem. In vehicula iaculis justo. Quisque molestie eros eget nibh. Morbi elementum sollicitudin erat. Fusce nec libero nec purus ornare accumsan. Fusce ut quam. Suspendisse et tellus et pede vehicula posuere. Cras et eros id ligula fermentum laoreet. Sed tempus.
Below is a sample of <pre> or <div class=”code”>
#hc-rightcol { width: 180px; float: right; color: #EEEEEE; }
Heading Three <h3>
This is paragraph <p> text. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
- This is a sample Ordered List.
- Lorem ipsum dolor sit amet consectetuer.
- Condimentum quis.
- Congue Quisque augue elit dolor nibh.
Heading Four <h4>
This is paragraph <p> text. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
- This is a sample Unordered List.
- Condimentum quis.
- Congue Quisque augue elit dolor.
- Nunc cursus sem et pretium sapien eget.
- This is a sample Check List (class=”checklist”).
- Dolor Curabitur Nam Nulla augue id iaculis.
- Lorem et nunc congue pede auctor condimentum.
- Nunc cursus sem et pretium sapien eget.
- This is a sample Small Check List (class=”small-checklist”).
- Dolor Curabitur Nam Nulla augue id iaculis.
- Lorem et nunc congue pede auctor condimentum.
- Nunc cursus sem et pretium sapien eget.
- This is a sample Unordered List (class=”stars”).
- Dolor Curabitur Nam Nulla augue id iaculis.
- Lorem et nunc congue pede auctor condimentum.
- Nunc cursus sem et pretium sapien eget.
ROUNDED SPEECH BUBBLE (class=”author”).
SQUARE SPEECH BUBBLE (class=”author”).
ROUNDED SPEECH BUBBLE (class=”author”).
SQUARE SPEECH BUBBLE (class=”author”).
This is a sample clip note. Use <p class=”stickynote”>Your clip note goes here!</p> to form a clip note!
This is a sample download. Use <p class=”download”>Your download goes here!</p> to form a download!
This is a sample Blockquote. Use <blockquote><span class=”open”>Y</span>our quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote ><span class=”open”>Y</span>our quote goes here<span class=”close”>!</span></blockquote> to form a quote!
This is All Caps Quote with Larger First Letter. Use<p class=”scquote”>…your quoted text here…</p>Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. – Author Name
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Vuisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam. Pellentesque feugiat sapien a est. Suspendisse augue. Nam ultricies suscipit enim. In hac habitasse platea dictumst. Sed elementum est vel ipsum. Etiam nec sem. In vehicula iaculis justo. Quisque molestie eros eget nibh. Morbi elementum sollicitudin erat. Fusce nec libero nec purus ornare accumsan. Fusce ut quam. Suspendisse et tellus et pede vehicula posuere. Cras et eros id ligula fermentum laoreet. Sed tempus.
01This is a sample block number. Use <p class=”blocknumber”><span class=”bignumber”>01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class=”blocknumber”><span class=”bignumber”>02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class=”blocknumber”><span class=”bignumber”>03.</span>Your content goes here!</p> to form a block number!
This is sample error message. Use <p class=”alert”>Your error message goes here!</p>.
This is sample info message. Use <p class=”info”>Your info message goes here!</p>.
NOTE: It is possible to specify more than one class for an element like this:<p class=”pullq-condensed coral-light”>. In the example below on right, we have specified two classes for the paragraph: ‘Pull Quote’ and ‘Color.’
This is sample warning message. Use <p class=”warn”>Your tips goes here!</p>.
This is a highlight phrase. Use <span class=”highlight”>Your highlight phrase goes here!</span>.
pull quote: sem et pretium sapien
This is a Magazine Style Drop Cap. The first letter in this paragraph is big. The magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words. The paragraph on the right is an Expanded Pull Quote. Use <p class=”pullq-expanded”>. For Condensed Pull Quote use <p class=”pullq-condensed”>.
This is paragraph <p class=”content”> text. The first line of this paragraph is transformed to small caps. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
There are several predetermined colors available. You can use class on any paragraph, headline, etc:
cobalt-light
coral-dark
coral-light
curry-dark
curry-light
grey-light
lagune-dark
lagune-light
moss-dark
moss-light
ochre-light
olive-dark
olive-light
peach-dark
peach-light
sage-light
slate-dark
slate-light
teal-dark
teal-light
This is an example of small text. Use <p class=”small”>Your text goes here<p>.
To achieve columnar view use the following: <div class=”overall”><div class=”col4″>use class col4 for four column layout</div><div class=”col2″>col2 for two column layout</div></div>
Line Drop H5. Use <h5 class=”line-under”>
This is paragraph <p> text. The headline above uses low line height and bottom border to allow some characters (such as lower case g) to drop below the line. The letter spacing (kerning) is set to -2px. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
The Dark Side Headline. Use <h5 class=”darkside”>
This is paragraph <p> text. Using close letter-spacing and the Georgia font with shadow behind letters for more dramatic effect. Best visible on dark background. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
This is Scriptum Headline H5. Use <h5 class=”scriptum”>
This is <p> text for potential use for magazine style typography. Close line height and letter spacing, almost connected lines… Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus.
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
For the above effect use <p class=”squeezed”>
This is a Hotnews Headline
This is paragraph <p> text. For the above headline use <h5 class=”hotnews”><span>The small part here</span> and large part here</h5>Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Two Fold Headline h5
The Headline H5 Title
This is paragraph <p> text. For the Two Fold headline use
<h5 class=”twofold-a”>top line – use<span>to alter color<span></h5>
<h5 class=”twofold-b”>second line<h5>
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
This is paragraph <p class=”poetry-bask”> text. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus.
This is Script Head
This is Script Sub
Laoreet Vestibulum pharetra pede mattis nunc dapibus
id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
This is paragraph <p class=”poetry-twist”> text. The first letter of this paragraph is transformed to uppercase. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.
Smallcaps Headline h5
This is paragraph <p class=”lux”> text, wisi sed pede, Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Bellair Article Title Headline h5 – Laoreet Vestibulum pharetra
This is paragraph <p class=”bellair”> text. The headline is <h5 class=”bellair [choose color]><span>Headline text</span></h5>. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Caption image
Here we are using a Variation Link. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Simple Headline
This is fancyline – used with text or without (below)
To center headline above use class=”center”. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
========= List of Web Safe Fonts =========
font-family: Arial, Helvetica, sans-serif;. Use: class=”type-arial”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Arial Black’, Gadget, sans-serif;. Use: class=”type-arialblack”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456790
font-family: ‘Bookman Old Style’, serif;. Use: class=”type-bookman”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456791
font-family: ‘Comic Sans MS’, cursive;. Use: class=”type-comic”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456792
font-family: Courier, monospace;. Use: class=”type-courier”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456793
font-family: ‘Courier New’, Courier, monospace;. Use: class=”type-couriernew”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456794
font-family: Garamond, serif;. Use: class=”type-garamond”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456795
font-family: Georgia, serif;. Use: class=”type-georgia”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456796
font-family: Impact, Charcoal, sans-serif;. Use: class=”type-impact”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456797
font-family: ‘Lucida Console’, Monaco, monospace;. Use: class=”type-lucidamono”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456798
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;. Use: class=”type-lucidasans”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456799
font-family: ‘MS Sans Serif’, Geneva, sans-serif;. Use: class=”type-sansserif”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456800
font-family: ‘MS Serif’, ‘New York’, sans-serif;. Use: class=”type-serif”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456801
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;. Use: class=”type-palatino”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456802
font-family: Symbol, sans-serif;. Use: class=”type-symbol”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456803
font-family: Tahoma, Geneva, sans-serif;. Use: class=”type-tahoma”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456804
font-family: ‘Times New Roman’, Times, serif;. Use: class=”type-times”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456805
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;. Use: class=”type-trebuchet”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456806
font-family: Verdana, Geneva, sans-serif;. Use: class=”type-verdana”
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456807
========= List of Other Fonts =========
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Academy Engraved LET’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Acklin, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Agatha, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Agency FB’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Algerian, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: AllensHand, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Arcane, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Arial Black’, Gadget, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Arial Narrow’, Helvetica, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Arial Rounded MT Bold’, Gadget, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Arial, Helvetica, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Author, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Avian, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Balogna, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Bell MT’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Benguiat Frisky ATT’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Black Chancery’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Boink LET’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Book Antiqua’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Bookman Old Style’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Bookplate, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Boston, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Bradley Hand ITC’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Britannic Bold’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Broadway, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Brush Script MT’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Brush Script’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘BrushScript BT’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: BrushStroke, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Calisto MT’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Cataneo BT’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Centaur, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Century Gothic’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Century, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Chancery, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Chiller, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Comic Sans MS’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Cooper Black’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Cooper Md BT’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Courier New’, Courier, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Courier, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Cricket, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Curlz MT’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Daniela, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Dauphin, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Dingbats1, Webdings, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Dingbats2, Webdings, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘DomBold BT’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘DomCasual BT’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Fixedsys, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: FlamencoD, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Footlight MT Light’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Forte, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Franklin Gothic Book’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Franklin Gothic Heavy’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Franklin Gothic Medium’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘French Script MT’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Fritz, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Futurist, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Garamond, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Garnet, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Georgia, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Gigi, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Gilde, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Gill Sans MT Shadow’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Gill Sans MT’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Goudy Old Style’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Hammer Fat’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Hammer Thin’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Harrington, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Helvetica Neue’, Arial, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Helvetica, Arial, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘HelveticaNeue Black’, Arial, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘HelveticaNeue Condensed’, Arial, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘High Tower Text’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Highlight LET’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Hobby Headline’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: IceAgeD, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Impact, Charcoal, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Imprint MT Shadow’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Informal Roman’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Jokerman, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Kids, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Koffee, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Kristen ITC’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Krone, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Blackletter’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Calligraphy’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Casual’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Console’, Monaco, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Fax’, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Fax’, monotype;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Handwriting’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘MS Serif’, ‘New York’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Microsoft Sans Serif’, Geneva, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Modern, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Monotype Corsiva’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Myriad Roman’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Palisade, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Papyrus LET’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Perpetua, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Phyllis, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Poor Richard’, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Pristina, fantasy, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Rage Italic LET’, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Ravie, fantasy, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Rockwell, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Roman, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Schoolbook, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Script, cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Soutane, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Stencil, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Symbol, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: System, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Tahoma, Geneva, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Terminal, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Times New Roman’, Times, serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Typewriter, monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: University, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Vagabond, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Verdana, Geneva, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Webdings, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: cursive;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: fantasy;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: monospace;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: sans-serif;
The quick brown fox jumps over the lazy dog. — ABCDEFGHIJKLMNOPQRSTUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789
font-family: serif;