Article Categories

Selected Reading

How to set font size using CSS Measurement Unit vmin?

Javascript Web Development Front End Scripts

The vmin CSS unit sets font size based on the smaller dimension of the viewport (width or height). It's useful for creating responsive text that scales with screen size.

What is vmin?

The vmin unit represents 1% of the viewport's smaller dimension. If the viewport is 800px wide and 600px tall, 1vmin = 6px (1% of 600px).

Syntax

font-size: [number]vmin;

Example

<html>
   <head>
      <title>vmin Font Size Example</title>
   </head>
   <body>
      <div style="position: relative; left: 90px; top: 3px; background-color: yellow; font-size: 4vmin;">
         This div has responsive font sizing using vmin.
      </div>
      
      <div style="font-size: 2vmin; margin: 20px; padding: 10px; border: 1px solid #ccc;">
         Smaller text using 2vmin
      </div>
      
      <div style="font-size: 6vmin; margin: 20px; color: blue;">
         Larger text using 6vmin
      </div>
   </body>
</html>

How vmin Works

The vmin unit automatically adjusts based on screen orientation and size:

Desktop (1200x800): 1vmin = 8px (1% of 800px height)
Mobile Portrait (375x667): 1vmin = 3.75px (1% of 375px width)
Mobile Landscape (667x375): 1vmin = 3.75px (1% of 375px height)

Comparison with Other Units

Unit	Based On	Responsive?
`px`	Fixed pixels	No
`vw`	Viewport width	Yes
`vh`	Viewport height	Yes
`vmin`	Smaller viewport dimension	Yes

Common Use Cases

Use vmin for:

Headings that need to scale consistently across devices
Text that should remain readable on both portrait and landscape orientations
Creating fluid typography that adapts to any screen size

Conclusion

The vmin unit creates truly responsive typography by scaling with the viewport's smaller dimension. It ensures consistent text scaling across different screen sizes and orientations.

mkotla

Updated on: 2026-03-15T23:18:59+05:30

249 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next