Decrease size of everything in bootstrap 4 globally - css

Is there a way to decrease all sizes by a certain amount for Bootstrap 4 globally?
The regular sizing is a tad to big for my desktop admin. Instead of going though and adding small classes from bootstrap and custom classes to get the sizes I want, can I update variables in bootstrap that will decrease the sizes everywhere (padding, margin, font-size, etc).

In Boostrap 4:
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
Here the font-size is defined as 1rem. In all of Bootstrap CSS the sizes of things are in rem which is root em so to update this :
Currently in Bootstrap 4:
:root {
--blue: #007bff;
... colours ...
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI", ... ,Roboto;
--font-family-monospace: SFMono-Regular, ... ,monospace
}
*,::after,::before {
box-sizing: border-box
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent
}
To update:
In the :root or html sections you set the font size to be a set size, in px, what this is will depend on what you are looking for:
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent
font-size: 12px; /* for example */
}
OR
:root {
...
...
font-size: 12px; /* for example */
}
Will that take care of all buttons and divs and all other element paddings and margins? A large button will look weird with a smaller font size.
This will take care of everything in CSS that is sized in em or rem units, I have not done an exhaustive check but looks like it would cover pretty much everything.

Why not change your break points in the _custom.scss file and recompile bootstrap. Advantage you have less problems when upgrading
and the custom breakpoints change the elements accordingly
if you have used the "normal" respnsive design and not tweaked it in differentways
Example new breakpoints (adapt to your use case and likes.
// File: _custom.scss
// Override default BT variables:
$grid-breakpoints: (
xs: 0px,
sm: 1280px,
md: 1920px,
lg: 2560px,
xl: 3480px,
xxl: 3840px
);
$container-max-widths: (
sm: 1240px,
md: 1880px,
lg: 2520px,
xl: 3460px,
xxl: 3820px
);
// Import BT sources
#import "../node_modules/bootstrap/scss/bootstrap";
Additional Info
According to the documentation: https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults, in order to customize Bootstrap you need to:
copy/paste from /scss/_variables.scss to _custom.scss whatever you want to modify
remove any !default from the pasted code and change the values to what you want
recompile (see Build tools: https://getbootstrap.com/docs/4.0/getting-started/build-tools/) - you need to successfully run npm run dist to rebuild from source.

Related

Globally change font size in Vuetify based on viewport? [duplicate]

In vuetify they have helper classes for typography.
for example, .display-4 goods for h1. here the full list.
When I choose display-1 for some element, In all resolutions the class gets the same font size (34px).
I was expecting to:
.display-4 will have font size of 34px in screen wide of 1024px.
.display-4 will have font size of 18px in screen wide of 300px.
According to this I have two questions, why is that? and how to make my font size elements be responsive using vuetify?
Update
Vuetify version 1.5
Take a look at display helpers example to see how to use a class when hitting a breakpoint. That being said, you can use dynamic class binding and breakpoint object in Vuetify.
Example:
:class="{'subheading': $vuetify.breakpoint. smAndDown, 'display-2': $vuetify.breakpoint. mdAndUp}"
Vuetify version 2
breakpoint object
Display
My solution changes font-sizes globally in the variables.scss file:
This is assuming you're using Vuetify 2 and #vue/cli-service 3.11 or later.
Step 1:
In src/scss/ create _emptyfile.sass and _font-size-overrides.scss.
In the _emptyfile.sass you can add this comment:
// empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
Step 2:
In the _font-size-overrides.scss file:
/**
* define font-sizes with css custom properties.
* you can change the values of these properties in a media query
*/
:root {
--headings-size-h1: 28px;
--headings-size-h2: 22px;
#media #{map-get($display-breakpoints, 'lg-and-up')} {
--headings-size-h1: 32px;
--headings-size-h2: 26px;
}
}
Step 3:
In the variables.scss file (where you override the Vuetify variables):
/**
* Override Vuetify variables as you normally would
* NOTE: remember to provide a fallback for browsers that don't support Custom Properties
* In my case, I've used the mobile font-sizes as a fallback
*/
$headings: (
'h1': (
'size': var(--headings-size-h1, 28px),
),
'h2': (
'size': var(--headings-size-h2, 22px),
)
);
Step 3:
In the vue.config.js file:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/scss/_emptyfile.sass"` // empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
},
scss: {
prependData: `#import "#/scss/variables.scss"; #import "#/scss/_font-size-overrides.scss";`,
}
}
},
};
font-sizes globally in the variables.scss file
html {
font-size: 90%;
#media only screen and (min-width: 600px) {
font-size: 94%;
}
#media only screen and (min-width: 1000px) {
font-size: 98%;
}
#media only screen and (min-width: 1200px) {
font-size: 100%;
}
}

