Clean UI tool for adjusting Gmail typography in real-time (font size, spacing, line height, etc.)
// ==UserScript==
// @name Gmail Typography
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Clean UI tool for adjusting Gmail typography in real-time (font size, spacing, line height, etc.)
// @author 6969RandomGuy6969
// @match *://mail.google.com/*
// @grant GM_registerMenuCommand
// @license MIT
// @icon https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://mail.google.com/mail/u/5/#inbox/FMfcgzQbgRjhGmklwlrrRlJgxzVTFRxB&size=256
// ==/UserScript==
(function () {
'use strict';
let panelVisible = false;
GM_registerMenuCommand("Config Menu", () => {
toggleControlPanel();
});
function toggleControlPanel() {
if (panelVisible) {
document.getElementById('typo-panel')?.remove();
panelVisible = false;
} else {
createControlPanel();
panelVisible = true;
}
}
function createControlPanel() {
const panel = document.createElement('div');
panel.id = 'typo-panel';
panel.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
font-family: "Segoe UI", sans-serif;
color: #333;
width: 280px;
`;
panel.innerHTML = `
<h3 style="margin-top:0; font-size:18px; color:#444;">🔧 Gmail Typography</h3>
<label style="display:block; margin-bottom:10px;">
Font Size (px)
<div style="display:flex; align-items:center; gap:8px;">
<input type="range" id="fontSize" min="10" max="72" value="16" style="flex:1;">
<input type="number" id="fontSizeVal" value="16" min="10" max="72" style="width:50px;">
</div>
</label>
<label style="display:block; margin-bottom:10px;">
Line Height
<div style="display:flex; align-items:center; gap:8px;">
<input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.5" style="flex:1;">
<input type="number" id="lineHeightVal" value="1.5" step="0.1" style="width:50px;">
</div>
</label>
<label style="display:block; margin-bottom:10px;">
Letter Spacing (px)
<div style="display:flex; align-items:center; gap:8px;">
<input type="range" id="letterSpacing" min="-2" max="10" step="0.1" value="0" style="flex:1;">
<input type="number" id="letterSpacingVal" value="0" step="0.1" style="width:50px;">
</div>
</label>
<label style="display:block; margin-bottom:10px;">
Font Family
<select id="fontFamily" style="width:100%; padding:4px;">
<option value="inherit">Inherit</option>
<option value="Arial" selected>Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Courier New">Courier New</option>
<option value="Comic Sans MS">Comic Sans</option>
</select>
</label>
<label style="display:block; margin-bottom:10px;">
Text Align
<select id="textAlign" style="width:100%; padding:4px;">
<option value="inherit">Inherit</option>
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
<div style="display:flex; justify-content:space-between; margin-top:15px;">
<button id="resetStyles" style="padding:6px 10px; font-size:13px;">Reset</button>
<button id="closePanel" style="padding:6px 10px; font-size:13px;">Close</button>
</div>
`;
document.body.appendChild(panel);
const fontSizeSlider = document.getElementById('fontSize');
const fontSizeBox = document.getElementById('fontSizeVal');
const lineHeightSlider = document.getElementById('lineHeight');
const lineHeightBox = document.getElementById('lineHeightVal');
const letterSpacingSlider = document.getElementById('letterSpacing');
const letterSpacingBox = document.getElementById('letterSpacingVal');
function syncAndUpdate(slider, box) {
slider.oninput = () => {
box.value = slider.value;
updateStyles();
};
box.oninput = () => {
slider.value = box.value;
updateStyles();
};
}
syncAndUpdate(fontSizeSlider, fontSizeBox);
syncAndUpdate(lineHeightSlider, lineHeightBox);
syncAndUpdate(letterSpacingSlider, letterSpacingBox);
document.getElementById('fontFamily').onchange = updateStyles;
document.getElementById('textAlign').onchange = updateStyles;
document.getElementById('resetStyles').onclick = () => {
fontSizeSlider.value = 16;
fontSizeBox.value = 16;
lineHeightSlider.value = 1.5;
lineHeightBox.value = 1.5;
letterSpacingSlider.value = 0;
letterSpacingBox.value = 0;
document.getElementById('fontFamily').value = 'Arial';
document.getElementById('textAlign').value = 'inherit';
updateStyles();
};
document.getElementById('closePanel').onclick = () => {
document.getElementById('typo-panel')?.remove();
panelVisible = false;
};
updateStyles(); // Apply immediately
}
function updateStyles() {
const fontSize = document.getElementById('fontSize')?.value + 'px';
const lineHeight = document.getElementById('lineHeight')?.value;
const letterSpacing = document.getElementById('letterSpacing')?.value + 'px';
const fontFamily = document.getElementById('fontFamily')?.value;
const textAlign = document.getElementById('textAlign')?.value;
const styleBlock = `
* {
font-size: ${fontSize} !important;
line-height: ${lineHeight} !important;
letter-spacing: ${letterSpacing} !important;
font-family: ${fontFamily} !important;
text-align: ${textAlign} !important;
}
`;
let styleTag = document.getElementById('typographyStyles');
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.id = 'typographyStyles';
document.head.appendChild(styleTag);
}
styleTag.innerHTML = styleBlock;
}
})();