bettertext.css test page

There are all typography usecases covered by bettertext.css.

Body text and headers

Have you ever finally just gave in to the temptation and read your horoscope in the newspaper on Sunday morning? Sure, we all have. For most of us, it’s a curiosity, an amusement to see what they say our day will be like based on the sign of the zodiac that we were born under. Sometimes we forget that this little diversion is actually part of an ancient science called astrology that has had a powerful effect on many cultures dating back to centuries before Christ.

That is not to say that astrology is a dead art today. It is easy to find astrology advocates in every town, advertising in the newspaper and on television trying to convince us that they can tell our fortune, our future and help cure our ills by exploring the mysteries of astrology.

H1. I watched the storm, so beautiful yet terrific

H2. Almost before we knew it, we had left the ground

H3. A shining crescent far beneath the flying vessel

H4. Mist enveloped the ship three hours out from port

H5. A red flair silhouetted the jagged edge of a wing
H6. My two natures had memory in common

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

H1. I watched the storm, so beautiful yet terrific

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

H2. I watched the storm, so beautiful yet terrific

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

H3. I watched the storm, so beautiful yet terrific

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

H4. I watched the storm, so beautiful yet terrific

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

H5. I watched the storm, so beautiful yet terrific

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

H6. I watched the storm, so beautiful yet terrific

Paragraph. Then came the night of the first falling star. The face of the moon was in shadow. She stared through the window at the stars.

Lists

Ordered list:

  1. Lorem ipsum dolor sit amet
  2. Tenetur molestiae
    1. Coffee
    2. Milk
    3. Tea
      1. green
      2. black
      3. white
  3. Fuga et optio iure tempore
  4. Dolores accusantium neque
  5. ...
  1. Magnam natus
  2. Maxime nam sed
  3. Atque repellendus

Unordered list:

  • Lorem ipsum dolor sit amet
    • Tenetur molestiae
    • Fuga et optio iure tempore
    • Dolores accusantium neque
      • ipsum
      • dolor
      • sit amet
  • Nemo magnam natus saepe
  • maxime nam sed sunt veritatis atque repellendus

Definition list:

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Floating images and list markers

When you are a lover of astronomy, the confusion between astronomy and astrology by those who don’t really understand the differences can get pretty aggravating.

Over the next 2000 years, we have come a long way. Not only has science and religion completely gone their separate ways since Ptolemy but the science of astronomy makes tremendous strides every year that are so phenomenal, Ptolemy would be truly astounded.

Tables

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption
Compiled in 2008 by Ms Jen

Blockquotes

Simple blockquote:

The blockquote element represents a section that is quoted from another source.

Or with structure tags inside:

Blockquote definition updated

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

Figures and captions

image placeholder

Sign inside figcaption

Paragraphs

<figure>
    <img src="http://placehold.it/600x400" width="600" height="400" alt="image">
    <figcaption>Sign inside figcaption</figcaption>
</figure>
image placeholder
Sign inside figcaption

Other tags

Address: Example address 224, Sweden

I am the a tag example
I am the ABBR tag with title and ABBR without
I am the b tag example
I am the strong tag example
I am the code tag example
I am the kbd tag example
I am the samp tag example
I am the del tag example
I am the ins tag example
I am the dfn tag example
I am the em tag example
I am the i tag example
I am the cite tag example
I am the q tag example
I am the big tag example
I am the small tag example
I am the span tag example
I am the sup tag example
I am the sub tag example
I am the var tag example
I am the mark tag example