QML and font sizes when designing for multiple screen sizes (Android)

[aarelovich]

I'm having my first go at developing an App for android. What I do is design each button, bar, text so that the width and height is a percentage of the main window width and height. This way, I make sure that the proportions will look right in any given screen. My problem is the font. My question is: How can I compute the font size for, say, my buttons so that text won't be too small or too large in any given screen?

This is what I've tried.

My best result was to compute the font size for each button like this:

import QtQuick 2.10
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

ApplicationWindow {

    id: mainW
    visible: true
    width: 1000
    height: 500
    title: qsTr("Hello World")

    Column{
        anchors.centerIn: parent
        spacing: 0.05*parent.height

        Button {
            id: btn1
            font.family: "Robotto"
            width: 0.8*mainW.width
            height: 0.1*mainW.height
            text: "TEXT1"
            font.pixelSize: 0.8*height
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            id: btn2
            font.family: "Robotto"
            width: 0.8*mainW.width
            height: 0.1*mainW.height
            text: "A"
            font.pixelSize: 0.8*height
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            id: btn3
            font.family: "Robotto"
            width: 0.8*mainW.width
            height: 0.2*mainW.height
            //text: "A really really, but very really long text with lots of stuff"
            text: "Another button"
            font.pixelSize: getTextSize(btn3,btn3.text)
            anchors.horizontalCenter: parent.horizontalCenter
        }

    }


    FontMetrics {
        id: metrics
        font.family: "Robotto"
    }

    function getTextSize(element,text){
        metrics.font.pixelSize = 0.8*element.height;
        var brect = metrics.boundingRect(text);
        if (brect.width > element.width*0.8){
            var k = element.width*0.8/brect.width
            return Math.floor(metrics.font.pixelSize*k);
        }
        else return metrics.font.pixelSize;
    }
}

Now, this works perfectly (it gives a warning, but I allready have an idea on how to fix it), but in a real life application I'm afraid of have like an OK and CANCEL button and they will be shown with different font sizes.

My second approach was something like this:

FontMetrics{
        id: metrics
        font.family: "Roboto"
    }

    function getTextSize(w,h,nchars){
        var temp = w;
        w = h;
        h = temp;
        metrics.font.pixelSize = 0.8*h;        
        var text = "";
        for (var i = 0; i < nchars; i++)
            text = text + "B";
        var ncharsw = metrics.boundingRect(text).width;
        console.log("W " + w + " H " + h + " ncharsw " + ncharsw);
        if (ncharsw > w*0.8){
            var k = w*0.8/ncharsw
            return Math.floor(metrics.font.pixelSize*k);
        }
        else return metrics.font.pixelSize;
    }

The function above is called like this:

fhButttonTextSize = getTextSize(0.8*mainWindow.width,0.1*mainWindow.height,20);

The result is actually a property which is set to the pixelSize attribute of the text of all my buttons. My idea was to figure the common font denominator and set that size for all text buttons.

However, it worked on one of my screens (PC) but when I ran it in my phone a 12 letter word was longer than the button.

So what is the right approach?

Also, another question. If I don't set font sizes at all, how does Qt and QML select the font size?

I'd appreciate any help on the matter.

[ODБOï]

@aarelovich hi,
have a look at this http://doc.qt.io/qt-5/scalability.html#calculating-scaling-ratio