Typography

Franklin Gothic was chosen as the primary typeface to add a bold, modern look to the site and to provide users with strong visual markers for dense site content. The web font version of the Franklin Gothic typeface is also utilized to maintain a strong visual identity throughout the site with minimal graphics production and reliance on generic system fonts. Icon fonts have also been introduced to streamline the display of icons. Lucida Grande was chosen as the default system text given it’s legibility on multiple devices and it’s round, friendly characteristics.

For questions about FoodNetwork.com typography please contact us, styleguide@foodnetwork.com

Typefaces

For licensing and purchasing information of URW Franklin Gothic please visit You Work For Them


Franklin Gothic Extra Compressed Book

Page and header titles 60 pts. and higher

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)


Franklin Gothic Extra Compressed Demi

Module headers for both main content well and the right rail

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)


Franklin Gothic Condensed Demi

Condensed Demi was changed to Condensed Medium for the web font applications. Condensed Demi should still continue to be used for flat graphic applications.

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)


Franklin Gothic Demi

Button text.

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)


Georgia Italic

Large text intros and quotes

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)


Lucida Grande

Site text font. Generally, this font should not be used at sizes above 14 pts.

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)

Type-Sizes

unit of measure: rem


8.0

size 14px

class .ts-eight-zero

Inceptos Mattis


6.4

size 14px

class .ts-six-four

Euismod Ipsum


6.0

size 14px

class .ts-six-zero

Vestibulum Tellus


4.8

size 14px

class .ts-four-eight

Ullamcorper


4.2

size 14px

class .ts-four-two

Sollicitudin Purus


4.0

size 14px

class .ts-four-zero

Venenatis Commodo Purus


3.6

size 14px

class .ts-three-six

Sit Cras Euismod


3.2

size 14px

class .ts-three-two

Tristique Fusce Amet Nibh Ipsum


3.0

size 14px

class .ts-three-zero

Adipiscing Risus Ornare


2.4

size 14px

class .ts-two-four

Purus Ornare Adipiscing Pharetra Fringilla


2.2

size 14px

class .ts-two-two

Lorem Consectetur Ultricies Inceptos


2.0

size 14px

class .ts-two-zero

Vestibulum Egestas Purus Justo Nullam Mollis Pharetra


1.8

size 14px

class .ts-one-eight

Tellus Dolor Purus Vehicula Sollicitudin Malesuada


1.6

size 14px

class .ts-one-six

Ornare Sit Justo Euismod Ridiculus Risus Ligula Tortor Porta Amet


1.4

size 14px

class .ts-one-four

Fringilla Dapibus Condimentum Ridiculus Tortor Ultricies Consectetur Nullam Risus


1.3 - base size

size 14px

class .ts-one-three

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


1.2

size 14px

class .ts-one-two

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


1.1

size 14px

class .ts-one-one

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam.


1.0

size 14px

class .ts-one-zero

Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.


0.9

size 14px

class .ts-zero-nine

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Headlines
H1

font-family 14px

size 14px

line-height 14px

color 14px

Amet Consectetur Condimentum Cursus


H2

font-family 14px

size 14px

line-height 14px

color 14px

Tellus Dolor Dapibus Vestibulum Euismod


H3

font-family 14px

size 14px

line-height 14px

color 14px

Mattis Adipiscing Risus Condimentum


H4

font-family 14px

size 14px

line-height 14px

color 14px

Commodo Mattis Pellentesque Vestibulum Tellus


H5

font-family 14px

size 14px

line-height 14px

color 14px

Etiam Amet Fringilla Cras Commodo

H5 Complimentary

This is the primary headline style for right rail modules.

font-family 14px

size 14px

line-height 14px

color 14px

Ligula Amet Ornare

H6

font-family 14px

size 14px

line-height 14px

color 14px

Condimentum Malesuada Ridiculus Etiam Commodo

H6 Grouped

font-family 14px

size 14px

line-height 14px

color 14px

Condimentum Malesuada Ridiculus Etiam Commodo

Intros
Intro

font-family 14px

size 14px

line-height 14px

color 14px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, nulla qui explicabo obcaecati maiores id ipsam mollitia! Laudantium, consectetur harum voluptatum tempore nemo ullam ipsa.


Intro Small

font-family 14px

size 14px

line-height 14px

color 14px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, nulla qui explicabo obcaecati maiores id ipsam mollitia! Laudantium, consectetur harum voluptatum tempore nemo ullam ipsa.

Body Copy
Paragraph Text

font-family 14px

size 14px

line-height 14px

color 14px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, accusamus, dolores est veniam minus maiores eos ea vitae consequatur aliquid quod possimus velit libero facere tenetur dolor asperiores odit dolorum voluptates reprehenderit corporis tempora hic nemo assumenda obcaecati error at sed iste ipsa voluptas nostrum recusandae molestias distinctio! Non, quos!

Ratione, explicabo, accusantium totam voluptatum hic quos voluptatem rerum voluptatibus quam incidunt tenetur laboriosam ut. Sed, eveniet sint id voluptatem iste mollitia similique reiciendis commodi aut. Voluptatibus, quo, excepturi illo culpa quaerat odio rerum voluptatem ea harum vero ullam tenetur optio animi eligendi molestias ut alias! Voluptatum, nemo laborum repellat.

Lists
Unstyled

font-family 14px

size 14px

line-height 14px

color 14px

  • Lorem ipsum dolor sit amet.
  • Eaque nihil nulla sapiente delectus.
  • Ut, excepturi dignissimos harum illum.
  • Minima, aperiam modi autem architecto.
  • Harum, incidunt iste eum expedita.

Styled

font-family 14px

size 14px

line-height 14px

color 14px

  • Lorem ipsum dolor sit amet.
  • Eaque nihil nulla sapiente delectus.
  • Ut, excepturi dignissimos harum illum.
  • Minima, aperiam modi autem architecto.
  • Harum, incidunt iste eum expedita.

Ordered

font-family 14px

size 14px

line-height 14px

color 14px

  1. Lorem ipsum dolor sit amet.
  2. Eaque nihil nulla sapiente delectus.
  3. Ut, excepturi dignissimos harum illum.
  4. Minima, aperiam modi autem architecto.
  5. Harum, incidunt iste eum expedita.

Inline

If you need to display a list of items in line next to each other use .inline

  • Lorem
  • Iure
  • Eaque
  • Nobis

Additional Spacing

If more space is required between list items use .spaced. This increases the space between list items to 21px.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Culpa, commodi assumenda eum vel voluptas ullam provident.
  • Odio pariatur recusandae commodi a dicta similique facilis!
  • Quis, eaque deleniti accusantium est aliquam harum dignissimos.
  • Praesentium aperiam veritatis vel id libero molestiae impedit.
Blockquotes
Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title