Member Avatar for pardeepkhatri

How can I make my fonts responsive???

  • 6 Contributors
  • 5 Replies
  • 192 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by GrazerC0de

Dani AI

Generated

Several good starter ideas already appear here: pointed to media-query adjustments, and used percentage bases, and and recommended relative units. Those approaches are valid, but a more maintainable pattern combines a predictable root scale with a small amount of fluid behavior so text stays readable across devices without dozens of breakpoints.

Use rem for the global typography scale (predictable because it’s root-relative) and reserve em for component-local adjustments where inheritance should matter. Percentages on the root/body are equivalent to changing the base but can be confusing when nested. Avoid locking primary sizes in px so browser/user zoom and accessibility settings remain effective. Keep a modest modular scale (about 1.1–1.25) for headings to preserve visual rhythm.

For modern, compact rules, prefer a fluid technique that supplies a minimum, a scalable preferred value, and a maximum. The CSS clamp() function does this in one declaration; it reduces breakpoint churn while keeping sizes sensible. Example pattern:

:root {
  --fs-min: 0.875rem;
  --fs-max: 1.125rem;
}

p {
  font-size: clamp(var(--fs-min), calc(0.95rem + 0.6vw), var(--fs-max));
  line-height: 1.5;
}

This builds on ’s idea of relative sizing and replaces many ad-hoc media-query tweaks suggested by .

Practical checks and cautions: test at different zoom levels and real devices, verify readable measure (roughly 45–75 characters per line) with max-width, keep line-height generous on small text, and never disable user scaling (avoid -webkit-text-size-adjust: none). For older browsers, a lightweight media-query fallback is safe.

Recommended Answers

All 5 Replies

Member Avatar for Member #949455

How can I make my fonts responsive???

You mean changing font-size by using percentage base on the media-queries?

Something like this:

@media screen and (max-width: 480px) {

font-size: 50%;

}
Edited by Member #949455
Member Avatar for Nmalik1

I have make my responsive font for my website , you can try this.
body {font-size:100%}

h1 { font-size:6.2em;font-weight:500; }
HTML

1 <div class="row">
2 <div class="twelve columns text-center">
3 <h1> LARGE HEADER TAGLINE </h1>
 4 </div><!-- End Tagline -->
5nn</div><!-- End Row -->
Member Avatar for HoverportMedia

If you really want a good responsive font sizes, I would recommend using em instead of px. There's actually a simple formula for this.

target(initial px size) / content(usually 16) = result

So let's say your font size you want to achieve in pixels is 14. With most browser windows, the base font size is 16. In order to achieve this just simply use your formula.

target (14px) / content (16px) = result (0.875em)

So instead of setting your font-size to 14px - use 0.875em.

Member Avatar for profmuluka

instead of using px or pic use em and % for your font size

Member Avatar for GrazerC0de

use percentage like this :
font-size : 90%

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.