title: Responsive Typography in Angular Material
body: <p>Trying to figure out how to set font size of <code>mat-tab-label</code> based on screen size (below 400px).</p>
  
  <p>I tried putting custom configs in different media queries like this <code>@include mat-tabs-typography($tabs-typography-mobile);</code> without success.</p>
  
  <p>I also tried experimenting with BreakpointObservers, but not sure how to target that specific property as I understand Sass very little:</p>
  
  <pre><code>this.observer.observe('(max-width: 400px)').subscribe(result =&gt; {
    if (result.matches) {
      document.documentElement.style.setProperty(???);
    }
  });
  </code></pre>
  
  <p>Also tried to target specific element with "View Encapsulation" method, but that just messes up entire layout of the page, so its probably last resort.</p>
  
  <p>Here is the code, I'm trying to change the font size of "label-one", "label-two" and "label-three":</p>
  
  <pre><code>&lt;mat-tab-group mat-stretch-tabs dynamicHeight&gt;
  
      &lt;mat-tab label="label-one"&gt;
          &lt;div class="tab"&gt;&lt;/div&gt;
      &lt;/mat-tab&gt;
  
      &lt;mat-tab label="label-two"&gt;
          &lt;div class="tab"&gt;&lt;/div&gt;
      &lt;/mat-tab&gt;
  
      &lt;mat-tab label="label-three"&gt;
          &lt;div class="tab"&gt;&lt;/div&gt;
      &lt;/mat-tab&gt;
  
  &lt;/mat-tab-group&gt;
  </code></pre>