I want to create a good all round font system I can use throughout my apps. So I did some research on how Google does there layout, especially font sizes for different elements. Turns out they introduced SP, a font size similar to DP but takes in a scaling unit so user can enlarge all the text if the want while still maintaining the general look. I figured I start by creating a couple font elements from the google design guide below, they use there own Roboto font for this and the image below for reference. Since it's an image, obviously the text is already in pixels so the actual sizes cannot be used for reference.

I am using LibgDX and since LibGDX works with bitmap fonts I use the Freetypefont library to generate them at runtime.DP or density independant pixels are relative to a 160 dpi screen. So to get the amount of pixels we need to divide the screens actual PPI/DPI by 160 (for mdpi screens) to get pixel density relative to mdpi and then multiply that pixel density by the DP amount listed in the above image as SP. In LibGDX there is a function to get the density factor right away: Gdx.graphics.getDensity() so to get the body font google is using I do:

parameter.size = (int)(14 * Gdx.graphics.getDensity() * scale);
BitmapFont body = regular.generateFont(parameter); // regular is the FreeTypeFontGenerator holding the Roboto Regular font.

And rendering this to my S8 screen is working great. The S8 has a pixel density of 3 so the DP/SP value gets multiplied by 3. Now I tested this on my monitor and the font is barely readable. I checked the PPI/DPI of my monitor and that is roughly 96 so 96/160 = 0.6 pixel density. So the body font on desktop will be 14 * 0.6 = 8.4 pixels so it is unreadable but funny enough the same size as my S8. But why? Shouldn't I end up with the same size font in CSS for both desktop and my S8?

body {
   font-family: 'Roboto', sans-serif;
   font-size: 14dp; // or sp
}

Yet the CSS is somewhat bigger and thus readable. I'm not sure comparing with HTML is the correct way but as far as I understand Google uses it for all it's layouts so also CSS. Anyway, when I just create my font with size 14 it will match the CSS. But obviously since the font is now 14 pixels on my S8 it will be really small since the pixels are so tightly packed.

So what am I doing wrong? Are the numbers wrong? Have I some setting somewhere that makes my website text bigger then it should? Do I have an error in my understanding or calculations?