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")
);
twitter-bootstrap fonts sass responsive-design bootstrap-4
asked Nov 12 at 20:32
Socrates
1,52772244
add a comment |
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")
);
twitter-bootstrap fonts sass responsive-design bootstrap-4
asked Nov 12 at 20:32
Socrates
1,52772244
add a comment |
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")
);
twitter-bootstrap fonts sass responsive-design bootstrap-4
asked Nov 12 at 20:32
Socrates
1,52772244
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")
);
twitter-bootstrap fonts sass responsive-design bootstrap-4
twitter-bootstrap fonts sass responsive-design bootstrap-4
asked Nov 12 at 20:32
Socrates
1,52772244
asked Nov 12 at 20:32
Socrates
1,52772244
edited Nov 12 at 21:03
asked Nov 12 at 20:32
Socrates
1,52772244
asked Nov 12 at 20:32
Socrates
1,52772244
asked Nov 12 at 20:32
Socrates
1,52772244
1,52772244
add a comment |
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 at 2:37
David Taiaroa
20.6k44744
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 at 0:45
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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 at 2:37
David Taiaroa
20.6k44744
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 at 0:45
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 at 1:27
add a comment |
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 at 2:37
David Taiaroa
20.6k44744
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 at 0:45
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 at 1:27
add a comment |
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 at 2:37
David Taiaroa
20.6k44744
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 at 2:37
David Taiaroa
20.6k44744
answered Nov 14 at 2:37
David Taiaroa
20.6k44744
answered Nov 14 at 2:37
David Taiaroa
20.6k44744
answered Nov 14 at 2:37
David Taiaroa
20.6k44744
20.6k44744
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 at 0:45
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 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 at 0:45
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 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 at 0:45
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 at 0:45
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 at 1:27
Cool, I'm pleased we solved it @Socrates !
– David Taiaroa
Nov 16 at 1:27
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
