Font-size below 16px is getting distorted

[sathya...@gmail.com]

I wonder why icoMoon fonts getting distorted below 16px .
PLease provide your insight

[sathya...@gmail.com]

when we use especially line icons

[Keyamoon]

It depends on the grid size of the icons you are using (more info: https://icomoon.io/#docs/crisp). You should use your icons at a size that is a multiple of that grid size. This is true about any image (including vector or bitmap icons) when used at small sizes. If the pixels in the image don't match with the pixels on your display, the result would become blurry.

[sathyana...@payoda.co.in]

so.. if my font size is 13px Do i have to import svg of 13*13

[Keyamoon]

If you want to use a font size of 13px, your icons must have been designed on a 13px grid. The size of the SVG doesn't matter, it's the pixel grid on which the icon was designed that matters. When designing your icon, its lines should align with the pixel grid to make sure that the final result would also match with your screen's pixels. If they don't match up, anti-aliasing would make them blurry.

[sathyana...@payoda.co.in]

Actually i imported below SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="13" height="15" viewBox="0 0 13 15">
<defs>
<style>

.cls-2 {
fill: #000000;
}
</style>
</defs>
<path d="M12.000,6.000 C12.000,6.000 12.000,14.000 12.000,14.000 C12.000,14.000 12.000,15.000 12.000,15.000 C12.000,15.000 11.000,15.000 11.000,15.000 C11.000,15.000 2.000,15.000 2.000,15.000 C2.000,15.000 1.000,15.000 1.000,15.000 C1.000,15.000 1.000,14.000 1.000,14.000 C1.000,14.000 1.000,6.000 1.000,6.000 C1.000,6.000 -0.000,6.000 -0.000,6.000 C-0.000,6.000 -0.000,5.000 -0.000,5.000 C-0.000,5.000 -0.000,3.000 -0.000,3.000 C-0.000,3.000 -0.000,2.000 -0.000,2.000 C-0.000,2.000 1.000,2.000 1.000,2.000 C1.000,2.000 4.000,2.000 4.000,2.000 C4.000,2.000 4.000,1.000 4.000,1.000 C4.000,1.000 4.000,-0.000 4.000,-0.000 C4.000,-0.000 5.000,-0.000 5.000,-0.000 C5.000,-0.000 8.000,-0.000 8.000,-0.000 C8.000,-0.000 9.000,-0.000 9.000,-0.000 C9.000,-0.000 9.000,1.000 9.000,1.000 C9.000,1.000 9.000,2.000 9.000,2.000 C9.000,2.000 12.000,2.000 12.000,2.000 C12.000,2.000 13.000,2.000 13.000,2.000 C13.000,2.000 13.000,3.000 13.000,3.000 C13.000,3.000 13.000,5.000 13.000,5.000 C13.000,5.000 13.000,6.000 13.000,6.000 C13.000,6.000 12.000,6.000 12.000,6.000 ZM2.000,14.000 C2.000,14.000 11.000,14.000 11.000,14.000 C11.000,14.000 11.000,6.000 11.000,6.000 C11.000,6.000 2.000,6.000 2.000,6.000 C2.000,6.000 2.000,14.000 2.000,14.000 ZM8.000,1.000 C8.000,1.000 5.000,1.000 5.000,1.000 C5.000,1.000 5.000,2.000 5.000,2.000 C5.000,2.000 8.000,2.000 8.000,2.000 C8.000,2.000 8.000,1.000 8.000,1.000 ZM12.000,3.000 C12.000,3.000 1.000,3.000 1.000,3.000 C1.000,3.000 1.000,5.000 1.000,5.000 C1.000,5.000 12.000,5.000 12.000,5.000 C12.000,5.000 12.000,3.000 12.000,3.000 ZM8.000,7.000 C8.000,7.000 9.000,7.000 9.000,7.000 C9.000,7.000 9.000,13.000 9.000,13.000 C9.000,13.000 8.000,13.000 8.000,13.000 C8.000,13.000 8.000,7.000 8.000,7.000 ZM4.000,7.000 C4.000,7.000 5.000,7.000 5.000,7.000 C5.000,7.000 5.000,13.000 5.000,13.000 C5.000,13.000 4.000,13.000 4.000,13.000 C4.000,13.000 4.000,7.000 4.000,7.000 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>


with grid size 16 and after conversion when font-size is set to 13px icon seems to be blurred.

[Keyamoon]

After importing your SVG, use the edit panel (pencil button in toolbar) and set the grid size to 15. You will see that your icons' lines match up with the grid. This means that your icon was designed on a pixel grid with a height of 15. This means that you should view/use your icon at sizes that are a multiple of 15 (15, 30, 45, etc.). If you change your preview size to 15 in IcoMoon app, you will see how much more crisp it will look.

[sathya...@gmail.com]

Awsome... it renders as expected..
Many thanks for the speedy reply