A little js util for designer to find all the breakpoints and fontsizes on a website.

queryFontSizes.js

/**
 * Get all of the tags and their fontsize,
 * as well as the breakpoints for a given site
 */
function run() {
	// Tags to check, add any tags you like to the list
	const tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'input', 'a'];

	// An object to store our fontsizes in
	const dict = {};

	// Get width and height of page
	dict._width = window.innerWidth;
	dict._height = window.innerHeight;

	// For each tag, get every node with that tag on the page
	tags.forEach((tag) => {
		const nodes = [].slice.call(document.getElementsByTagName(tag));

		/**
		 * For each node, add its fontsize to
		 * the dictionary if it has a unique class name
		 */
		nodes.forEach((node) => {
			if (isUniqueTagAndSize(dict, tag, node)) {
				const style = window.getComputedStyle(node);
				dict[`${tag} ${node.classList}`] = {
					'font-size': style.fontSize,
					'font-weight': style.fontWeight,
				};
			}
		});
	});

	dict._breakpoints = getBreakpoints();

	// Return the list of font sizes
	return dict;
}

/**
 * Is the font size unique for a given tag
 * @param {Object} dict - The dictionary object
 * @param {String} tag - The tag to be compared
 * @param {Node} node - The node to compare the tag to
 */
function isUniqueTagAndSize(dict, tag, node) {
	// Return true if none of the following conditions are true
	let result = true;

	/**
	 * Only look at entries that include this tag
	 * Make sure to split at the first space or you will compare
	 * tags like 'p' to class names like 'a css-12m0k8p e1b095nl3'
	 * and get false positives
	 */
	const filteredTags = Object.keys(dict).filter(
		(key) => key.split(' ')[0] === tag
	);

	filteredTags.forEach((key) => {
		/**
		 * If the tag is in the dictionary, and doesn't equal the font size
		 * disqualify it
		 * */
		if (dict[key] === window.getComputedStyle(node).fontSize) {
			result = false;
		}
	});

	return result;
}

/**
 * Get all of the unique breakpoints used on the site
 */
function getBreakpoints() {
	try {
		let breaks = [];

		const sheets = [].slice.call(document.styleSheets);

		sheets.forEach((sheet) => {
			if (!sheet) {
				return;
			}

			[].slice.call(sheet.cssRules).forEach((rule) => {
				if (!rule.media) {
					return;
				}

				[].slice.call(rule.media).forEach((media) => breaks.push(media));
			});
		});

		/**
		 * Get pixel number strings from media queries and parse
		 * them into numbers. Filter the unique ones, order them,
		 * and then consolidate the ones within one pixel of each
		 * other.
		 */
		const pixels = breaks
			.join(' ')
			.match(/([0-9]+)/g)
			.map((string) => parseInt(string));

		const unqiueBreaks = [...new Set(pixels)];

		const sortedBreaks = unqiueBreaks.sort((a, b) => a - b);

		const filteredBreaks = sortedBreaks.filter(
			(num, i) => num !== sortedBreaks[i + 1] - 1
		);

		return filteredBreaks;
	} catch (err) {
		/**
		 * If sheets are hosted externally, we will have to catch a cors error
		 */
		console.error(err);
	}
}

run();