Responsive font size for CMS items

Design help General
1

Hey everyone, I did some Googling, but couldn’t find an answer yet.

I’m looking for a method to set the font size of a CMS text element to relative terms. In other words, I’d like the font size to be defined by the width of the element or viewport. This would let me keep the text element from wrapping when the viewport is smaller, or the text longer.

Is there any way to do this? I tried using a percentage or VW but that just seems to always set a fixed size for however much text you use. Currently any longer text input in the CMS either will either wrap, or be cut off (when I prevent overflow). It’d be much cooler if it scales down if there’s more text.

2 Likes
2

You can achieve this with custom code - have a look at this article

Basically it looks like you can give certain parameters in characters that will change the font size based on a character count threshold…

something like this (from that article above)

$('#text').on('keypress', function(e) {
    var that = $(this),
        textLength = that.val().length
    ;
    
    if(textLength > 30) {
        that.css('font-size', '5px');
    } else if(textLength > 20) {
        that.css('font-size', '10px');
    } else if(textLength > 10) {
        that.css('font-size', '15px');
    }
});
2 Likes
3

Thanks IVG, I’ll check it out :+1:

I’m not super advanced with custom code, but I’ll give it a try.

4

@nickdijkstra Have you had success with this?

I have a single line CMS text item.
I need to make it where if

25 characters = 25pt
40 characters = 20pt
65 characters = 16pt

5

Not really, tbh. I ended up dropping the idea completely.

It’s a shame because it’s hard to design based for CMS text (especially for mobile devices) when the length can range from short to long.

1 Like