How can check two elements have similar fontSize or not by playwright?

I have two page that have same h1 elements, but different have different fontSize.
One of them is 20px, and another is 22px.
I am looking for comparing two page visually in playwright.
At first I have written the following code for capturing initial screenshots from urls:

import { test, expect } from "@playwright/test";
import { chromium } from "@playwright/test";
const playwright = require("playwright");
test("example test", async ({ page }) => {
  const browser1 = await chromium.launch();
  const browser2 = await chromium.launch();
  const page1 = await browser1.newPage();
  const page2 = await browser2.newPage();
  await page1.goto("localhost:5500/index.html");
  await page2.goto("localhost:5501/index.html");

  await expect(page1).toHaveScreenshot();
  await expect(page2).toHaveScreenshot();
});

After capturing screenshots, I have modified and added the following code to my test code to compare screenshots of page1 with page2:

import { test, expect } from "@playwright/test";
import { chromium } from "@playwright/test";
const playwright = require("playwright");
test("example test", async ({ page }) => {
  const browser1 = await chromium.launch();
  const browser2 = await chromium.launch();
  const page1 = await browser1.newPage();
  const page2 = await browser2.newPage();
  await page1.goto("localhost:5500/index.html");
  await page2.goto("localhost:5501/index.html");
   expect(await page2.screenshot()).toMatchSnapshot("test2.png", {
     maxDiffPixels: 10,
   });

});

But, when i run the command npx playwright test, Playwright can not recognize the differences between fontSize. However, when the difference value is much larger, it can be recognized!.
How can solve this problem?