C&EN Style Guide

Colors

Alizarin Crimson
#EC272D
236, 39, 45

Pickled Bluewood
#243140
36, 49, 64

Merlot
#862534
134, 37, 52

Fiord
#415469
65, 84, 105

Lynch
#586C84
88, 108, 132

Gull Gray
#96A8B7
150, 168, 183

Mine Shaft
#333333
51, 51, 51

Seashell
#F1F1F1
241, 241, 241


Fonts and Example Text

H1 - Page Titles

Font; Style; Size; Color
'Farnham Display Black', Georgia, sans-serif, Georgia, 'Times New Roman', Times, serif; normal; 22pt-29px-1.8em; #333333

The quick brown fox jumps over the lazy dog


Article Decks

Font; Style; Size/Leading; Color, Other
"Franklin ITC", Arial, Helvetica, sans-serif; uppercase; 13.5pt-18px-1.125em; #862534;

The quick brown fox jumps over the lazy dog

(Appears after the page title.)


H2 - Article Chapter Headings

Font; Style; Size/Leading; Color
"Scout Cond", Arial, Helvetica, Verdana, sans-serif; uppercase; 2.5rem/2; #862534

Code:

<h2 class="subheader">title goes here</h2>

The quick brown fox jumps over the lazy dog

(Appears anywhere in article to illustrate new section/chapter.)


H2 - Alt Article Chapter Headings

Font; Style; Size/Leading; Color
"Scout Cond", Arial, Helvetica, Verdana, sans-serif; uppercase; 2.5rem/2; #ec272d

Code:

<h2 class="red-subheader">title goes here</h2>

The quick brown fox jumps over the lazy dog


Section Labels

Font; Style; Size/Leading; Color, Other
"Scout Cond", Arial, Helvetica, Verdana, sans-serif; uppercase; 16pt-22px-1.4em; #fff;

Label

(Appears on landing pages and article page navigation boxes.)


Eyebrow Headings

Font; Style; Size/Leading; Color
"Franklin ITC", Arial, Helvetica, sans-serif, uppercase, 9pt-12px-0.75em, #243140

Eyebrow

(Appears above the page title as a section indicator.)


P - Paragraph text

Font; Style; Size/Leading; Color
"Franklin ITC Light", Arial, Helvetica, sans-serif, normal, 12pt-16px-1em, #333333

The quick brown fox jumps over the lazy dog


P - Paragraph hyperlinks

Font; Style; Size/Leading; Color
"Franklin ITC", Arial, Helvetica, sans-serif, normal, 12pt-16px-1em, #243140

Sidebars


Code:

<div class="hidden-box">
<h3>Sidebar: Title of sidebar</h3>
<a href="#hide1" class="hide" id="hide1"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<a href="#show1" class="show" id="show1"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<div class="box-contents">
<p>contents go here</p>
</div>
</div>


Example:

Sidebar: Title of sidebar

Facilisis etiam mattis nec, aliquam! Natoque integer augue, mid et ultricies? Auctor, ac nunc urna urna quis nisi, pulvinar porta, placerat, lorem purus? Mattis? Velit? Cursus adipiscing mid auctor, dapibus purus, montes urna non, mattis est scelerisque, rhoncus tristique etiam magnis cras, nec nisi dignissim ridiculus hac mauris, natoque dictumst tincidunt, aliquet phasellus nec. Quis vel in sit elementum cursus, vel diam turpis ac, hac, porttitor lectus magna et enim turpis in. Pulvinar tempor velit sed, tortor? Dis sagittis magnis! Adipiscing! Aenean nec placerat amet lacus tortor vut! Sit purus adipiscing odio pellentesque. Velit rhoncus. Amet, a in turpis. Sed. Urna sed, nec adipiscing porttitor vel mus turpis, dapibus aenean purus vut sociis nascetur pulvinar pulvinar lacus ultrices mus ut.

Risus integer pulvinar lorem placerat, parturient ridiculus, cum in? Turpis sociis? Adipiscing pulvinar dictumst, cum natoque phasellus porttitor habitasse sed, phasellus natoque sociis! Urna urna nec? Urna tincidunt dictumst. Sit rhoncus turpis. Tristique! Nec a adipiscing pid vut non! Natoque, est, mattis quis in porttitor cursus ultrices. Sit tempor! Ridiculus, lectus, pid turpis lundium nec, elementum platea porttitor sed? Elementum etiam, sed, magna, ac? Mauris amet nisi scelerisque enim! Et ac pid pellentesque, in pulvinar! Magna tempor? Sit tristique nisi vel nisi proin, scelerisque tincidunt. Sit aliquam magna odio et placerat sociis augue pellentesque, a. Sociis lacus ultrices, nisi. Vel rhoncus phasellus et, adipiscing magnis, dolor egestas. Odio ac? Facilisis porttitor! Urna in, natoque sit non odio integer lundium.

Penatibus tincidunt et vel integer aliquet magna massa vel? Dignissim dictumst. Pulvinar penatibus sed. A, nunc non, integer lorem pellentesque dis odio nec, magna scelerisque dapibus nunc, diam a! Lorem? Aenean magnis? Auctor ut lorem, aliquet lundium habitasse purus elementum dapibus, egestas tempor, arcu, pulvinar cursus sociis. Magna vel pid egestas ut egestas aliquet sagittis dis, in platea et. Egestas! Dictumst et cras magna nec ac, a? Nec turpis amet nisi, placerat elit. Penatibus ridiculus enim nec, platea odio porta ac tempor odio egestas, lacus magna ac ac purus, porttitor sed sit placerat. A integer. Nisi elit phasellus placerat magnis rhoncus, scelerisque, nec turpis sociis porta pulvinar, porta. Ultricies platea magnis, aenean et scelerisque porta porttitor? Turpis in sed.

Integer! Augue odio lectus hac, vel enim, integer? Augue. Parturient adipiscing placerat lorem elementum? Sit odio, cursus? In enim, mauris scelerisque sed sociis nisi, non cursus cras ultrices sit! Sed auctor. Egestas porta nisi habitasse, aenean amet, elementum! Penatibus ut est in nunc dignissim proin. Mus tempor! Nunc dis massa aliquet sagittis, ac. Pellentesque amet sit natoque diam magnis, aenean placerat ridiculus, habitasse cum elementum ac sit dolor? Dapibus elementum nisi! Dictumst ac, in sit habitasse adipiscing dolor lundium aliquam? Lorem mauris, scelerisque, ac! Lorem a etiam, pulvinar nisi. Non, in nisi porta integer pulvinar penatibus egestas magnis lundium? Eros arcu, eros placerat. Velit nascetur augue et? Enim, porta cursus eu ultrices cursus, integer mauris dis placerat aliquet risus.