# Typography

## Examples


### Styled

```typescript
import React from 'react';

import styled from 'styled-components';

import Link from '@splunk/react-ui/Link';
import Typography from '@splunk/react-ui/Typography';
import { mixins } from '@splunk/themes';

const Styled = styled.div`
    ${mixins.prose()}
`;


function Basic() {
    return (
        <Styled>
            <Typography as="h4" variant="title3">
                Using SPL
            </Typography>
            <Typography as="p" family="sansSerif" size={16} lineHeight="snug">
                Search Processing Language, or{' '}
                <Typography as="strong" weight="bold" color="active">
                    SPL
                </Typography>
                , is designed by Splunk for use with Splunk software.{' '}
            </Typography>{' '}
            <Typography as="p" variant="body">
                SPL encompasses all the search commands and their functions, arguments, and clauses.
                Here is an example of SPL:{' '}
                <Typography as="code" variant="monoBody" color="active">
                    sourcetype=access_* status=200 action=purchase categoryId=simulation
                </Typography>{' '}
                .{' '}
            </Typography>
            <Typography as="p" family="sansSerif" size={14}>
                You can learn more about SPL by reading the{' '}
                <Link to="https://docs.splunk.com/Documentation/SplunkCloud/latest/Search/Aboutthesearchlanguage">
                    SPL documentation
                </Link>
                .
            </Typography>
        </Styled>
    );
}

export default Basic;
```




## API


### Typography API

Typography renders text content with styling based on the Splunk Design System.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| as | \| 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span' \| 'blockquote' \| 'dd' \| 'dl' \| 'dt' \| 'figcaption' \| 'figure' \| 'li' \| 'ol' \| 'ul' \| 'pre' \| 'abbr' \| 'cite' \| 'code' \| 'data' \| 'dfn' \| 'em' \| 'label' \| 'u' \| 'time' \| 'sup' \| 'sub' \| 'strong' \| 'small' \| 'samp' \| 's' \| 'var' \| 'ruby' \| 'rt' \| 'rp' | yes |  | Tag for the element to render children content into. Use the most semantically appropriate tag. Layout elements like `div` are not allowed; use the `typography` mixin from `@splunk/themes` instead. |
| children | React.ReactNode | yes |  | Text and inline icons |
| color | 'active' \| 'default' \| 'disabled' \| 'inverted' \| 'muted' \| 'inherit' | no |  | Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`. |
| elementRef | React.Ref<HTMLElement> | no |  | A React ref which is set to the DOM element when the component mounts, and null when it unmounts. |
| family | 'sansSerif' \| 'monospace' \| 'title' | no |  | Set the font-family to sans-serif or monospace based on current theme. |
| lineHeight | 'single' \| 'tight' \| 'snug' \| 'comfortable' \| 'relaxed' \| 'spacious' \| 'normal' | no |  | Set the line-height to a system-standard size. |
| size | 24 \| 20 \| 18 \| 16 \| 14 \| 12 | no |  | Set the size to a system-standard size. |
| variant | TypographyVariant | no |  | A variant from the Splunk Design System's Type: 'body', 'title1', 'title2', 'title3', 'title4', 'title5', 'title6', 'largeBody', 'smallBody', 'monoBody', or 'monoSmallBody'. |
| weight | 'light' \| 'normal' \| 'semiBold' \| 'bold' \| 'extraBold' \| 'heavy' | no |  | Set the font-weight to a system-standard value.  The following standard weight names are supported, using camelCase syntax. See: [font-weight \| MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping) |
| withReset | boolean | no | true | Remove all browser-default styles and apply theme-specific defaults. |





## Accessibility

## Font size

* Although WCAG do not set a minimum font-size, the Splunk Design System does not support a font-size smaller than 12px.
Smaller font sizes **SHOULD** be avoided. They can render illegibly on some platforms and our inclusive design aims
to reduce the need for users to have to override styling to make content readable.

## Contrast

* Color contrast ratio **MUST** be [SC 1.4.3][1]
    * &gt= 4.5:1 for normal text: 14 pt (typically 18.66px) and bold or larger
    * &gt= 3:1 for large text: 18 pt (typically 24px) or larger
    * For high contrast mode, ratios **MUST** be &gt=7:1 for normal text and &gt=4.5:1 for large text [SC 1.4.6][2]

> Check the [Color combinations](/Packages/themes/ColorCombinations) tool in `@splunk/themes` documentation to validate 
which background colors can be used with the design system's text colors.

## Interaction Model

* **MUST NOT** lose content or functionality when the user adapts [SC 1.4.12][3]
    * Line height (line spacing) to at least 1.5 times the font size;
    * Spacing following paragraphs to at least 2 times the font size;
    * Letter spacing (tracking) to at least 0.12 times the font size;
    * Word spacing to at least 0.16 times the font size
* Line spacing (leading) **MUST** be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing [SC 1.4.8][4]

## Implementation

*   **SHOULD** use correct [phrasing elements][5] to describe the semantics of the content.

    > Always choose the best semantic element to describe the content and apply styling based on visual design. Typography allows for the semantics and the visual style of elements to be set independently via the `as` and `variant` props respectively.  

[1]: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
[2]: https://www.w3.org/TR/WCAG21/#contrast-enhanced
[3]: https://www.w3.org/TR/WCAG21/#text-spacing
[4]: https://www.w3.org/TR/WCAG21/#visual-presentation
[5]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content