// Typography
//
// - Avoid small font sizes.
// - Use relative units for font size, such as ems or rems. While modern browsers can smoothly zoom
//   pixel-based layouts, sizing type in relative units ensures an entire layout can be scaled up or
//   down by simply updating the font-size of the body element.
// - A design should allow typography to be magnified up to 200% by the user without clipping or distorting content.
// - Select basic, simple, easily-readable fonts and use a limited number of fonts.
// - Avoid small font sizes and use relative units for font size (ems or rems).
// - Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS (caps are similar to screaming to screenreaders).
// - Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
// - Avoid blinking or moving text. 
// - Use real text rather than text within graphics.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#type_guide">WCAG 2.1 Guidelines</a></h3><div id="type_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/#visual-audio-contrast-without-color" target="_blank">1.4.1. Use of Color</a> - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#visual-audio-contrast-contrast" target="_blank">1.4.3 Contrast (Minimum)</a> - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for some cases. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-scale" target="_blank">1.4.4 Resize Text</a> - Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-text-presentation" target="_blank">1.4.5 Images of Text</a> - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-visual-presentation" target="_blank">1.4.8 Visual Presentation</a> - For the visual presentation of blocks of text, a mechanism is available to achieve the following (see WCAG guidelines for more info). (Level AAA)</p></div><div class="markup"></div></section>
//
//
//
// Markup:
// <h2>Open Sans Family</h2>
// <div style="font: 20px/2 'Open Sans'">Regular</div>
// <div style="font: italic 20px/2 'Open Sans'">Italic</div>
// <div style="font: bold 20px/2 'Open Sans'">Bold</div>
// <div style="font: bold italic 20px/2 'Open Sans'">Bold Italic</div>
// <div class="break"></div>
// <h2 style="font: 20px/2 'Verdana'">Verdana Family</h2>
// <div style="font: 20px/2 'Verdana'">Regular</div>
// <div style="font: italic 20px/2 'Verdana'">Italic</div>
// <div style="font: bold 20px/2 'Verdana'">Bold</div>
// <div style="font: bold italic 20px/2 'Verdana'">Bold Italic</div>
// <div class="break"></div>
// <h2 style="font: 20px/2 'Tahoma'">Tahoma Family</h2>
// <div style="font: 20px/2 'Tahoma'">Regular</div>
// <div style="font: italic 20px/2 'Tahoma'">Italic</div>
// <div style="font: bold 20px/2 'Tahoma'">Bold</div>
// <div style="font: bold italic 20px/2 'Tahoma'">Bold Italic</div>
// <div class="break"></div>
// <h2 style="font: 20px/2 'Georgia'">Georgia Family</h2>
// <div style="font: 20px/2 'Georgia'">Regular</div>
// <div style="font: italic 20px/2 'Georgia'">Italic</div>
// <div style="font: bold 20px/2 'Georgia'">Bold</div>
// <div style="font: bold italic 20px/2 'Georgia'">Bold Italic</div>
//
//
// Weight: 999
//
// Style guide: General.typography

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

@mixin font-stack-base {
  font-family: 'Open Sans', 'Arial', sans-serif;
}

@mixin font-stack-second {
  font-family: 'Verdana', 'Arial', sans-serif;
}

@mixin font-stack-third {
  font-family: 'Tahoma', 'Arial', sans-serif;
}

@mixin font-stack-forth {
  font-family: 'Georgia', serif;
}

$font-weight-bold: bold;
$font-italic: italic;
