American Society of Radiologic Technologists (ASRT) logo 

Web Style Guide

Typography

Default styles for all of the most basic typographical elements

Headings

Standard headings.

For accessibility, avoid skipping heading levels when structuring your document, as it confuses screen readers. See Typescale section for alternate styles.

Heading 1 - How quickly daft jumping zebras vex.

Heading 2 - How quickly daft jumping zebras vex.

Heading 3 - How quickly daft jumping zebras vex.

Heading 4 - How quickly daft jumping zebras vex.

Heading 5 - How quickly daft jumping zebras vex.
Heading 6 - How quickly daft jumping zebras vex.

HTML h1

Standard headings paired with subheader

Subheader class will inherit parent font size but grey colour and normal weight. Subheader class may also be added to any header element to lighten it up.

Heading 1 - How quickly daft jumping zebras vex.
How razorback jumping frogs can level six piqued gymnasts.


Heading 2 - How quickly daft jumping zebras vex.
How razorback jumping frogs can level six piqued gymnasts.


Heading 3 - How quickly daft jumping zebras vex.
How razorback jumping frogs can level six piqued gymnasts.


Heading 4 - How quickly daft jumping zebras vex.
How razorback jumping frogs can level six piqued gymnasts.


Heading 5 - How quickly daft jumping zebras vex.
How razorback jumping frogs can level six piqued gymnasts.

Heading 6 - How quickly daft jumping zebras vex.
How razorback jumping frogs can level six piqued gymnasts.

HTML h1 .subheader

Standard headings paired with small

Small tags will inherit parent font styles but size 80% smaller.

Heading 1 - How quickly daft jumping zebras vex. Version 1.3

Heading 2 - How quickly daft jumping zebras vex. Version 1.3

Heading 3 - How quickly daft jumping zebras vex. Version 1.3

Heading 4 - How quickly daft jumping zebras vex. Version 1.3

Heading 5 - How quickly daft jumping zebras vex. Version 1.3
Heading 6 - How quickly daft jumping zebras vex. Version 1.3

HTML h1 small

Paragraphs

Standard paragraph

Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.

Galão kopi-luwak siphon in cinnamon qui, con panna robusta redeye as blue mountain. Barista, con panna crema white, et extraction cinnamon as aftertaste irish. Saucer, coffee est to go milk, sugar cup filter organic galão. Lungo mocha, flavour café au lait milk, americano medium a viennese organic crema.


HTML p

Lead paragraph

Lead or "intro" paragraphs are larger in font size and serif style. More commonly used in articles and informational pages with heavy content.

Galão kopi-luwak siphon in cinnamon qui, con panna robusta redeye as blue mountain. Barista, con panna crema white, et extraction cinnamon as aftertaste irish. Saucer, coffee est to go milk, sugar cup filter organic galão. Lungo mocha, flavour café au lait milk, americano medium a viennese organic crema.

Fair trade organic seasonal galão crema robusta percolator bar mazagran whipped barista single origin. Fair trade flavour extra instant to go irish sugar caffeine. Robusta, steamed white redeye percolator cultivar single shot percolator con panna. Aged turkish, macchiato roast foam affogato spoon irish siphon irish half and half.


HTML p .lead

Paragraph with small

How quickly daft jumping zebras vex.
Soft break within a paragraph. How razorback jumping frogs can level six piqued gymnasts.

How quickly daft jumping zebras vex.

Soft break within a paragraph. How razorback jumping frogs can level six piqued gymnasts.

HTML p small

Font Styles

Italic

A sloping kind of typeface used especially for emphasis or distinction. Note: i tag is not supported in Sitefinity CMS.

Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.

HTML em

Blockquote

Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.

Breve sugar aroma caramelization cinnamon frappuccino flavour. Con panna cup aftertaste, et and milk a bar cream. Seasonal roast, black white eu roast flavour decaffeinated. And, turkish, carajillo sweet skinny barista, whipped rich cream viennese to go.

Bar, grounds mug, mazagran caffeine single shot frappuccino coffee sweet. Iced ut, sit decaffeinated arabica filter to go. Breve, caffeine, aged pumpkin spice robusta seasonal cortado americano sugar caffeine aroma. Black milk, chicory macchiato affogato bar cinnamon.



HTML blockquote

Cite

Street Shark

Street Sharks An American-Canadian animated series about the adventures of crime-fighting half-man/half-sharks.



HTML cite

Highlight

Fair trade flavour extra instant to go irish sugar caffeine. Coffee blue mountain aromatic. To go barista, aromatic skinny milk, con panna, ut cream mocha variety extra.



HTML mark

Strikethrough

Note: strike is not supported in Sitefinity CMS.

Fair trade flavour extra instant to go irish sugar caffeine. Coffee blue mountain aromatic. To go barista, aromatic skinny milk, con panna, ut cream mocha variety extra.



HTML del

Statistic Number

13,000
Longest distance in miles traveled to attend conference (Bahrain)



HTML .stat

Abbreviation Help

Not intended as a tooltip.

In my dream last night, I was editing an article on the CMS and editing CSS while testing the CRM on my iOS.



HTML abbr

Superscript and Subscript

X3 H2O



HTML sup sub

Definition List

Macchiato
dark coffee turkish
Espresso
caramelization cinnamon


HTML

Font Weights

Bold

Note: b is not supported in Sitefinity CMS.

Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.

HTML strong

Variable Weights

Most fonts are already weighted within the CSS selector, however in some circumstances you may need to adjust font weight. Use only as truly necessary.

These styles have not yet been added to the main stylesheet

.fw-400

I am the same as font weight normal. Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.


.fw-600

I am a demi-bold weight. Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.


.fw-700

I am the same as font weight bold. Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.



HTML

Typescale

Small

80% smaller than its parent element and may be paired with any font tag. Most commonly used for scaling down.

Kopi-luwak, irish, medium ut id sugar redeye americano. Coffee blue mountain white, whipped galão black turkish saucer aromatic. Medium cinnamon mug french press to go roast siphon. Fair trade, mocha cream that café au lait saucer robusta.

HTML small

Faux Headings

Mimic any heading style from a p or h1 through h6. It is important to avoid skipping heading levels when structuring a document, as it confuses screen readers. Use these as style alternatives.

This is an H2 with an H1 style


HTML .h1

Variable Sizes

Measurements start from 100% baseline. Any value lower will be smaller and higher will be larger. Adjust font-size by overriding an element’s default size. Use only as truly necessary.

These styles have not yet been added to the main stylesheet

I am 50% smaller. Robusta whipped cream fair trade chicory.

I am 75% smaller. Robusta whipped cream fair trade chicory.

I am 125% larger. Robusta whipped cream fair trade chicory.

I am 150% larger. Robusta whipped cream fair trade chicory.

I am 175% larger. Robusta whipped cream fair trade chicory.

I am 200% larger. Robusta whipped cream fair trade chicory.

I am 225% larger. Robusta whipped cream fair trade chicory.

I am 250% larger. Robusta whipped cream fair trade chicory.

I am 275% larger. Robusta whipped cream fair trade chicory.

I am 300% larger. Robusta whipped cream fair trade chicory.


HTML

 

Lettering is like clay. Type is like Lego. -Mark Simonson