Breaking News: Grepper is joining You.com. Read the official announcement!

responsive font size in css

Add Answer

Saqib Tahir answered on March 18, 2020 Popularity 8/10 Helpfulness 5/10

answer responsive font size in css

related css responsive font size

related responsive font-size

related Responsive font

related responsive text css

related how to make the font size responsive

related responsive font size

related responsive font size css

related responsive text size

responsive font size in css

Comment

font-size: clamp(1.5rem, 8vw - 2rem, 3rem);

Popularity 8/10 Helpfulness 5/10 Language css

Source: fluid-typography.netlify.app

Tags: css font-size responsive

Link to this answer
Share Copy Link

Contributed on Mar 29 2024

Saqib Tahir

0 Answers Avg Quality 2/10

Closely Related Answers

css responsive font size

Comment

body {
  // font grows 1px for every 100px of viewport width
  font-size: calc(16px + 1vw);
  // leading grows along with font,
  // with an additional 0.1em + 0.5px per 100px of the viewport
  line-height: calc(1.1em + 0.5vw);
}

Popularity 10/10 Helpfulness 9/10 Language css

Source: css-tricks.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Aug 28 2022

Mila Loup

0 Answers Avg Quality 2/10

responsive font-size

Comments(1)

/* please refer to https://developer.mozilla.org/fr/docs/Web/CSS/clamp() */
font-size: clamp(40px, 10vw, 70px); /* clamp(MIN, VAL, MAX) */

Popularity 10/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 09 2020

johannb75

0 Answers Avg Quality 2/10

Responsive font

Comment

.html {
font-size: calc(15px + 0.390625vw); 
}

Popularity 9/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 20 2022

Eva

0 Answers Avg Quality 2/10

responsive text css

Comment

/* Uses vh and vm with calc */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 18 2020

deadlymuffin

0 Answers Avg Quality 2/10

responsive text css

Comment

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 06 2020

Dayanaohhnana

0 Answers Avg Quality 2/10

how to make the font size responsive

Comment

font-size:10vw

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: font-size font

Link to this answer
Share Copy Link

Contributed on Apr 12 2023

Hassan Essam

0 Answers Avg Quality 2/10

responsive font size

Comment

:root {
  font-size: calc(1vw + 1vh + .5vmin);
} 
/*Now you can utilize the root em unit based on the value calculated by :root:*/
body {
  font: 1rem/1.6 sans-serif;
}

Popularity 7/10 Helpfulness 3/10 Language css

Source: github.com

Tags: css font-size font

Link to this answer
Share Copy Link

Contributed on Apr 04 2024

Saqib Tahir

0 Answers Avg Quality 2/10

responsive font size css

Comment

@media screen and (max-width: 768px) {
  /* Adjust the font size for smaller screens */
  .my-text {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  /* Set the default font size for larger screens */
  .my-text {
    font-size: 16px;
  }
}

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

responsive text size

Comment

$-xs-text: h1 22px, h2 18px, h3 14px, h4 12px, h5 11px, h6 10px, p 10px;
$-sm-text: h1 25px, h2 18px, h3 14px, h4 13px, h5 12px, h6 10px, p 10px
$-md-text: h1 30px, h2 21px, h3 16px, h4 14px, h5 13px, h6 12px, p 12px;
$-xl-text: h1 37px, h2 23px, h3 19px, h4 16px, h5 16px, h6 14px, p 14px;
$xxl-text: h1 45px, h2 28px, h3 23px, h4 20px, h5 18px, h6 16px, p 16px;

$responsive-text-sizes: (
    xs: $-xs-text,
    sm: $-sm-text,
    md: $-md-text,
    xl: $-xl-text,
    xxl: $xxl-text,
);
@each $breakpoints in map-keys($map: $responsive-text-sizes) {
    @include media-breakpoint-up($breakpoints) {
        @each $element, $size, $py, $px, $fw in map-get($map: $responsive-text-sizes, $key: $breakpoints) {
            #{$element}.responsive {
                font-size: $size;
                font-weight: $fw;
                padding: $py $px;
            }
        }
    }
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Aug 17 2022

Nazmul Hassan

0 Answers Avg Quality 2/10

responsive font size in css

Contents

More Related Answers

responsive font size in css

Closely Related Answers

css responsive font size

responsive font-size

Responsive font

responsive text css

responsive text css

how to make the font size responsive

responsive font size

responsive font size css

responsive text size

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.