2 #Brand Brand
The visual assets that set the overall tone and aesthetic for the site.
src/css/screen.scss, line 8
src/css/brand/_colors.scss, line 1
2.2 #Brand.Logos Logos
These are the various visual treatments for our site's logo.
src/css/brand/_logos.scss, line 1
2.2.1 #Brand.Logos.Icon Icon
The logo treatment that includes both the icon and text.
src/css/brand/_logos.scss, line 8
2.2.2 #Brand.Logos.Wordmark Wordmark
The text treatment for the site's name.
src/css/brand/_logos.scss, line 17
2.2.3 #Brand.Logos.Favicon Favicon
A favicon is the icon used to identify the website in things like browser tabs, address bars, and bookmarks.
src/css/brand/_logos.scss, line 26
2.3 #Brand.Typefaces Typefaces
Good typography is accessible. The typefaces we use for The A11Y Project have been selected because of their acessibility-friendly qualities. These include distinct letterforms with prominent ascenders and descenders, to help both Dyslexia concerns and provide recognizable letter shapes for English as a second language considerations.
When it comes to accessible web typography, it is also important to remember that fonts don't matter. We strive to make good design choices that aid in legibility and comprehension. This includes a comfortable line length and height, and a good font size. Most importantly, we use technolgies that allow a person to change the typeface, color, and size if they need to.
Performance is also a concern. We deliver the site's typefaces in a way that's fast and friendly to modern browsers, without hampering or locking out people using older or non-mainstream technology.
src/css/brand/_typefaces.scss, line 1
2.3.1 #Brand.Typefaces.Primary Primary
Our primary typeface is Noto Serif, made by Google. The Noto type family is intended to be visually harmonious across multiple languages, with compatible heights and stroke thicknesses.
Jackdaws love my big sphinx of quartz
Quick wafting zephyrs vex bold Jim.
Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! & @ % $ # ?
Markup
<h2 class="u-font-family-primary">Jackdaws love my big sphinx of quartz</h2>
<h3 class="u-font-family-primary">Quick wafting zephyrs vex bold Jim.</h3>
<p class="u-font-family-primary">Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.</p>
<p class="u-font-family-primary">A B C D E F G H I J K L M<br/>N O P Q R S T U V W X Y Z</p>
<p class="u-font-family-primary">a b c d e f g h i j k l m<br/>n o p q r s t u v w x y z</p>
<p class="u-font-family-primary">1 2 3 4 5 6 7 8 9 0</p>
<p class="u-font-family-primary">! & @ % $ # ?</p>src/css/brand/_typefaces.scss, line 24
2.3.2 #Brand.Typefaces.Secondary Secondary
Our secondary typeface is Recursive, a sans-serif font made by Arrow Type.
Jackdaws love my big sphinx of quartz
Quick wafting zephyrs vex bold Jim.
Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! & @ % $ # ?
Markup
<h2 class="u-font-family-secondary">Jackdaws love my big sphinx of quartz</h2>
<h3 class="u-font-family-secondary">Quick wafting zephyrs vex bold Jim.</h3>
<p class="u-font-family-secondary">Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.</p>
<p class="u-font-family-secondary">A B C D E F G H I J K L M<br/>N O P Q R S T U V W X Y Z</p>
<p class="u-font-family-secondary">a b c d e f g h i j k l m<br/>n o p q r s t u v w x y z</p>
<p class="u-font-family-secondary">1 2 3 4 5 6 7 8 9 0</p>
<p class="u-font-family-secondary">! & @ % $ # ?</p>src/css/brand/_typefaces.scss, line 44
2.3.3 #Brand.Typefaces.Code Code
Our code typeface is Recursive Mono, a sans-serif font made by Arrow Type.
Jackdaws love my big sphinx of quartz
Quick wafting zephyrs vex bold Jim.
Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! & @ % $ # ?
Markup
<h2 class="u-font-family-code">Jackdaws love my big sphinx of quartz</h2>
<h3 class="u-font-family-code">Quick wafting zephyrs vex bold Jim.</h3>
<p class="u-font-family-code">Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.</p>
<p class="u-font-family-code">A B C D E F G H I J K L M<br/>N O P Q R S T U V W X Y Z</p>
<p class="u-font-family-code">a b c d e f g h i j k l m<br/>n o p q r s t u v w x y z</p>
<p class="u-font-family-code">1 2 3 4 5 6 7 8 9 0</p>
<p class="u-font-family-code">! & @ % $ # ?</p>src/css/brand/_typefaces.scss, line 63
2.3.4 #Brand.Typefaces.Native Native
The native typeface is a special declaration that tells the browser to use the typeface it uses for things like menus and labels. For macOS, it is San Francisco. For Windows, it is Segoe UI.
Jackdaws love my big sphinx of quartz
Quick wafting zephyrs vex bold Jim.
Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! & @ % $ # ?
Markup
<h2 class="u-font-family-native">Jackdaws love my big sphinx of quartz</h2>
<h3 class="u-font-family-native">Quick wafting zephyrs vex bold Jim.</h3>
<p class="u-font-family-native">Bright vixens jump; dozy fowl quack. Both fickle dwarves jinx my pig quiz. Pack my box with five dozen liquor jugs. Few quips galvanized the mock jury box.</p>
<p class="u-font-family-native">A B C D E F G H I J K L M<br/>N O P Q R S T U V W X Y Z</p>
<p class="u-font-family-native">a b c d e f g h i j k l m<br/>n o p q r s t u v w x y z</p>
<p class="u-font-family-native">1 2 3 4 5 6 7 8 9 0</p>
<p class="u-font-family-native">! & @ % $ # ?</p>src/css/brand/_typefaces.scss, line 82