Typography Detection
Every font, weight, and scale,
reverse-engineered from the DOM.
ExtractVibe inspects computed styles across the entire DOM to identify font families, weights, sizes, line heights, and letter spacing. It reconstructs the complete type scale and detects fallback stacks, Google Fonts, and self-hosted typefaces.
01 / Typography Detection
Font family and fallback stack detection
Identifies every font-family declaration in use, from the primary display typeface to the monospace font for code blocks. ExtractVibe resolves the full fallback chain and detects whether fonts are loaded from Google Fonts, Adobe Fonts, a CDN, or self-hosted from the site's own domain. You get the exact CSS font stack needed to reproduce the typography.
02 / Typography Detection
Type scale reconstruction
Analyzes all font-size values in use across headings, body text, captions, and UI elements. ExtractVibe detects the underlying scale ratio (major third, perfect fourth, custom) and maps each size to its semantic role. The output is a complete type scale you can drop into a Tailwind config or CSS stylesheet.
03 / Typography Detection
Weight and style mapping
Captures every font-weight and font-style combination in use, from thin (100) to black (900), including italic variants. This mapping shows which weights the brand actually uses versus which are merely loaded, helping you optimize your own font loading strategy and match the visual hierarchy precisely.
04 / Typography Detection
Line height and spacing analysis
Extracts line-height, letter-spacing, and word-spacing values for each text style. These micro-typography details are what separate a pixel-perfect reproduction from a rough approximation. ExtractVibe captures the relationship between font size and leading, preserving the vertical rhythm of the original design.
How it works
01
Render in headless browser
The target page is rendered in a real Chromium instance so that web fonts load, JavaScript-injected styles execute, and the final computed typography is visible to the extraction engine.
02
DOM-wide style inspection
Every text node in the DOM is inspected for its computed font-family, font-size, font-weight, line-height, and letter-spacing. Values are aggregated and deduplicated across all elements.
03
Structured typography output
Receive a structured type system with font families, the full scale, weight mappings, and spacing values. Export as CSS, Tailwind theme, or JSON tokens.
Code Example
Typography extraction output
{
"typography": {
"families": {
"display": "Inter",
"body": "Inter",
"mono": "JetBrains Mono"
},
"scale": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem"
},
"weights": [400, 500, 600, 700],
"lineHeights": {
"tight": 1.1,
"normal": 1.5,
"relaxed": 1.625
},
"source": "Google Fonts",
"fallbackStack": "Inter, ui-sans-serif, system-ui, sans-serif"
}
}Frequently Asked Questions
Can ExtractVibe detect Google Fonts and Adobe Fonts?+
Yes. ExtractVibe inspects stylesheet link tags, @import rules, and @font-face declarations to determine the font source. It identifies Google Fonts, Adobe Fonts (Typekit), fonts loaded from CDNs like fonts.bunny.net, and self-hosted fonts served from the site's own domain.
Does it detect variable fonts and optical sizing?+
ExtractVibe detects variable font usage by inspecting font-variation-settings and the weight range in @font-face descriptors. If a site uses optical sizing (opsz axis), weight ranges, or other variable font axes, those parameters are captured and included in the output.
How accurate is the type scale detection?+
Extremely accurate. Because ExtractVibe reads computed styles from a fully rendered page rather than parsing static CSS, it captures the actual font sizes in use after all responsive breakpoints, clamp() functions, and JavaScript manipulations have been applied. The scale is derived from real rendered values, not CSS source.
What if a site uses system fonts only?+
ExtractVibe handles system font stacks gracefully. It detects -apple-system, BlinkMacSystemFont, Segoe UI, and other platform-specific font declarations, reports them as the primary typeface, and still extracts the full type scale, weight usage, and spacing values that define the typography system.
Can I export the type scale as a Tailwind config?+
Yes. The extracted type scale, font families, and weight mappings can be exported as a ready-to-use Tailwind CSS theme extension. Copy the output directly into your tailwind.config.ts file to match the target brand's typography system with zero manual measurement.
Map any site's typography
Get the complete type system from any website, including families, scale, weights, and spacing.
Related