Bootstrap responsive typography for desktop and mobile

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 easy process, 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.

I copied the setting from the Bootstrap 4 docs and this is the result in my web application's main SASS (style/app.global.scss) file:

@import "~bootstrap/scss/bootstrap";



@include media-breakpoint-down(md) {

    html {

        font-size: 3rem;

    }

}

The default font size for Bootstrap 4 is 16px on the <html> 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 3rem. Until here, the behavior is as expected.

But there is the unwanted side-effect that if I reduce my Chrome browser window on my MacBook Pro to a smaller width than 992px, the mobile size of 3rem kicks in and I have huge letters.

What I would like to achieve though, is to always have the same font size of 16px on the desktop and to not jump to the bigger font size when making the browser window smaller.

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?

The index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

And the index.tsx:

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(

    <Title titleName="MySite" />,

    document.getElementsByTagName("title")[0]

);



ReactDOM.render(

    <Site siteName="MySite" />,

    document.getElementById("app")

);

edited Nov 12 '18 at 21:03

asked Nov 12 '18 at 20:32

Socrates

1,56872344

add a comment |

I copied the setting from the Bootstrap 4 docs and this is the result in my web application's main SASS (style/app.global.scss) file:

@import "~bootstrap/scss/bootstrap";



@include media-breakpoint-down(md) {

    html {

        font-size: 3rem;

    }

}

But there is the unwanted side-effect that if I reduce my Chrome browser window on my MacBook Pro to a smaller width than 992px, the mobile size of 3rem kicks in and I have huge letters.

What I would like to achieve though, is to always have the same font size of 16px on the desktop and to not jump to the bigger font size when making the browser window smaller.

The index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

And the index.tsx:

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(

    <Title titleName="MySite" />,

    document.getElementsByTagName("title")[0]

);



ReactDOM.render(

    <Site siteName="MySite" />,

    document.getElementById("app")

);

edited Nov 12 '18 at 21:03

asked Nov 12 '18 at 20:32

Socrates

1,56872344

add a comment |

I copied the setting from the Bootstrap 4 docs and this is the result in my web application's main SASS (style/app.global.scss) file:

@import "~bootstrap/scss/bootstrap";



@include media-breakpoint-down(md) {

    html {

        font-size: 3rem;

    }

}

But there is the unwanted side-effect that if I reduce my Chrome browser window on my MacBook Pro to a smaller width than 992px, the mobile size of 3rem kicks in and I have huge letters.

What I would like to achieve though, is to always have the same font size of 16px on the desktop and to not jump to the bigger font size when making the browser window smaller.

The index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

And the index.tsx:

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(

    <Title titleName="MySite" />,

    document.getElementsByTagName("title")[0]

);



ReactDOM.render(

    <Site siteName="MySite" />,

    document.getElementById("app")

);

edited Nov 12 '18 at 21:03

asked Nov 12 '18 at 20:32

Socrates

1,56872344

I copied the setting from the Bootstrap 4 docs and this is the result in my web application's main SASS (style/app.global.scss) file:

@import "~bootstrap/scss/bootstrap";



@include media-breakpoint-down(md) {

    html {

        font-size: 3rem;

    }

}

But there is the unwanted side-effect that if I reduce my Chrome browser window on my MacBook Pro to a smaller width than 992px, the mobile size of 3rem kicks in and I have huge letters.

What I would like to achieve though, is to always have the same font size of 16px on the desktop and to not jump to the bigger font size when making the browser window smaller.

The index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

And the index.tsx:

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(

    <Title titleName="MySite" />,

    document.getElementsByTagName("title")[0]

);



ReactDOM.render(

    <Site siteName="MySite" />,

    document.getElementById("app")

);

twitter-bootstrap fonts sass responsive-design bootstrap-4

edited Nov 12 '18 at 21:03

asked Nov 12 '18 at 20:32

Socrates

1,56872344

edited Nov 12 '18 at 21:03

asked Nov 12 '18 at 20:32

Socrates

1,56872344

edited Nov 12 '18 at 21:03

asked Nov 12 '18 at 20:32

Socrates

1,56872344

asked Nov 12 '18 at 20:32

Socrates