Using relative sizes with rem units in Sapper

I am using Sapper to create a web app and want to use relative font sizes.
I have set fixed font sizes for different media queries on the body element. Then I want to use rem units for the font-size in subsequent text elements of Svelte components to adjust the font-size to the viewport.
HTML (Svelte component)
<h1>Title</h1>
CSS (of the Svelte component)
h1 {
font-size: 2rem;
}
Global CSS of Sapper
body {
font-size: 12 px;
}
#media (min-width: 600px ) {
body {
font-size: 15px;
}
}
I would expect that the local component CSS is able to read the font-size on the global body element and therefore adjust the font-size in h1 to the viewport size. However, no action is seen. In contrast, using em units works fine.
For Svelte to not remove unused CSS selectors you can use the :global modifier.
To change the font size used by rem values you should style html, not body.
Example (REPL)
<h1>Hello!</h1>
<style>
:global(html) {
font-size: 12px;
}
#media (min-width: 600px) {
:global(html) {
font-size: 15px;
}
}
h1 {
font-size: 2rem;
}
</style>

SASS: Make email mobile font resizing more efficient

I am making a responsive HTML email. When I open it on a mobile device (e.g. iPhone), the layout is responsive, but the fonts are tiny.
The only solution seems to be redeclare the fonts in a media query at a bigger size. Getting the right size takes a lot of trial and error.
Obviously, having two sets of font declarations is inefficient to maintain so I want to use SCSS to streamline it.
This is what I have at the moment:
h1 {
font-size: 28px;
line-height: 36px;
}
h2 {
font-size: 14px;
line-height: 18px;
}
#media only screen and (max-device-width: 615px) {
$increase: 8px;
h1 {
font-size: 28px + $increase;
line-height: 36px + $increase;
}
h2 {
font-size: 14px + $increase;
line-height: 18px + $increase;
}
}
This is good as I can just alter the $increase value to make my mobile fonts bigger. However, I have over 20 font declarations (for different emails), so if I update the desktop sizes (e.g. change h1 from 28px to 32px), I then have to update mobile declaration, which is time consuming.
Is there any way I can use SASS to have one set of font declarations and then automatically have the mobile versions increase in size (while still having the flexibility to do some custom overrides if the $increase value isn't suitable for a particular style).
Steps I have tried to overcome the problem:
1. Using Rem/Ems:
These don't seem to be supported by all Desktop browsers. Using PX seems to be the only way to get the size right.
2. Using Scale meta tag:
e.g. <meta name="viewport" content="width=device-width">
This causes some mobile browsers to display a white screen (Blackberry)
You can use rems! Use the font-size:62.5%; trick on your html element first, and then you can set up several media queries just to resize the rems.
#media only screen and (min-width: 385px) {
html{font-size:68%;}
}
#media only screen and (max-width: 370px) {
html{font-size:62.5%;}
}
#media only screen and (max-width: 350px) {
html{font-size:61%;}
}
#media only screen and (max-width: 330px) {
html{font-size:59%;}
}
And for the desktop clients that don't support rems you can just put your px definitions first in the inline css (or style tag):
font-size:14px;
line-height:16px;
font-size:1.4rem;
line-height:1.6rem;
I'm currently working on a way to get SASS mixin to copy the px values and convert them to rems, but it's tricky because of the decimal point. If i finish i'll post a comment! Or if you beat me to it please let me know ;)
The only thing you can really do is use extends, and I caution you to use them sparingly as they can really bulk up your CSS:
%size-1 {
font-size: 1.1em;
}
%size-2 {
font-size: 1em;
}
#media (min-width: 30em) {
%size-1 {
font-size: 1.2em;
}
%size-2 {
font-size: 1.1em;
}
}
h1 {
#extend %size-1;
}
h2 {
#extend %size-2;
}
You should not need to modify your line-height every time you change the font-size if you specify it without units (eg. line-height: 1.5).

