Skip to main content
Skip to main content

Web Style Guidelines
and Resources

Strata - Version Three

Typography

Florida State University's brand fonts are Adobe Garamond Pro (serif) and Benton Sans (sans-serif) with fallbacks to Times New Roman and Arial. Strata Three utilizes Benton Sans Light, Benton Sans Book and Benton Sans Bold with the Perfect Fourth Modular Scale.

<Webtype>

Benton Sans is available for use on fsu.edu domains with the following code within the <head> of your HTML.

<link href="//cloud.webtype.com/css/83d58b53-6c1e-4957-b3f5-ca921f831767.css" rel="stylesheet" type="text/css" />

Headers


Standard

Header 1 Small

Header 2 Small

Header 3 Small

Header 4 Small

Header 5 Small
Header 6 Small

You may apply classes .h1-.h6 to give the appearance of <h1>-<h6> elements.

Lead Paragraphs

Luptatum in roto minim damnum humo transverbero transverbero quibus. Rusticus indoles premo. Delenit qui damnum distineo defui tation mauris scisco si qui. Nulla erat duis secundum.

Assign the class of .lead to your paragraph or container to apply the effect.

Standard Paragraphs and Inline Styles

Luptatum in roto minim damnum humo transverbero transverbero quibus. Rusticus indoles premo. Delenit qui damnum distineo defui tation mauris scisco si qui. Nulla erat duis secundum.

Eum ratis sagaciter nisl ymo refero sed. Fere adsum aliquam dolus interdico. Comis hendrerit inhibeo illum nobis verto. Saluto quibus os loquor nullus erat qui loquor sagaciter bene. Antehabeo reprobo ullamcorper iaceo wisi typicus damnum ea. Jus demoveo ea suscipit magna tristique dolore delenit molior.

Patria in antehabeo. Quod quidem fatua laoreet gravis consequat zelus veniam olim usitas tego velit. Appellatio tation vulputate iustum augue. Vindico eu usitas nunc neo nulla populus quia saluto minim.

Style Code Example
Bold <b> <strong> Quidne tation opes opto.
Icalics <i> <em> Feugait persto epulae eum.
Small <small> .small Iusto illum velit ut nullus ulciscor inhibeo suscipit.
Marked <mark> Duis plaga molior utrum fatua dolore.
Deleted <del> Melior esse nulla suscipit caecus.
Strikethrough <s> Macto scisco ad nisl voco.
Inserted <ins> Letatio blandit facilisis.
Underlined <u> Aliquam minim consectetuer quidem.
Left .text-left Aliquam minim consectetuer quidem.
Centered .text-center

Aliquam minim consectetuer quidem.

Right .text-right

Aliquam minim consectetuer quidem.

Justified .text-justify

Saluto sit lucidus epulae vel ex ideo. Et ut demoveo abigo duis dolore. Lenis iusto vero nostrud vindico epulae in consequat. Ut gravis feugiat consequat quod consequat plaga. Aptent imputo roto duis paratus iaceo huic tation dolor.

No Wrap .text-nowrap

Velit diam ille premo quia regula hendrerit vel.

Lowercase .text-lowercase

USITAS LUCTUS QUIDEM TE AD IDEO ESCA SED EXPUTO TAMEN

Uppercase .text-uppercase

nutus lobortis nullus humo ex adsum minim

Capitalize .text-capitalize

mauris ad turpis ille nunc suscipit gemino virtus ingenium vulpes tego

Abbreviation <abbr>

An abbreviation of the word attribute is attr

Initialism abbr.initialism HTML is the best thing since sliced bread.

Quotes

Eum ratis sagaciter nisl ymo refero sed. Fere adsum aliquam dolus interdico. Comis hendrerit inhibeo illum nobis verto. Saluto quibus os loquor nullus erat qui loquor sagaciter bene. Antehabeo reprobo ullamcorper iaceo wisi typicus damnum ea. Jus demoveo ea suscipit magna tristique dolore delenit molior.

Luptatum in roto minim damnum humo transverbero transverbero quibus. Rusticus indoles premo. Delenit qui damnum distineo defui tation mauris scisco si qui. Nulla erat duis secundum.

Integer euismod lacus luctus magna.

Eum ratis sagaciter nisl ymo refero sed. Fere adsum aliquam dolus interdico. Comis hendrerit inhibeo illum nobis verto. Saluto quibus os loquor nullus erat qui loquor sagaciter bene. Antehabeo reprobo ullamcorper iaceo wisi typicus damnum ea. Jus demoveo ea suscipit magna tristique dolore delenit molior.

Use .left or .right to float <blockquote> in the small through large breakpoints. Quotes are half of the content width on the small display while medium and large displays are set to one third.

Lists


Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  4. Faucibus porta lacus fringilla vel
  5. Aenean sit amet erat nunc

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Definition

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.

Definition (Horizontal)

The horizontal description list appears the same as the normal description list in mobile view.

Type Adjustments


Font Size

Classes may be added to adjust font sizes at different breakpoints.

XS Name SM Name MD Name LG Name Font Size
s3-fs-xs-1 s3-fs-sm-1 s3-fs-md-1 s3-fs-lg-1 0.750em
s3-fs-xs-2 s3-fs-sm-2 s3-fs-md-2 s3-fs-lg-2 1.000em
s3-fs-xs-3 s3-fs-sm-3 s3-fs-md-3 s3-fs-lg-3 1.333em
s3-fs-xs-4 s3-fs-sm-4 s3-fs-md-4 s3-fs-lg-4 1.777em
s3-fs-xs-5 s3-fs-sm-5 s3-fs-md-5 s3-fs-lg-5 2.369em
s3-fs-xs-6 s3-fs-sm-6 s3-fs-md-6 s3-fs-lg-6 3.157em

Text Alignment

Classes may be added to adjust text alignment at different breakpoints.

XS Name SM Name MD Name LG Name Effect
s3-txt-xs-l s3-txt-sm-l s3-txt-md-l s3-txt-lg-l Align Left
s3-txt-xs-c s3-txt-sm-c s3-txt-md-c s3-txt-lg-c Align Center
s3-txt-xs-r s3-txt-sm-r s3-txt-md-r s3-txt-lg-r Align Right