<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font-Vergleich</title>

    <!-- Google Fonts: nur die dünnsten Varianten -->
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;1,400&family=EB+Garamond:wght@400&family=PT+Serif:wght@400&family=Noto+Serif:wght@200&display=swap" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .font-libre { font-family: 'Libre Baskerville', serif; }
        .font-ebgaramond { font-family: 'EB Garamond', serif; }
        .font-ptserif { font-family: 'PT Serif', serif; }
        .font-notoserif { font-family: 'Noto Serif', serif; }
    </style>
</head>
<body class="bg-gray-100 p-8">
<h1 class="text-2xl font-bold mb-6">Vergleich Times New Roman ähnliche Schriften (dünnste Varianten)</h1>

<div class="space-y-6">
    <div>
        <p class="font-libre text-4xl">Architektur</p>
        <span class="text-sm text-gray-600">Libre Baskerville (Regular 400 – dünnste Variante verfügbar)</span>
    </div>

    <div>
        <p class="font-ebgaramond text-4xl">Architektur</p>
        <span class="text-sm text-gray-600">EB Garamond (Regular 400 – wirkt sehr filigran)</span>
    </div>

    <div>
        <p class="font-ptserif text-4xl">Architektur</p>
        <span class="text-sm text-gray-600">PT Serif (Regular 400 – etwas kräftiger)</span>
    </div>

    <div>
        <p class="font-notoserif text-4xl font-thin">Architektur</p>
        <span class="text-sm text-gray-600">Noto Serif (ExtraLight 200 – deutlich dünner)</span>
    </div>
</div>
</body>
</html>
