title: Bootstrap responsive typography for desktop and mobile
body: <p>I am trying to get my Bootstrap 4 font size settings right so that my web application looks good on mobile devices, like phones or tablets, and desktop systems, like any Linux, Mac, Windows with Chrome or Firefox installed. Now, everywhere I read about responsive typography, manuals talk about an <em>easy process</em>, but I honestly find it quite difficult to get it look like I need as I am still fairly new to SASS and Bootstrap 4.</p>
  
  <p>I copied the setting from the <a href="https://getbootstrap.com/docs/4.0/content/typography/#responsive-typography" rel="nofollow noreferrer">Bootstrap 4 docs</a> and this is the result in my web application's main SASS (style/app.global.scss) file:</p>
  
  <pre><code>@import "~bootstrap/scss/bootstrap";
  
  @include media-breakpoint-down(md) {
      html {
          font-size: 3rem;
      }
  }
  </code></pre>
  
  <p>The default font size for Bootstrap 4 is 16px on the <code>&lt;html&gt;</code> element, which is ok. On my phone though (Samsung Galaxy s8) 16px is barely readable due to the dense pixels per square inch. So I moved it up <code>3rem</code>. Until here, the behavior is as expected.</p>
  
  <p>But there is the unwanted side-effect that if I reduce my Chrome browser window on my MacBook Pro to a smaller width than <code>992px</code>, the mobile size of <code>3rem</code> kicks in and I have huge letters.</p>
  
  <p>What I would like to achieve though, is to always have the same font size of <code>16px</code> on the desktop and to not jump to the bigger font size when making the browser window smaller.</p>
  
  <p>Is there a way to distinguish between mobile and desktop devices in general? The Bootstrap 4 docs look great on mobile and desktop and if I reduce the Chrome browser window to a smaller width, the letters still remain within the same size. Is there a special command for that in SASS?</p>
  
  <p>The index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;title&gt;Hello React!&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the index.tsx:</p>
  
  <pre><code>import "bootstrap";
  import "./style/app.global.scss";
  import * as React from "react";
  import * as ReactDOM from "react-dom";
  
  import { Site } from "./components/Site";
  import { Title } from "./components/Title";
  
  ReactDOM.render(
      &lt;Title titleName="MySite" /&gt;,
      document.getElementsByTagName("title")[0]
  );
  
  ReactDOM.render(
      &lt;Site siteName="MySite" /&gt;,
      document.getElementById("app")
  );
  </code></pre>