Responsive Font Size in Css

Responsive font size in CSS

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.

how to make my font size responsive?

Check this code.

#welcome{  font-size:10vw;}#to{  font-size:6vw;}#mp{  font-size:12vw;}

<div id="page-wrap">             <h1 id="welcome">Welcome!</h1>  <h2 id="to">to</h2>  <h1 id="mp">My Portfolio!</h1></div>

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

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. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

vw (% of the viewport width)
vh (% of the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

Pure CSS to make font-size responsive based on dynamic amount of characters

Note: This solution changes based on viewport size and not the amount of content

I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/
and
https://medium.com/design-ux/66bddb327bb1

CSS-Grid and font-size with em doesn't seem to work responsively

That is because you declare your font-sizes relative to either:

font-size of the <html>-element <= rem,
current font-size of the very elements (inherited from its parent elements up to the root element or even browser font-size) <= em.

To achieve responsive font-sizes you have to use viewport percentage lengths like vw or vh within your font-size-rules.

Below, a responsive example using vw and clamp().
Between 400px and 1200px viewport width, it makes the font-size grow dynamically from 2.0625rem to 2.8125rem relative to viewport width.
Ignore the odd looking rem values and have a look at the vw therein, doing the responsive "magic":

h1 {
  font-size: clamp(2.0625rem, 2.0625rem + 12 * (100vw - 400px) / 800, 2.8125rem);
}

Responsive font size for high resolutions not working in MUI 5

I have faced same issue. if you check the https://mui.com/customization/typography/#responsive-font-sizes there is chart which shows how responsiveFontSizes() displays. basically at lower screen resolutions higher fontsize shrinks faster compared to lower fontsize. so I skipped responsiveFontSizes() all together.

I wrote my custom typograhy tags with rem units w.r.t 1024px media breakpoint. the added breakpoint in index.css to increase the html font-size

Option1: lower to higher screen resolution

App.js

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import './index.css';

const theme = createTheme({
  typography: {
    h1: {
      fontWeight: 600,
      fontSize: '2.25rem',
      lineHeight: 2.75,
    },
    h2: {
      fontWeight: 600,
      fontSize: '1.625rem',
      lineHeight: 2.125, 
    },
    ...
  },
});

export default function MyApp() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h1" color="primary">Heading 1</Typography>
      <Typography variant="h2" color="primary">Heading 2</Typography>
    </ThemeProvider>
  );
}

index.css

@media only screen and (min-width: 1024px) {
    html {
    font-size: 100%;
    }
  };
  @media only screen and (min-width: 1280px) {
    html {
    font-size: 125%;
    }
  };
  @media only screen and (min-width: 1536px) {
    html {
    font-size: 150%;
    }
  };
  @media only screen and (min-width: 1920px) {
    html {
    font-size: 187.5%;
    }
  };

Options2: with responsiveFontSizes (higher to lower scrensizes) :
for this you have to set typography fontsize based on the highest resolution. check https://mui.com/customization/theming/#responsivefontsizes-theme-options-theme for other options and further tweaking.

import * as React from 'react';
import { createTheme, ThemeProvider, responsiveFontSizes } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

const theme = createTheme({
  typography: {
    h1: { fontSize: '5rem' },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 425,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
      '3xl': 1920,
      '4xl': 2560,
      '5xl': 3200,
    },
  },
});

export default function MyApp() {
  return (
    <ThemeProvider theme={responsiveFontSizes(theme, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], factor: 5 })}>
      <Typography variant="h1" color="primary">
        Heading 1
      </Typography>
      <Typography variant="h6" color="primary">
        Heading 6
      </Typography>
      <Typography variant="body1" color="primary">
        Body 1
      </Typography>
    </ThemeProvider>
  );
}

Responsive Font Size in Css