143 lines
7.0 KiB
HTML
143 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CLAVITOR Wordmark — Interactive Tester</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..800&family=Plus+Jakarta+Sans:wght@300..800&family=Inter:wght@300..800&family=Sora:wght@300..800&family=Syne:wght@400..800&family=Cormorant+Garamond:wght@300..700&family=Unbounded:wght@300..900&family=DM+Sans:wght@300..800&family=Outfit:wght@300..800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--brand-black: #0A0A0A;
|
|
--brand-accent: #7C3AED;
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #F5F5F5;
|
|
--text-primary: #171717;
|
|
--text-secondary: #525252;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { font-family: system-ui, sans-serif; background: var(--bg-primary); color: var(--text-primary); padding: 40px; }
|
|
h1 { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
|
|
.subtitle { color: var(--text-secondary); margin-bottom: 24px; }
|
|
.controls { background: var(--bg-secondary); padding: 20px; border-radius: 12px; margin-bottom: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
|
|
.control-group { display: flex; flex-direction: column; gap: 6px; }
|
|
label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); }
|
|
select, input[type="text"] { padding: 10px 14px; font-size: 16px; border-radius: 8px; border: 2px solid #E5E5E5; background: white; min-width: 200px; }
|
|
select:focus, input:focus { outline: none; border-color: var(--brand-accent); }
|
|
.weight-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin: 40px 0 20px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-accent); }
|
|
.spacing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
|
|
.wordmark-box { text-align: center; padding: 28px 16px; background: var(--bg-secondary); border-radius: 12px; min-height: 140px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
|
|
.wordmark { font-size: 72px; white-space: nowrap; margin-bottom: 12px; line-height: 1.1; }
|
|
.spacing-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
|
|
.preview-size { display: flex; gap: 12px; align-items: center; margin-left: auto; }
|
|
.size-value { font-weight: 600; color: var(--brand-accent); min-width: 50px; }
|
|
input[type="range"] { width: 140px; }
|
|
|
|
@media (max-width: 1000px) {
|
|
.spacing-grid { grid-template-columns: repeat(3, 1fr); }
|
|
.wordmark { font-size: 48px; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.spacing-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.wordmark { font-size: 36px; }
|
|
.preview-size { width: 100%; margin-left: 0; margin-top: 10px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>CLAVITOR Wordmark Tester</h1>
|
|
<p class="subtitle">Pick a font. See all weight + spacing combinations.</p>
|
|
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label>Font Family</label>
|
|
<select id="fontSelect">
|
|
<option value="Figtree">Figtree (Sans)</option>
|
|
<option value="Inter">Inter (Sans)</option>
|
|
<option value="Plus Jakarta Sans">Plus Jakarta Sans (Sans)</option>
|
|
<option value="Sora">Sora — Geometric</option>
|
|
<option value="Syne">Syne — Wide Geometric</option>
|
|
<option value="Unbounded">Unbounded — Wide Display</option>
|
|
<option value="DM Sans">DM Sans — Clean Wide</option>
|
|
<option value="Outfit">Outfit — Geometric Modern</option>
|
|
<option value="Cormorant Garamond">Cormorant Garamond — Serif</option>
|
|
<option value="Satoshi">Satoshi (fallback)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Preview Text</label>
|
|
<input type="text" id="previewText" value="Clavitor" maxlength="20">
|
|
</div>
|
|
|
|
<div class="control-group preview-size">
|
|
<label>Size</label>
|
|
<input type="range" id="sizeSlider" min="24" max="120" value="72">
|
|
<span class="size-value" id="sizeValue">72px</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results"></div>
|
|
|
|
<script>
|
|
const fonts = {
|
|
'Figtree': { family: "'Figtree', sans-serif", weights: [100, 200, 300, 400, 500, 600, 700, 800] },
|
|
'Inter': { family: "'Inter', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
|
'Plus Jakarta Sans': { family: "'Plus Jakarta Sans', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
|
'Sora': { family: "'Sora', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
|
'Syne': { family: "'Syne', sans-serif", weights: [400, 500, 600, 700, 800] },
|
|
'Unbounded': { family: "'Unbounded', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800, 900] },
|
|
'DM Sans': { family: "'DM Sans', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
|
'Outfit': { family: "'Outfit', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
|
'Cormorant Garamond': { family: "'Cormorant Garamond', serif", weights: [300, 400, 500, 600, 700] },
|
|
'Satoshi': { family: "'Satoshi', 'Plus Jakarta Sans', sans-serif", weights: [300, 400, 500, 600, 700, 800] }
|
|
};
|
|
|
|
const spacings = [
|
|
{ val: 0, label: '0em (tight)' },
|
|
{ val: 0.125, label: '0.125em' },
|
|
{ val: 0.25, label: '0.25em' },
|
|
{ val: 0.375, label: '0.375em' },
|
|
{ val: 0.5, label: '0.5em (wide)' }
|
|
];
|
|
|
|
function render() {
|
|
const fontName = document.getElementById('fontSelect').value;
|
|
const text = document.getElementById('previewText').value || 'Clavitor';
|
|
const size = document.getElementById('sizeSlider').value;
|
|
const font = fonts[fontName];
|
|
|
|
let html = '';
|
|
|
|
font.weights.forEach(weight => {
|
|
html += `<div class="weight-label">Weight ${weight}</div>`;
|
|
html += `<div class="spacing-grid">`;
|
|
|
|
spacings.forEach(sp => {
|
|
html += `
|
|
<div class="wordmark-box">
|
|
<div class="wordmark" style="font-family: ${font.family}; font-weight: ${weight}; letter-spacing: ${sp.val}em; font-size: ${size}px;">
|
|
${text}
|
|
</div>
|
|
<div class="spacing-label">${sp.label}</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += `</div>`;
|
|
});
|
|
|
|
document.getElementById('results').innerHTML = html;
|
|
document.getElementById('sizeValue').textContent = size + 'px';
|
|
}
|
|
|
|
document.getElementById('fontSelect').addEventListener('change', render);
|
|
document.getElementById('previewText').addEventListener('input', render);
|
|
document.getElementById('sizeSlider').addEventListener('input', render);
|
|
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|