Responsive Font Size in CSS

Taimoor Sattar author Posted on
Responsive Font Size means change font size on screen resize. There is common two way to achieve responsive font size
  • Using media query
  • Use viewport width "VW" unit
Difference between two is that "vw" unit change font size continuously as browser screen is resized. The media query is not continuous, it defines set points and based on these setpoint decisions are made.

Using media query

We can use a media query to make responsive font size. Media queries are used to modify the web page elements on the different parameter of the device. The parameter that the media check is as follows
  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution
In media queries, we can define points so that when that point achieves the certain task is to perform. But for responsive font size, Width of the viewport or device is enough. Let define media query for font size for different screen sizes. [formatc lang="css"]@media only screen and (max-width: 600px) { .font { font-size: 16px; } } @media only screen and (max-width: 900px) { .font { font-size: 12px; } }[/formatc]

Use viewport width "VW" unit

The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 100cm wide, 1vw is 1cm. You can define the value of "vw" unit on trial and error. Put the value of viewport width that best defines your satisfaction. [formatc lang="css"]font-size: 12vw;[/formatc]