Components

Typography

Typeface

Tahoma Font Face

The current text styles uses Tahoma external link as its typeface. Verdana and Segoe are also a part of SAMHSA’s font stack.

Text alignment

While right-aligned, centered, and justified text have their place, most websites benefit from a consistent use of left-aligned text. Justified text, common in print, does not yet display well enough in a web browser to be considered a best practice.

Set type flush left. Type set flush left provides the eye a constant starting point for each line, making text easier to read.

Responsive Typography

Modular Scale

An interest effect of using smaller screen sizes is that the relative scale between font sizes becomes exaggerated. The further away the font is from that 1rem base the larger or smaller it appears on the small screen. 48px or 3rem looks incredibly large on a small screen, although that is a common H1 size for large screens. Anything below 12px (0.75rem) is barely legible. However, establishing a nice range of sizes is preferable on the large screen where text blogs need a much stronger hierarchy established for the amount of real estate the screen affords. The best approach to solving for this problem is to have a system of responsive typography.

Just as elements of a page are adjusted for the screen size, type face adjust along with the breakpoints.

Max reading width

For usability and easy for reading, a maximum reading width should be used.

Maximum reading width: ~75 characters wide. (Based on chosen font)

Creating a maximum reading width is more than just a visual design choice, it is import for usability and ease of reading. If the text is too long, thereaders eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text. If a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

Specifications

H1

Small Screens Family: Tahoma 700 - Size: 28px - Line Height: 30px

Large Screens Family: Tahoma 700 - Size: 32px - Line Height: 34px

H2

Small Screens Family: Tahoma 700 - Size: 23px - Line Height: 25px

Large Screens Family: Tahoma 700 - Size: 28px - Line Height: 30px

H3

Small Screens Family: Tahoma 700 - Size: 18px - Line Height: 20px

Large Screens Family: Tahoma 700 - Size: 21px - Line Height: 23px

H4

All Screens Family: Tahoma 700 - Size: 16px - Line Height: 18px

Body

All Screens Family: Tahoma 400 - Size: 15px - Line Height: 20px

Title Links

All Screens Family: Tahoma 400 - Size: 18px - Line Height: 22px

Links

All Screens Family: Tahoma 400 - Size: 15px - Line Height: 20px read more about link rules and variations

Form Type styles

Input

All Screens Family: Tahoma 400 - Size: 16px - Line Height: 0px read more about form rules and variations

Buttons

All Screens Family: Tahoma 700 - Size: 16px - Line Height: 18px read more about button rules and variations

Prose example

Alice's Aventures in Wonderland

Chapter 1

Down the Rabbit Hole

The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.

Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled “ORANGE MARMALADE”, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody underneath, so managed to put it into one of the cupboards as she fell past it.