Font size detective

It is easy to use too many font sizes on a website.
Especially when using em font sizes as these are relative to their parent.

I wanted an easy way to see the number of font sizes used on a website.
I created this JavaScript bookmarklet.

To use:

1. Add a new bookmark in your browser
2. Paste the below code into the URL
3. Go to a website and click the bookmark link

	javascript:(function () {
	window.fsd = {};
	const TOO_MANY_FONT_SIZES = 10;
	fsd.nukeResults = () => {
	let $result = document.querySelector('.fs-result');
	if ($result !== null) {
	$result.style.display = 'none';
	}
	var $labels = document.querySelectorAll('.fs-label');
	if ($labels.length) {
	$labels.forEach(label => label.remove());
	}
	};
	fsd.rerun = () => {
	fsd.nukeResults();
	fsd.getFontSizes();
	};
	fsd.hideLabels = () => {
	let $labels = document.querySelectorAll('.fs-label');
	$labels.forEach(label => label.style.display = 'none');
	};
	fsd.showLabels = () => {
	let $labels = document.querySelectorAll('.fs-label');
	$labels.forEach(label => label.style.display = 'inline-block');
	};
	fsd.isHidden = ($el) => {
	return $el.offsetHeight === 0;
	};
	fsd.isIgnoredEl = ($el) => {
	if (fsd.isHidden($el)) {
	return true;
	}
	if ($el.tagName === 'SVG') {
	return true;
	}
	let ignored = false;
	let tagClasses = typeof($el.className) === 'string' ? $el.className.split(' ') : [];
	tagClasses.forEach( cName => {
	if (cName.startsWith('fs-') || cName.startsWith('fa-')) {
	ignored = true;
	}
	});
	return ignored;
	};
	fsd.getFontSizes = () => {
	fsd.nukeResults();
	let fontSizes = [];
	let fontColours = [];
	for (let $tag of document.querySelectorAll('body *')) {
	if (fsd.isIgnoredEl($tag)) {
	continue;
	}
	let style = window.getComputedStyle($tag, null).getPropertyValue('font-size');
	let fontSize = parseFloat(style);
	if (fontSize > 0) {
	fontSizes.push(fontSize);
	}
	let $label = document.createElement('span');
	$label.innerText = fontSize + 'px';
	if (typeof fontColours[fontSize] === 'undefined') {
	fontColours[fontSize] = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
	}
	$label.style.backgroundColor = fontColours[fontSize];
	$label.style.color = '#fff';
	$label.style.font = `normal bold ${fontSize}px/1 Arial`;
	$label.style.marginLeft = '3px';
	$label.style.padding = '1px 3px';
	$label.classList.add('fs-label');
	$tag.appendChild($label);
	}
	let uniqueFontSizes = Array.from(new Set(fontSizes));
	uniqueFontSizes = uniqueFontSizes.sort((a, b) => a - b);
	let numFontSizes = uniqueFontSizes.length;
	let msg = `<div class="fs-result__inner" style="border:3px solid #000; border-radius:5px; font:normal 20px/1 Arial; padding:20px 25px; color:#000; box-sizing:border-box; background:#fff; display: flex;"><div>🕵 <strong>${numFontSizes} font sizes used on this page</strong><br><br>`;
	msg += '<div style="display:flex; flex-wrap:wrap;">';
	for (let size of uniqueFontSizes) {
	msg += `<span class="fs-result__size" style="background-color:${fontColours[size]}; font-style:normal; padding:2px 4px; margin:0 5px 5px 0; color:#fff;">${size}px</span>`;
	}
	msg += '</div>';
	if (numFontSizes >= TOO_MANY_FONT_SIZES) {
	msg += "<br><div class=\"fs-result__warning\">That's a lot 😱! Try merging similar font sizes.</div>";
	}
	msg += '</div>';
	msg += `<div class="fs-result__actions" style="margin-left:auto;">Labels: <button class="fs-result__btn" onclick="fsd.hideLabels()">Hide</button> | <button class="fs-result__btn" onclick="fsd.showLabels()">Show</button> | <button class="fs-result__btn" onclick="fsd.rerun()">Re-run</button></div>`;
	msg += "</div>";
	let $banner = document.createElement('div');
	$banner.classList.add('fs-result');
	$banner.style.position = 'fixed';
	$banner.style.width = '100vw';
	$banner.style.bottom = 0;
	$banner.style.left = 0;
	$banner.style.zIndex = 6969696969;
	$banner.innerHTML = msg;
	document.body.insertBefore($banner, document.body.childNodes[0]);
	};
	fsd.getFontSizes();
	})();

view raw font-size-detective.js hosted with ❤ by GitHub