<commit_before><div class="doc-content theming ng-scope">

    <p>Angular Material provides typography CSS classes you can use to create visual
       consistency across your application.</p>

    <p><a href="http://www.google.com/design/spec/style/typography.html">Reference the Material Design specification for
                                                                         Typography.</a></p>
    <section class="demo-container">
        {{#md-toolbar class="demo-toolbar md-default-theme"}}
            <div class="md-toolbar-tools">
                <h3>Headings</h3>
            </div>
        {{/md-toolbar}}
        <div class="md-whiteframe-z1 docs-list">
            <p style="margin-top: 0;">To preserve <a href="http://webaim.org/techniques/semanticstructure/">semantic
                                                                                                            structures</a>,
                                      you should style the <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> heading
                                      tags with the styling classes shown below:</p>

            <h4 class="md-title">Heading Styles</h4>

            <div layout="row" class="docs-descriptions">
                <h4 class="md-body-1" flex="25" id="headings-selectors">Selectors</h4>
                <h4 class="md-body-1" id="headings-output">Output</h4>
            </div>
            <md-divider class="md-default-theme"></md-divider>
            <ul>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors"><code>
            .md-display-4</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-4">Light 11.2sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors"><code>
            .md-display-3</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-3">Regular 5.6sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-display-2</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-2">Regular 4.5sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-display-1</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-1">Regular 3.4sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-headline</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-headline">Regular 2.4sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-title</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-title">Medium 2.0sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-subhead</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-subhead">Regular 1.6sp</h5>
                </li>
            </ul>
            <h4 class="md-title">Example</h4>
            <hljs lang="html"><pre><code class="highlight" ng-non-bindable=""><span class="hljs-tag">&lt;<span
                class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-display-3"</span>&gt;</span>Headline<span
                class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">h2</span> <span class="hljs-attribute">class</span>=<span
                    class="hljs-value">"md-display-1"</span>&gt;</span>Headline<span class="hljs-tag">&lt;/<span
                    class="hljs-title">h2</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">h3</span> <span class="hljs-attribute">class</span>=<span
                    class="hljs-value">"md-headline"</span>&gt;</span>Headline<span class="hljs-tag">&lt;/<span
                    class="hljs-title">h3</span>&gt;</span></code></pre>
            </hljs>

            <br>
  <span style="font-size:.8em;">
      Note: Base font size is <code>10px</code> for easy rem units (1.2rem = 12px). Body font size is <code>16px</code>. sp = scaleable pixels.
    </span>

        </div>

    </section>

    <section class="demo-container">
        {{#md-toolbar class="demo-toolbar md-default-theme"}}
            <div class="md-toolbar-tools">
                <h3>Body Copy</h3>
            </div>
        {{/md-toolbar}}
        <div class="md-whiteframe-z1 docs-list">
            <div layout="row" class="docs-descriptions">
                <h4 class="md-body-1" flex="25" id="body-selectors">Selectors</h4>
                <h4 class="md-body-1" id="body-output">Output</h4>
            </div>
            <md-divider class="md-default-theme"></md-divider>
            <ul>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors">
          <code>.md-body-1</code><br>
        </span>

                    <p aria-describedby="body-output">Regular 1.4sp</p>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors"><code>
            .md-body-2</code>
        </span>

                    <p class="md-body-2" aria-describedby="body-output">Medium 1.4sp</p>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors">
          <code>.md-caption</code><br>
        </span>

                    <div aria-describedby="body-output">
                        <small class="md-caption">Regular 1.2sp</small>
                    </div>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors">
          <code>.md-button</code>
        </span>

                    <div aria-describedby="body-output">
                        <button class="md-button md-default-theme" ng-transclude=""><span
                            class="ng-scope">Medium 1.4sp</span></button>
                    </div>
                </li>
            </ul>
            <h4 class="md-title">Examples</h4>
            <hljs lang="html"><pre><code class="highlight" ng-non-bindable=""><span class="hljs-tag">&lt;<span
                class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-body-2"</span>&gt;</span>Body
                                                                                                                                            copy
                                                                                                                                            with
                                                                                                                                            medium
                                                                                                                                            weight.<span
                    class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">md-button</span>&gt;</span>Button<span
                    class="hljs-tag">&lt;/<span class="hljs-title">md-button</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span
                    class="hljs-attribute">class</span>=<span class="hljs-value">"md-body-1"</span>&gt;</span>Regular
                                                                                                                                            body
                                                                                                                                            copy
                <span class="hljs-tag">&lt;<span class="hljs-title">small</span> <span
                    class="hljs-attribute">class</span>=<span class="hljs-value">"md-caption"</span>&gt;</span>with
                                                                                                                                            small
                                                                                                                                            text<span
                    class="hljs-tag">&lt;/<span class="hljs-title">small</span>&gt;</span>.<span
                    class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span
                    class="hljs-attribute">class</span>=<span
                    class="hljs-value">"md-caption"</span>&gt;</span>Caption<span class="hljs-tag">&lt;/<span
                    class="hljs-title">span</span>&gt;</span></code></pre><commit_msg>Fix some styling on typography example<commit_after><div class="doc-content theming ng-scope">

    <p>Angular Material provides typography CSS classes you can use to create visual
        consistency across your application.</p>

    <p><a href="http://www.google.com/design/spec/style/typography.html">Reference the Material Design specification for
        Typography.</a></p>
    <section class="demo-container">
        {{#md-toolbar class="demo-toolbar md-default-theme"}}
            <div class="md-toolbar-tools">
                <h3>Headings</h3>
            </div>
        {{/md-toolbar}}
        <div class="md-whiteframe-z1 docs-list">
            <p style="margin-top: 0;">To preserve <a href="http://webaim.org/techniques/semanticstructure/">semantic
                structures</a>,
                you should style the <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> heading
                tags with the styling classes shown below:</p>

            <h4 class="md-title">Heading Styles</h4>

            <div layout="row" class="docs-descriptions">
                <h4 class="md-body-1" flex="25" id="headings-selectors">Selectors</h4>
                <h4 class="md-body-1" id="headings-output">Output</h4>
            </div>
            <md-divider class="md-default-theme"></md-divider>
            <ul>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors"><code>
            .md-display-4</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-4">Light 11.2sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors"><code>
            .md-display-3</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-3">Regular 5.6sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-display-2</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-2">Regular 4.5sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-display-1</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-display-1">Regular 3.4sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-headline</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-headline">Regular 2.4sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-title</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-title">Medium 2.0sp</h5>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="headings-selectors">
          <code>.md-subhead</code>
        </span>
                    <h5 aria-describedby="headings-output" class="md-subhead">Regular 1.6sp</h5>
                </li>
            </ul>
            <h4 class="md-title">Example</h4>
            <hljs lang="html"><pre><code class="highlight" ng-non-bindable=""><span class="hljs-tag">&lt;<span
                    class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-display-3"</span>&gt;</span>Headline<span
                    class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">h2</span> <span class="hljs-attribute">class</span>=<span
                        class="hljs-value">"md-display-1"</span>&gt;</span>Headline<span class="hljs-tag">&lt;/<span
                        class="hljs-title">h2</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">h3</span> <span class="hljs-attribute">class</span>=<span
                        class="hljs-value">"md-headline"</span>&gt;</span>Headline<span class="hljs-tag">&lt;/<span
                        class="hljs-title">h3</span>&gt;</span></code></pre>
            </hljs>

            <br>
  <span style="font-size:.8em;">
      Note: Base font size is <code>10px</code> for easy rem units (1.2rem = 12px). Body font size is <code>16px</code>. sp = scaleable pixels.
    </span>

        </div>

    </section>

    <section class="demo-container">
        {{#md-toolbar class="demo-toolbar md-default-theme"}}
            <div class="md-toolbar-tools">
                <h3>Body Copy</h3>
            </div>
        {{/md-toolbar}}
        <div class="md-whiteframe-z1 docs-list">
            <div layout="row" class="docs-descriptions">
                <h4 class="md-body-1" flex="25" id="body-selectors">Selectors</h4>
                <h4 class="md-body-1" id="body-output">Output</h4>
            </div>
            <md-divider class="md-default-theme"></md-divider>
            <ul>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors">
          <code>.md-body-1</code><br>
        </span>

                    <p aria-describedby="body-output">Regular 1.4sp</p>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors"><code>
            .md-body-2</code>
        </span>

                    <p class="md-body-2" aria-describedby="body-output">Medium 1.4sp</p>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors">
          <code>.md-caption</code><br>
        </span>

                    <div aria-describedby="body-output">
                        <small class="md-caption">Regular 1.2sp</small>
                    </div>
                </li>
                <li layout="row" layout-align="start center">
        <span flex="25" aria-describedby="body-selectors">
          <code>.md-button</code>
        </span>

                    <div aria-describedby="body-output">
                        <button class="md-button md-default-theme" ng-transclude=""><span
                                class="ng-scope">Medium 1.4sp</span></button>
                    </div>
                </li>
            </ul>
            <h4 class="md-title">Examples</h4>
            <hljs lang="html"><pre><code class="highlight"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-body-2"</span>&gt;</span>Body copy with medium weight.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">md-button</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-title">md-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-body-1"</span>&gt;</span>Regular body copy<span class="hljs-tag">&lt;<span class="hljs-title">small</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-caption"</span>&gt;</span>with small text<span class="hljs-tag">&lt;/<span class="hljs-title">small</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-caption"</span>&gt;</span>Caption<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span></code></pre>
{'fraction_non_alphanumeric': 0.1705723944307569, 'fraction_numerical': 0.01375121755572108, 'mean_word_length': 1.7110904007455732, 'pattern_counts': {'":': 0, '<': 525, '<?xml version=': 0, '>': 525, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 60, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1525972', 'n_tokens_mistral': 5208, 'n_tokens_neox': 4772, 'n_words': 752}