Member Avatar for Virangya

Hi, I want to give a percentage for the font size. currently i'm using <h1> tag. But that text size is smaller than i need. How to make it bigger. and like i said i want to use a percentage as the size. so if i maximize my page or minimize, size should increase and decrease respectively.

Edited by Virangya because: n/a
  • 2 Contributors
  • 2 Replies
  • 252 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Virangya

Dani AI

Generated

A quick follow-up to the thread: ’s CSS hint is the simplest route, and ’s confirmation shows it solves the immediate need. For a more robust solution that scales with the browser window (so text grows/shrinks as you maximize/minimize), prefer relative units and a fluid approach instead of relying only on a fixed percentage.

Percent/em vs rem vs viewport units:

  • Percent and em are relative to the parent element and can be unpredictable if other styles change.
  • rem is tied to the root font-size, giving consistent scaling across the page.
  • vw (viewport width) actually responds to window size. Combining these gives fluid, readable headings.

Example of a fluid, bounded heading size (keeps a readable minimum and maximum while scaling with viewport):

h1 {
  font-size: clamp(1.75rem, 3.5vw + 1rem, 5rem);
}

Practical workflow:

  • Keep the root/font baseline respectful of user settings (e.g., html { font-size: 100%; }).
  • Use rem for layout-consistent sizes, and clamp() or a vw-based expression for headings you want to scale.
  • Test on small phones and very wide screens to ensure the min and max values keep text legible.

Troubleshooting and accessibility notes:

  • If resizing seems to do nothing, check for CSS overrides, fixed px sizes on parent elements, or media queries.
  • Avoid scaling text with transform: scale() — it breaks text reflow and accessibility.
  • Respect user zoom and default font-size preferences so content remains usable for everyone.

This keeps the quick fix from the thread as a starting point while giving a modern, responsive pattern for headings that actually respond to window size.

Recommended Answers

All 2 Replies

Member Avatar for fusedreality

simply state in the css the percentage of the size you want your h1 size. It gets the value of 100% from your body text. So, if you wanted the h1 tag to be twice the size of normal text, you'd put this in:

h1 {
font-size:200%;
}
Member Avatar for Virangya

Hey, thanxxx loads! :)

Edited by Virangya because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.