Set different width and height to font in css/js

Question

I'm looking for a way to set different width and height separately based on viewport width and height. Is it possible in css or js?

It is certainly possible in js, but it depends on what you need exactly to determine if it can be done in CSS. Can you be more specific about your problem? Please show us code samples. — radiovisual, Dec 20 '14 at 16:50
I'm trying to achieve a text which will stay in the same proportions to div in which the text is. Not working example here: http://jsfiddle.net/s3wabLkL/1/ — Luke, Dec 20 '14 at 16:52
Have a look at http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Musa, Dec 20 '14 at 16:53
Looks like the link that @Musa supplied could be the answer for you. — radiovisual, Dec 20 '14 at 16:55
@Musa font-size by viewport units will not keep the proportions. It's scaling only by width or only by height. I've been looking for solution for 4 hours. — Luke, Dec 20 '14 at 16:56
Set width and height on *what*? The title says “to font”, but fonts lack a width property (and font height is just font size). — Jukka K. Korpela, Dec 20 '14 at 18:12

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

For a JS solution, you can use the FlowType.js library.

It will allow you to quickly and easily control the text elements on your page relative to the size of their containing div.

Your example could be setup like this:

$(document).ready(function(){

    // customize the options you pass into the
    // flowtype function in order to get the effects you want
    $('.text_block').flowtype({
     minimum   : 500,
     maximum   : 1200,
     minFont   : 12,
     maxFont   : 40,
     fontRatio : 30
    });
    
});

This example uses jQuery to ensure that all assignments via flowtype are only assigned after the page has loaded.

To activate flowtype, you just need to put this call somewhere before your closing <body> tag:

<script> $('.text_block').flowtype(); </script>

See the flowtype.js website for more information on how to install flowtype, and how to configure it.

Here is a jsfiddle showing your example with the flowtype library assignments.

Hope this helps!

You can customize use the flowtype configurations to get the effect you are looking for. — radiovisual, Dec 20 '14 at 17:42

Set different width and height to font in css/js

1 Answers1

For a JS solution, you can use the FlowType.js library.

Here is a jsfiddle showing your example with the flowtype library assignments.