/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Font Size

Copy linkTweet thisAlerts:
Dec 04.2021

Good afternoon,

Im having trouble with my header.

I have a container which has a h1 tag inside it that shows a title. Normally a name. I have set the font size to a suitable size to make it fit nicely in a range of scenarios and lengths.

That size changes with media queries.

I’ve now come across longer titles which don’t fit well. I’ve made the font smaller but then for the majority it doesn’t look good as it’s too small.

Is there a way of adjusting the font size so it fits the container?

My current solution might be to do a PHP switch based on string length and then apply a different CSS style class to the H1 based on its length.

Before doing this however I wanted to ask if there was a way do achieving this in CSS first?

to post a comment
CSSHTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumDec 04.2021 — Would it be an option to enable line wrapping so that the text would occupy two lines?
Copy linkTweet thisAlerts:
@singaporeDudeauthorDec 04.2021 — @Sempervivum#1640174

Good morning Sir,

Yes that is an option. I guess ultimately I’m trying to make the font size as large as say 4rem but if it’s long then I need to shrink it so it fits but also appears like a main heading in the size provided.
Copy linkTweet thisAlerts:
@sibertDec 05.2021 — > @singaporeDude#1640165 Is there a way of adjusting the font size so it fits the container?

One way is to use vw

https://jsfiddle.net/9sb518av/1/
Copy linkTweet thisAlerts:
@singaporeDudeauthorDec 05.2021 — @sibert#1640189

Yes, but does that factor in the length of the string.

I could set white-space: nowrap and then set font size min(2rem, 5vw);

But would it consider the size of my string?
Copy linkTweet thisAlerts:
@sibertDec 05.2021 — > @singaporeDude#1640191 But would it consider the size of my string?

Basically it is a fraction of the viewport.

https://www.w3schools.com/cssref/css_units.asp
Copy linkTweet thisAlerts:
@rozsefidDec 05.2021 — use this guide

[https://css-tricks.com/viewport-sized-typography](https://css-tricks.com/viewport-sized-typography)[/](https://ariyan7.wordpress.com/2021/11/23/concrete-antifreeze/)
Copy linkTweet thisAlerts:
@kristervDec 06.2021 — If the content is dynamic then the only solution I'm aware of is to use JavaScript when the page is done loading (or data changed). And even then it's a bit of a manual figuring out what size it should be.
×

Success!

Help @singaporeDude spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...