JSFiddle - React, Tailwind, and code Playground

JavaScript

s = '@+.0hi'

function m(x) {
    a = document.createElement('canvas').getContext('2d');
    a.font = '9px Monaco';
    a.fillText(x, y = i = 0, 20);
    for (; i < 3600;) y += a.getImageData(0, 0, 30, 30).data[i++];
    return y
}
alert(s.split('').sort(function (a, b) {
    return m(a) - m(b)
}).join(''))