How to customize font size in Ionic Framework

I'm using ionic framework (with cordova) to develop mobile apps.
What I want to do is to increase the font size (in general in my app).
I've seen that in the official documentation : http://ionicframework.com/tutorials/customizing-ionic-with-sass/.
But I do not understand how to customize once sass is working.
I'm working in a tabs-based App like that : http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png
I tried to manually add a class on the tab, but the result is not very clean... the text is cropped...
Is there an official way to change the font-size ?
I think you don't need to undersand everything on Sass.
In your project directory, in
.../yourProject/www/lib/ionic/scss
There is a file named _variables.scss where you will see something like this :
These are font-size variables, you just have to change these and then build the ionic css file.
I suggest you to use https://prepros.io/. I hope it helped you.
Figured I'd share what I've learnt in Ionic.
Basically, Ionic has a default set of sizes, colors, fonts for every single thing you can design and this set is stored in the _variables.scss file. This file is at lib/ionic/scss/_variables.scss
Open this file and search for what you want to alter. For example, I needed to increase the header font-size. So I searched in the _variables.scss file and found $bar-title-font-size.
It was defined as $bar-title-font-size: 17px !default;
Now, open your ionic.app.scss file and write something like
$bar-title-font-size: 25px !default;
***Remember to write the above statement before the #import "ionic/scss/ionic"; statement.
Save the file and your changes will instantly take effect. Ionic has made it that simple!!! :)
Search your project/www/css and edit style.css, and inside the file write:
{font-size:55px !important;}
change 55px to whatever size you need.
Often you want to decide when to use which icon size so I came up with the following solution.
CSS
/* Ionicon icons resizing css */
.ion-1x { font-size: 24px !important;}
.ion-2x { font-size: 48px !important;}
HTML
// in iconics framework
<ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
<ion-icon name="logo-twitter" class="ion-2x"></ion-icon>
// without ionics framework
<i class="ion-1x ion-social-pinterest"></i>
<i class="ion-2x ion-social-twitter"></i>
To make responsive font-size according to device for ionic2,
Add this in src/theme/variables.scss
// breakpoint mixin
#mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
#if $mq2 == false {
#media ($maxmin: $mq01) {
#content;
}
}
#else {
#media (min-width: $mq01) and (max-width: $mq2) {
#content;
}
}
}
// breakpoint variables
$lg: 1170px;
$md: 1024px;
$sm: 640px;
$xs: 480px;
// responsive font size mixin
#mixin font-size-map($font-size-map) {
#each $breakpoint, $font-size in $font-size-map {
#if $breakpoint == null {
font-size: $font-size;
} #else {
#include breakpoint($breakpoint) {
font-size: $font-size;
}
}
}
}
// font sizes
$html-font-size: (null: 16px, $md: 15px, $sm: 14px, $xs: 13px);
$paragraph-font-size: (null: 18px, $lg: 17px, $md: 16px, $sm: 15px, $xs: 14px);
include variable in local scss by adding: #include font-size-map($html-font-size);
// html
html {
#include font-size-map($html-font-size);
}
p {
#include font-size-map($paragraph-font-size);
}
Newer versions of Ionic (4 + 5) use CSS variables.
However, there is no variable for the font size. So, you can add a line like this to variables.css:
body ion-content {
font-size: 1.25rem;
}
Further reading
Global styling in Ionic apps
Setting a font family in an ionic app
I use Ionic for my apps and this is how I deal with resizing:
Find the class/element that you need to modify in CSS
Set padding:0 0 0 0; or to values you want (top,right,bottom,left).
Set font size
Set height
Set line-height
Edit: This is how I modified my tab items
.tab-item{
margin: 0;
line-height: 100px;
box-sizing: content-box;
font-size: 40px;
color:#FFFFFF;
font-family: 'Roboto-Light';
opacity: 1;
max-width: 200px;
}

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1:
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}
<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->
When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text.
I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.
Am I missing something really obvious? How do I achieve this?
You can use the viewport value instead of ems, pxs, or pts:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
From CSS-Tricks: Viewport Sized Typography
The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.
Media Queries
You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.
For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:
#media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Viewport percentage lengths
You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Again, from the same W3C document each individual unit can be defined as below:
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
And they are used in exactly the same way as any other CSS value:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
here clamp has 3 arguments.
first one is the minimum allowed font-size.
third one is the maximum allowed font-size.
second argument is font-size that you wish to always have. Its unit must be relative(vw, vh, ch) and not absolute(i.e not px, mm, pt). relative unit will make it change its size w.r.t the changing screen sizes.
Consider an example :
consider there is a large fontawesome icon that you want to resize dynamically (responsive icon)
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
Here 80vw is the preferred font-size.
15 rem is the minimum font size (lower bound).
80vh is the max font size (upper bound).
i.e.
if in a particular mobile screen size if 80vw < 15rem then font-size is 15rem.
if screen is too wide then if 80vw > 80vh then font-size is 80vh.
Those methods above suggested by people always have a bit uncertain result... like when we use vw only, the font size might sometimes be too big or too small (unbounded).
#media queries can be used but you have to use minimum 3 media-queries to make the font size responsive
I've been playing around with ways to overcome this issue, and believe I have found a solution:
If you can write your application for Internet Explorer 9 (and later) and all other modern browsers that support CSS calc(), rem units, and vmin units. You can use this to achieve scalable text without media queries:
body {
font-size: calc(0.75em + 1vmin);
}
Here it is in action: http://codepen.io/csuwldcat/pen/qOqVNO
Use CSS media specifiers (that's what they [zurb] use) for responsive styling:
#media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
If you don't mind to use a jQuery solution you can try TextFill plugin
jQuery TextFill resizes text to fit into a container and makes font size as big as possible.
https://github.com/jquery-textfill/jquery-textfill
There are several ways to achieve this.
Use a media query, but it requires font sizes for several breakpoints:
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
#media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
Use dimensions in % or em. Just change the base font size, and everything will change. Unlike the previous one, you could just change the body font and not h1 every time or let the base font size be the default of the device and the rest all in em:
“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc..
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
See kyleschaeffer.com/....
CSS 3 supports new dimensions that are relative to the view port. But this doesn't work on Android:
3.2vw = 3.2% of width of viewport
3.2vh = 3.2% of height of viewport
3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
body
{
font-size: 3.2vw;
}
See CSS-Tricks ... and also look at Can I Use...
There's another approach to responsive font sizes - using rem units.
html {
/* Base font size */
font-size: 16px;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
Later in media queries, you can adjust all fonts sizes by changing the base font size:
#media screen and (max-width: 767px) {
html {
/* Reducing base font size will reduce all rem sizes */
font-size: 13px;
}
/* You can reduce font sizes manually as well */
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.0rem;
}
}
To make this work in Internet Explorer 7 and Internet Explorer 8 you will have to add a fallback with px units:
h1 {
font-size: 18px;
font-size: 1.125rem;
}
If you're developing with Less, you can create a mixin that will do the math for you.
Rem units support - http://caniuse.com/#feat=rem
The "vw" solution has a problem when going to very small screens. You can set the base size and go up from there with calc():
font-size: calc(16px + 0.4vw);
This is partly implemented in foundation 5.
In file _type.scss they have two sets of header variables:
// We use these to control header font sizes
// for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
For medium up, they generate sizes based on the first set of variables:
#media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
And for default-i.e small screens, they use a second set of variables to generates CSS:
h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }
You can use these variables and override in your custom scss file to set font sizes for respective screen sizes.
I saw a great article from CSS-Tricks. It works just fine:
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
For example:
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
We can apply the same equation to the line-height property to make it change with the browser as well.
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
A responsive font size can also be done with this JavaScript code called FlowType:
http://simplefocus.com/flowtype/
https://github.com/simplefocus/FlowType.JS
FlowType - Responsive web typography at its finest: font-size based on element width.
Or this JavaScript code called FitText:
http://fittextjs.com/
https://github.com/davatron5000/FitText.js
FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
If you are using a build tool then try Rucksack.
Otherwise, you can use CSS variables (custom properties) to easily control the minimum and maximum font sizes like so (demo):
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
I had just come up with an idea with which you only have to define the font size once per element, but it is still influenced by media queries.
First, I set the variable "--text-scale-unit" to "1vh" or "1vw", depending on the viewport using the media queries.
Then I use the variable using calc() and my multiplicator number for font-size:
/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
#media (orientation: landscape) {
:root{
--text-scale-unit: 1vh;
}
}
#media (orientation: portrait) {
:root {
--text-scale-unit: 1vw;
}
}
/* Use a variable with calc and multiplication. */
.large {
font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
font-size: calc(var(--text-scale-unit) * 10);
}
.small {
font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
Responsive
</span>
<span class="large">
text
</span>
<span class="small">
with one
</span>
<span class="extra-small">
font-size tag.
</span>
In my example I only used the orientation of the viewport, but the principle should be possible with any media queries.
I use these CSS classes, and they make my text fluid on any screen size:
.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}
.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}
.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}
.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
Try including this on your style sheet:
html {
font-size: min(max(16px, 4vw), 22px);
}
More info at https://css-tricks.com/simplified-fluid-typography/
There are the following ways by which you can achieve this:
Use rem for e.g. 2.3 rem
Use em for e.g. 2.3em
Use % for e.g. 2.3%
Moreover, you can use :
vh, vw, vmax and vmin.
These units will autoresize depending upon the width and height of the screen.
jQuery's "FitText" is probably the best responsive header solution. Check it out at GitHub:
https://github.com/davatron5000/FitText.js
In actual original Sass (not scss) you could use the below mixins to automatically set the paragraph's and all headings' font-size.
I like it because it is much more compact. And quicker to type. Other than that, it provides the same functionality. Anyway, if you still want to stick to the new syntax - scss, then feel free to convert my Sass content to scss here:
[CONVERT SASS TO SCSS HERE]
Below I give you four Sass mixins. You will have to tweak their settings to your needs.
=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones
After you finish playing with settings just make a call on one mixin - which is: +config-and-run-font-generator(). See code below and comments for more information.
I guess you could do it automatically for a media query like it is done for header tags, but we all use different media queries, so it would not be appropriate for everyone. I use a mobile-first design approach, so this is how I would do that. Feel free to copy and use this code.
COPY AND PASTE THESE MIXINS TO YOUR FILE:
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
#for $i from 1 through 6
h#{$i}
#extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
#media screen and (min-width: 680px)
body
font-size: 1.4em
#media screen and (min-width: 1224px)
body
font-size: 1.6em
#media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // Set first header element to this size
$h1-step-down: $h1-step-down // Decrement each time by 0.3
$p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
$h1-fs: $h1-fs + $h1-step-down // Looping correction
#for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
#if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // Just a place holder for our font style
+media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here
CONFIGURE ALL MIXINS TO YOUR NEEDS - PLAY WITH IT! :) AND THEN CALL IT ON THE TOP OF YOUR ACTUAL SASS CODE WITH:
+config-and-run-font-generator()
This would generate this output. You can customize parameters to generate different sets of results. However, because we all use different media queries, some mixins you will have to edit manually (style and media).
GENERATED CSS:
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
#media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
#media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
#media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}
The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
For my personal project I used vw and #meida. It works perfectly.
.mText {
font-size: 6vw;
}
#media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}
.sText {
font-size: 4vw;
}
#media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}
We can use calc() from css
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
The mathematical formula is
calc(minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))
Codepen
A lot of answers but I did not see anyone mentioning the min or max functions combined with media queries
There is a max() function in CSS, so our example above becomes a one-liner:
font-size: max(30vw, 30px);
Or double it up with a min and max:
font-size: min(max(16px, 4vw), 22px);
Which is identical to:
font-size: clamp(16px, 4vw, 22px);
Then don't forget to wrap this in a media query and apply to your h1,h2,h3,h4,h5,h6 how you prefer.
#media (max-width: 600px) {
h1 {
font-size: clamp(16px, 4vw, 22px);
}
}
As with many frameworks, once you "go off the grid" and override the framework's default CSS, things will start to break left and right. Frameworks are inherently rigid. If you were to use Zurb's default H1 style along with their default grid classes, then the web page should display properly on mobile (i.e., responsive).
However, it appears you want very large 6.2em headings, which means the text will have to shrink in order to fit inside a mobile display in portrait mode. Your best bet is to use a responsive text jQuery plugin such as FlowType and FitText. If you want something light-weight, then you can check out my Scalable Text jQuery plugin:
http://thdoan.github.io/scalable-text/
Sample usage:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
h1 { font-size: 2.25em; }
h2 { font-size: 1.875em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.125em; }
h5 { font-size: 0.875em; }
h6 { font-size: 0.75em; }
You can make the font size responsive if defining it in vw (viewport width). However, not all browsers support it. The solution is to use JavaScript to change the base font size depending on the browser width and set all font sizes in %.
Here is an article describing how to make responsive fontsizes: http://wpsalt.com/responsive-font-size-in-wordpress-theme/
I have found this solution, and it works very well for me:
/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
One way to solve the problem of the text to look good on both desktop and mobile/tablet is in fixing the text size to physical units like physical centimeters or inches, which don't depend on the screen PPI (points per inch).
Based on this answer, below is the code I use at the end of the HTML document for a responsive font size:
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
function setFontSizeForClass(className, fontSize) {
var elms = document.getElementsByClassName(className);
for(var i=0; i<elms.length; i++) {
elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
}
}
setFontSizeForClass('h1-font-size', 30);
setFontSizeForClass('action-font-size', 20);
setFontSizeForClass('guideline-font-size', 25);
// etc for your different classes
</script>
In the code above the items of a different class are assigned font sizes in physical units, as long as the browser/OS is configured correctly for the PPI of its screen.
A physical-unit font is always not too large and not too small, so long as the distance to the screen is usual (book-reading distance).
Use this equation:
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
For anything larger or smaller than 1440 and 768, you can either give it a static value, or apply the same approach.
The drawback with vw solution is that you cannot set a scale ratio, say a 5vw at screen resolution 1440 may end up being 60px font-size, your idea font size, but when you shrink the window width down to 768, it may ended up being 12px, not the minimal you want.
With this approach, you can set your upper boundary and lower boundary, and the font will scale itself in between.
After many conclusions I ended up with this combination:
#media only screen and (max-width: 730px) {
h2 {
font-size: 4.3vw;
}
}
The font size changes depending on the screen size by using CSS You can see that this H1 tag is responsive. (correct me if I'm wrong)
#media only screen and (max-width: 1000px) {
h1 {
font-size:5em;
}
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 3em;
}
}
#media only screen and (max-width: 300px) {
h1 {
font-size: 2em;
}
}
#media only screen and (max-width: 100px) {
h1 {
font-size: 1em;
}
}
<h1>Resize the browser!</h1>

Resources