Typeface
RDS uses the webfont family Gotham Narrow ScreenSmart from Hoefler&Co.
This is a paid font and cannot be distributed freely. If you are using RDS and publishing your site on the carleton.ca domain, Gotham is available and paid for by ITS.
To use the Gotham web font for other uses, you will need to inquire about usage, email web@carleton.ca.
Type Scale
The type scale consists of 12 different font sizes. The default size applied to the body copy is 16px (Medium). Any new elements with text should use a font size from the scale below.
54px - XXXXXL
48px - XXXXL
36px - XXXL
30px - XXL
28px - XL
24px - L
20px - ML
18px - M
16px - MS
14px - S
13px - XS
12px - XXS
SASS Variables
To help align with the type scale, the following SASS variables are available for setting font-sizes in SCSS files:
- $pixel12: 12px;
- $pixel13: 13px;
- $pixel14: 14px;
- $pixel16: 16px;
- $pixel18: 18px;
- $pixel20: 20px;
- $pixel24: 24px;
- $pixel28: 28px;
- $pixel30: 30px;
- $pixel36: 36px;
- $pixel48: 48px;
- $pixel54: 54px;
Font Weights
Three font weights are used in RDS:
- Gotham Narrow ScreenSmart Light
font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
font-style: normal;
font-weight: 300;
- Gotham Narrow ScreenSmart Book
font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
font-style: normal;
font-weight: 400;
- Gotham Narrow ScreenSmart Medium
font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
font-style: normal;
font-weight: 500;
Text formatting
Text can be used in many different html tags — <p>, <small>, <strong>, <time>. While our CSS handles the visual aesthetics, always try and reach for the tag with the appropriate semantic meaning.
Bold vs Strong
Use <strong> to highlight a span of text with a tone that conveys importance. <bold> does not convey any extra emphasis or importance and will likely be used less frequently when a words typographic presentation is bold text; for example, a button or product names in a review.
Using strong correctly
<p>... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: <strong>never feed him after midnight</strong>.</p>
Underline
Underline should never be used to call attention to text. It should only be used for text links.
Using underline incorrectly
<p>... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: <underline>never feed him after midnight</underline>.</p>
Italics
Only use Italic for image captions and placeholders.