1,56872344

asked Nov 12 '18 at 20:32

Socrates

1,56872344

add a comment |

1 Answer
1

active

oldest

votes

I have a couple of suggestions.

(1) As a general rule, if you are wanting responsive font sizes, consider using the viewport width unit of vw for the font size, if you do this the font size will scale with the viewport or window size.

And to compensate for the font getting too small on mobile, use calc() to essentially add a minimum font size

Here's an example:

CSS

html { font-size: calc(1em + 1vw); }

view this live

In this example I've applied the sizing to the html element, you could of course apply something similar just to the headings or other selectors on the page.

(2) As for the specific issue you described of the font getting too small on your phone, my first suspicion is that the reason is because you have forgotten to include a viewport meta tag in the head of your doc. Please try something like this and see if it helps:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />  

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

Good luck!

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

Thank you, David! Adding the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> solved everything. Nice to know that this is another influencing area. One never learns out! Thanks again!

– Socrates
Nov 16 '18 at 0:45

Cool, I'm pleased we solved it @Socrates !

– David Taiaroa
Nov 16 '18 at 1:27

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269672%2fbootstrap-responsive-typography-for-desktop-and-mobile%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I have a couple of suggestions.

And to compensate for the font getting too small on mobile, use calc() to essentially add a minimum font size

Here's an example:

CSS

html { font-size: calc(1em + 1vw); }

view this live

In this example I've applied the sizing to the html element, you could of course apply something similar just to the headings or other selectors on the page.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />  

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

Good luck!

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

Thank you, David! Adding the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> solved everything. Nice to know that this is another influencing area. One never learns out! Thanks again!

– Socrates
Nov 16 '18 at 0:45

Cool, I'm pleased we solved it @Socrates !

– David Taiaroa
Nov 16 '18 at 1:27

add a comment |

I have a couple of suggestions.

And to compensate for the font getting too small on mobile, use calc() to essentially add a minimum font size

Here's an example:

CSS

html { font-size: calc(1em + 1vw); }

view this live

In this example I've applied the sizing to the html element, you could of course apply something similar just to the headings or other selectors on the page.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />  

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

Good luck!

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

Thank you, David! Adding the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> solved everything. Nice to know that this is another influencing area. One never learns out! Thanks again!

– Socrates
Nov 16 '18 at 0:45

Cool, I'm pleased we solved it @Socrates !

– David Taiaroa
Nov 16 '18 at 1:27

add a comment |

I have a couple of suggestions.

And to compensate for the font getting too small on mobile, use calc() to essentially add a minimum font size

Here's an example:

CSS

html { font-size: calc(1em + 1vw); }

view this live

In this example I've applied the sizing to the html element, you could of course apply something similar just to the headings or other selectors on the page.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />  

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

Good luck!

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

I have a couple of suggestions.

And to compensate for the font getting too small on mobile, use calc() to essentially add a minimum font size

Here's an example:

CSS

html { font-size: calc(1em + 1vw); }

view this live

In this example I've applied the sizing to the html element, you could of course apply something similar just to the headings or other selectors on the page.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />  

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello React!</title>

    </head>

    <body>

        <div id="app"></div>

    </body>

</html>

Good luck!

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

answered Nov 14 '18 at 2:37

David Taiaroa

20.7k44744

Thank you, David! Adding the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> solved everything. Nice to know that this is another influencing area. One never learns out! Thanks again!

– Socrates
Nov 16 '18 at 0:45

Cool, I'm pleased we solved it @Socrates !

– David Taiaroa
Nov 16 '18 at 1:27

add a comment |

Thank you, David! Adding the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> solved everything. Nice to know that this is another influencing area. One never learns out! Thanks again!

– Socrates
Nov 16 '18 at 0:45

Cool, I'm pleased we solved it @Socrates !

– David Taiaroa
Nov 16 '18 at 1:27

Thank you, David! Adding the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> solved everything. Nice to know that this is another influencing area. One never learns out! Thanks again!

– Socrates
Nov 16 '18 at 0:45

Cool, I'm pleased we solved it @Socrates !

– David Taiaroa
Nov 16 '18 at 1:27

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu