{"id":193,"date":"2025-11-30T00:00:06","date_gmt":"2025-11-30T00:00:06","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=193"},"modified":"2025-12-14T09:24:41","modified_gmt":"2025-12-14T09:24:41","slug":"small-font-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/ja\/small-font-text-generator\/","title":{"rendered":"Small Font Text Generator &#8211; Generate Tiny Text Instantly"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<div class=\"sfg-app-root\">\r\n    <style>\r\n        \/* \r\n         * 2025 \"PRO DASHBOARD\" DESIGN SYSTEM (Expanded)\r\n         * Namespace: .sfg-\r\n         * Config: 1160px Max Width, 9px Radius, 50\/50 Split\r\n         *\/\r\n        :root {\r\n            \/* Background: Teal to Blue Gradient *\/\r\n            --sfg-bg-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);\r\n            \r\n            \/* Surfaces *\/\r\n            --sfg-panel-bg: rgba(255, 255, 255, 0.96);\r\n            --sfg-card-bg: #ffffff;\r\n            --sfg-input-bg: #f1f5f9;\r\n            --sfg-backdrop: blur(20px);\r\n            \r\n            \/* Colors *\/\r\n            --sfg-primary: #0891b2;\r\n            --sfg-accent: #2563eb;\r\n            --sfg-text-main: #0f172a;\r\n            --sfg-text-muted: #64748b;\r\n            --sfg-border: #e2e8f0;\r\n            \r\n            \/* Metrics (Fixed 9px) *\/\r\n            --sfg-radius: 9px;\r\n            --sfg-shadow-hero: 0 40px 60px -12px rgba(0, 0, 0, 0.25);\r\n            --sfg-shadow-card: 0 2px 4px -1px rgba(0,0,0,0.06);\r\n            --sfg-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1);\r\n            \r\n            --sfg-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        \/* RESET *\/\r\n        .sfg-app-root {\r\n            font-family: var(--sfg-font);\r\n            background: var(--sfg-bg-gradient);\r\n            min-height: 100vh;\r\n            width: 100%;\r\n            padding: 40px 15px 80px 15px;\r\n            box-sizing: border-box;\r\n            color: var(--sfg-text-main);\r\n            -webkit-font-smoothing: antialiased;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .sfg-app-root *, .sfg-app-root *::before, .sfg-app-root *::after {\r\n            box-sizing: inherit;\r\n        }\r\n\r\n        .sfg-container {\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            .sfg-container { max-width: 1160px; }\r\n        }\r\n\r\n        \/* HEADER *\/\r\n        .sfg-header {\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .sfg-title {\r\n\t\t\t\t\t  color: #fff;\r\n            font-size: 32px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n            text-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        .sfg-desc {\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            opacity: 0.95;\r\n        }\r\n\r\n        \/* WRAPPER (1160px, 9px Radius) *\/\r\n        .sfg-wrapper {\r\n            background: var(--sfg-panel-bg);\r\n            backdrop-filter: var(--sfg-backdrop);\r\n            -webkit-backdrop-filter: var(--sfg-backdrop);\r\n            border-radius: var(--sfg-radius);\r\n            box-shadow: var(--sfg-shadow-hero);\r\n            border: 1px solid rgba(255,255,255,0.6);\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        \/* Desktop: 50\/50 Split *\/\r\n        @media (min-width: 900px) {\r\n            .sfg-wrapper {\r\n                flex-direction: row;\r\n                height: 700px; \/* Fixed height for dashboard feel *\/\r\n            }\r\n        }\r\n\r\n        \/* LEFT: INPUT *\/\r\n        .sfg-left-panel {\r\n            padding: 24px;\r\n            background: rgba(255,255,255,0.5);\r\n            display: flex;\r\n            flex-direction: column;\r\n            border-bottom: 1px solid var(--sfg-border);\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .sfg-left-panel {\r\n                width: 50%;\r\n                border-bottom: none;\r\n                border-right: 1px solid var(--sfg-border);\r\n            }\r\n        }\r\n\r\n        .sfg-panel-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .sfg-label {\r\n            font-size: 12px;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            color: var(--sfg-text-muted);\r\n        }\r\n\r\n        .sfg-textarea {\r\n            width: 100%;\r\n            flex-grow: 1;\r\n            min-height: 200px;\r\n            padding: 20px;\r\n            font-size: 22px;\r\n            font-family: var(--sfg-font);\r\n            color: var(--sfg-text-main);\r\n            border: 2px solid transparent;\r\n            border-radius: var(--sfg-radius);\r\n            background: var(--sfg-input-bg);\r\n            resize: none;\r\n            outline: none;\r\n            transition: all 0.2s;\r\n        }\r\n\r\n        .sfg-textarea:focus {\r\n            background: #ffffff;\r\n            border-color: var(--sfg-primary);\r\n            box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);\r\n        }\r\n\r\n        .sfg-controls {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-top: 12px;\r\n        }\r\n\r\n        .sfg-badge {\r\n            font-size: 11px;\r\n            font-weight: 700;\r\n            background: rgba(0,0,0,0.06);\r\n            padding: 4px 10px;\r\n            border-radius: var(--sfg-radius);\r\n            color: var(--sfg-text-muted);\r\n        }\r\n\r\n        .sfg-clear {\r\n            font-size: 11px;\r\n            font-weight: 700;\r\n            color: var(--sfg-text-muted);\r\n            background: none;\r\n            border: none;\r\n            cursor: pointer;\r\n            transition: color 0.2s;\r\n            text-transform: uppercase;\r\n        }\r\n        .sfg-clear:hover { color: #ef4444; }\r\n\r\n        \/* RIGHT: LIST (Scrollable) *\/\r\n        .sfg-right-panel {\r\n            padding: 24px;\r\n            background: rgba(255,255,255,0.3);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 12px;\r\n            overflow-y: auto;\r\n            \/* Scrollbar *\/\r\n            scrollbar-width: thin;\r\n            scrollbar-color: #cbd5e1 transparent;\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .sfg-right-panel { width: 50%; }\r\n            .sfg-right-panel::-webkit-scrollbar { width: 6px; }\r\n            .sfg-right-panel::-webkit-scrollbar-track { background: transparent; }\r\n            .sfg-right-panel::-webkit-scrollbar-thumb {\r\n                background-color: #cbd5e1;\r\n                border-radius: 9px;\r\n            }\r\n        }\r\n\r\n        \/* CARD *\/\r\n        .sfg-card {\r\n            background: var(--sfg-card-bg);\r\n            border-radius: var(--sfg-radius);\r\n            padding: 16px;\r\n            border: 1px solid var(--sfg-border);\r\n            display: flex;\r\n            flex-direction: column;\r\n            cursor: pointer;\r\n            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;\r\n            position: relative;\r\n        }\r\n\r\n        .sfg-card:hover {\r\n            transform: translateY(-2px);\r\n            border-color: var(--sfg-primary);\r\n            box-shadow: var(--sfg-shadow-hover);\r\n            z-index: 2;\r\n        }\r\n\r\n        .sfg-card-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 6px;\r\n            padding-bottom: 6px;\r\n            border-bottom: 1px solid #f1f5f9;\r\n        }\r\n\r\n        .sfg-card-title {\r\n            font-size: 10px;\r\n            text-transform: uppercase;\r\n            font-weight: 800;\r\n            color: var(--sfg-primary);\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .sfg-copy-icon {\r\n            width: 18px;\r\n            height: 18px;\r\n            color: var(--sfg-text-muted);\r\n            opacity: 0.5;\r\n            transition: 0.2s;\r\n        }\r\n        .sfg-card:hover .sfg-copy-icon { opacity: 1; color: var(--sfg-primary); }\r\n\r\n        .sfg-result {\r\n            font-size: 16px;\r\n            color: var(--sfg-text-main);\r\n            word-wrap: break-word;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        .sfg-card.placeholder { opacity: 0.7; pointer-events: none; }\r\n\r\n        \/* TOAST *\/\r\n        .sfg-toast {\r\n            position: fixed;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(100px);\r\n            background: #1e293b;\r\n            color: white;\r\n            padding: 12px 28px;\r\n            border-radius: 50px;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            opacity: 0;\r\n            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;\r\n            z-index: 1000;\r\n            box-shadow: 0 10px 25px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .sfg-toast.show {\r\n            transform: translateX(-50%) translateY(0);\r\n            opacity: 1;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"sfg-container\">\r\n        \r\n        <header class=\"sfg-header\">\r\n            <h1 class=\"sfg-title\">Small Font Text Generator - Generate Tiny Text Instantly<\/h1>\r\n            <p class=\"sfg-desc\">Generate tiny, superscript, and aesthetic fonts instantly.<\/p>\r\n        <\/header>\r\n\r\n        <div class=\"sfg-wrapper\">\r\n            \r\n            <!-- Left: Input Area -->\r\n            <div class=\"sfg-left-panel\">\r\n                <div class=\"sfg-panel-header\">\r\n                    <span class=\"sfg-label\">Input Text<\/span>\r\n                    <button id=\"sfgClear\" class=\"sfg-clear\">Clear<\/button>\r\n                <\/div>\r\n                <textarea id=\"sfgInput\" class=\"sfg-textarea\" placeholder=\"Type here to preview all styles...\"><\/textarea>\r\n                <div class=\"sfg-controls\">\r\n                    <span id=\"sfgCount\" class=\"sfg-badge\">0 CHARS<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: List Area -->\r\n            <div class=\"sfg-right-panel\" id=\"sfgList\">\r\n                <!-- Javascript will populate 30+ items here -->\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Toast Notification -->\r\n    <div id=\"sfgToast\" class=\"sfg-toast\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n        <span>Copied to clipboard!<\/span>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \/* \r\n             * MAPPINGS \r\n             *\/\r\n            const chars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n\r\n            const styles = [\r\n                { name: \"Small Caps\", map: \"\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d220123456789\" },\r\n                { name: \"Superscript (Tiny)\", map: \"\u1d43\u1d47\u1d9c\u1d48\u1d49\u1da0\u1d4d\u02b0\u1da6\u02b2\u1d4f\u02e1\u1d50\u207f\u1d52\u1d56\u1d60\u02b3\u02e2\u1d57\u1d58\u1d5b\u02b7\u02e3\u02b8\u1dbb\u1d2c\u1d2e\u1d9c\u1d30\u1d31\u1da0\u1d33\u1d34\u1d35\u1d36\u1d37\u1d38\u1d39\u1d3a\u1d3c\u1d3e\u1d60\u1d3f\u02e2\u1d40\u1d41\u2c7d\u1d42\u02e3\u02b8\u1dbb\u2070\u00b9\u00b2\u00b3\u2074\u2075\u2076\u2077\u2078\u2079\" },\r\n                { name: \"Subscript (Low)\", map: \"\u2090bcd\u2091fg\u2095\u1d62\u2c7c\u2096\u2097\u2098\u2099\u2092\u209aq\u1d63\u209b\u209c\u1d64\u1d65wxyzABCD\u2091FG\u2095\u1d62\u2c7c\u2096\u2097\u2098\u2099\u2092\u209aQ\u1d63\u209b\u209c\u1d64\u1d65WXYZ\u2080\u2081\u2082\u2083\u2084\u2085\u2086\u2087\u2088\u2089\" },\r\n                { name: \"Inverted (Upside Down)\", map: \"z\u028ex\u028d\u028cn\u0287s\u0279bdou\u026fl\u029e\u027e\u0131\u0265\u0183\u025f\u01ddp\u0254q\u0250z\u028ex\u028d\u028cn\u0287s\u0279bdou\u026fl\u029e\u027e\u0131\u0265\u0183\u025f\u01ddp\u0254q\u02506829s8\u0190\u161410\", isReverse: true },\r\n                { name: \"Monospace (Thin)\", map: \"\ud835\ude8a\ud835\ude8b\ud835\ude8c\ud835\ude8d\ud835\ude8e\ud835\ude8f\ud835\ude90\ud835\ude91\ud835\ude92\ud835\ude93\ud835\ude94\ud835\ude95\ud835\ude96\ud835\ude97\ud835\ude98\ud835\ude99\ud835\ude9a\ud835\ude9b\ud835\ude9c\ud835\ude9d\ud835\ude9e\ud835\ude9f\ud835\udea0\ud835\udea1\ud835\udea2\ud835\udea3\ud835\ude70\ud835\ude71\ud835\ude72\ud835\ude73\ud835\ude74\ud835\ude75\ud835\ude76\ud835\ude77\ud835\ude78\ud835\ude79\ud835\ude7a\ud835\ude7b\ud835\ude7c\ud835\ude7d\ud835\ude7e\ud835\ude7f\ud835\ude80\ud835\ude81\ud835\ude82\ud835\ude83\ud835\ude84\ud835\ude85\ud835\ude86\ud835\ude87\ud835\ude88\ud835\ude89\ud835\udff6\ud835\udff7\ud835\udff8\ud835\udff9\ud835\udffa\ud835\udffb\ud835\udffc\ud835\udffd\ud835\udffe\ud835\udfff\" },\r\n                { name: \"Script (Compact)\", map: \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\ud835\udc9c\ud835\udc35\ud835\udc9e\ud835\udc9f\ud835\udc38\ud835\udc39\ud835\udca2\ud835\udc3b\ud835\udc3c\ud835\udca5\ud835\udca6\ud835\udc3f\ud835\udc40\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\ud835\udc45\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb50123456789\" },\r\n                { name: \"Bold Script\", map: \"\ud835\udcea\ud835\udceb\ud835\udcec\ud835\udced\ud835\udcee\ud835\udcef\ud835\udcf0\ud835\udcf1\ud835\udcf2\ud835\udcf3\ud835\udcf4\ud835\udcf5\ud835\udcf6\ud835\udcf7\ud835\udcf8\ud835\udcf9\ud835\udcfa\ud835\udcfb\ud835\udcfc\ud835\udcfd\ud835\udcfe\ud835\udcff\ud835\udd00\ud835\udd01\ud835\udd02\ud835\udd03\ud835\udcd0\ud835\udcd1\ud835\udcd2\ud835\udcd3\ud835\udcd4\ud835\udcd5\ud835\udcd6\ud835\udcd7\ud835\udcd8\ud835\udcd9\ud835\udcda\ud835\udcdb\ud835\udcdc\ud835\udcdd\ud835\udcde\ud835\udcdf\ud835\udce0\ud835\udce1\ud835\udce2\ud835\udce3\ud835\udce4\ud835\udce5\ud835\udce6\ud835\udce7\ud835\udce8\ud835\udce90123456789\" },\r\n                { name: \"Fraktur\", map: \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u21280123456789\" },\r\n                { name: \"Double Struck\", map: \"\ud835\udd52\ud835\udd53\ud835\udd54\ud835\udd55\ud835\udd56\ud835\udd57\ud835\udd58\ud835\udd59\ud835\udd5a\ud835\udd5b\ud835\udd5c\ud835\udd5d\ud835\udd5e\ud835\udd5f\ud835\udd60\ud835\udd61\ud835\udd62\ud835\udd63\ud835\udd64\ud835\udd65\ud835\udd66\ud835\udd67\ud835\udd68\ud835\udd69\ud835\udd6a\ud835\udd6b\ud835\udd38\ud835\udd39\u2102\ud835\udd3b\ud835\udd3c\ud835\udd3d\ud835\udd3e\u210d\ud835\udd40\ud835\udd41\ud835\udd42\ud835\udd43\ud835\udd44\u2115\ud835\udd46\u2119\u211a\u211d\ud835\udd4a\ud835\udd4b\ud835\udd4c\ud835\udd4d\ud835\udd4e\ud835\udd4f\ud835\udd50\u2124\ud835\udfd8\ud835\udfd9\ud835\udfda\ud835\udfdb\ud835\udfdc\ud835\udfdd\ud835\udfde\ud835\udfdf\ud835\udfe0\ud835\udfd7\" },\r\n                { name: \"Bubbles (White)\", map: \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf0\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\" },\r\n                { name: \"Bubbles (Black)\", map: \"\ud83c\udd50\ud835\udc69\ud835\udd6e\ud835\udd07\ud83c\udd54\ud835\udd09\ud835\udd0a\ud835\udd0b\ud83c\udd58\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udcde\ud835\udd13\ud835\udd14\ud835\udd15\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\ud835\udd1d\ud83c\udd50\ud835\udd1f\ud835\udd20\ud835\udd21\ud83c\udd54\ud835\udd23\ud835\udd24\ud835\udd25\ud83c\udd58\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udcde\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e\" },\r\n                { name: \"Squares (White)\", map: \"\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83f\udf12\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd49\ud83c\udd49\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd49\ud83c\udd490123456789\" },\r\n                { name: \"Parenthesized\", map: \"\u249c\u249d\u249e\u249f\u24a0\u24a1\u24a2\u24a3\u24a4\u24a5\u24a6\u24a7\u24a8\u24a9\u24aa\u24ab\u24ac\u24ad\u24ae\u24af\u24b0\u24b1\u24b2\u24b3\u24b4\u24b5\u249c\u249d\u249e\u249f\u24a0\u24a1\u24a2\u24a3\u24a4\u24a5\u24a6\u24a7\u24a8\u24a9\u24aa\u24ab\u24ac\u24ad\u24ae\u24af\u24b0\u24b1\u24b2\u24b3\u24b4\u24b50\u2474\u2475\u2476\u2477\u2478\u2479\u247a\u247b\u247c\" },\r\n                { name: \"Mirrored\", map: \"\u0250q\u0254p\u01dd\u025f\u0183\u0265\u0131\u027e\u029el\u026fuodb\u0279s\u0287n\u028c\u028dx\u028ez\u2c6f\u15fa\u0186\u15e1\u018e\u2132\u2141HI\u10b1\u22ca\u2142WNO\u0500\u00d2\u1d1aS\u22a5\u2229\u039bMX\u2144Z0\u0196\u1105\u0190\u3123\u03db9\u312586\", isReverse: true },\r\n                { name: \"Sans Serif Bold\", map: \"\ud835\uddee\ud835\uddef\ud835\uddf0\ud835\uddf1\ud835\uddf2\ud835\uddf3\ud835\uddf4\ud835\uddf5\ud835\uddf6\ud835\uddf7\ud835\uddf8\ud835\uddf9\ud835\uddfa\ud835\uddfb\ud835\uddfc\ud835\uddfd\ud835\uddfe\ud835\uddff\ud835\ude00\ud835\ude01\ud835\ude02\ud835\ude03\ud835\ude04\ud835\ude05\ud835\ude06\ud835\ude07\ud835\uddd4\ud835\uddd5\ud835\uddd6\ud835\uddd7\ud835\uddd8\ud835\uddd9\ud835\uddda\ud835\udddb\ud835\udddc\ud835\udddd\ud835\uddde\ud835\udddf\ud835\udde0\ud835\udde1\ud835\udde2\ud835\udde3\ud835\udde4\ud835\udde5\ud835\udde6\ud835\udde7\ud835\udde8\ud835\udde9\ud835\uddea\ud835\uddeb\ud835\uddec\ud835\udded\ud835\udfec\ud835\udfed\ud835\udfee\ud835\udfef\ud835\udff0\ud835\udff1\ud835\udff2\ud835\udff3\ud835\udff4\ud835\udff5\" },\r\n                { name: \"Sans Serif Italic\", map: \"\ud835\ude22\ud835\ude23\ud835\ude24\ud835\ude25\ud835\ude26\ud835\ude27\ud835\ude28\ud835\ude29\ud835\ude2a\ud835\ude2b\ud835\ude2c\ud835\ude2d\ud835\ude2e\ud835\ude2f\ud835\ude30\ud835\ude31\ud835\ude32\ud835\ude33\ud835\ude34\ud835\ude35\ud835\ude36\ud835\ude37\ud835\ude38\ud835\ude39\ud835\ude3a\ud835\ude3b\ud835\ude08\ud835\ude09\ud835\ude0a\ud835\ude0b\ud835\ude0c\ud835\ude0d\ud835\ude0e\ud835\ude0f\ud835\ude10\ud835\ude11\ud835\ude12\ud835\ude13\ud835\ude14\ud835\ude15\ud835\ude16\ud835\ude17\ud835\ude18\ud835\ude19\ud835\ude1a\ud835\ude1b\ud835\ude1c\ud835\ude1d\ud835\ude1e\ud835\ude1f\ud835\ude20\ud835\ude210123456789\" },\r\n                { name: \"Bold Fraktur\", map: \"\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\ud835\udd6c\ud835\udd6d\ud835\udd6e\ud835\udd6f\ud835\udd70\ud835\udd71\ud835\udd72\ud835\udd73\ud835\udd74\ud835\udd75\ud835\udd76\ud835\udd77\ud835\udd78\ud835\udd79\ud835\udd7a\ud835\udd7b\ud835\udd7c\ud835\udd7d\ud835\udd7e\ud835\udd7f\ud835\udd80\ud835\udd81\ud835\udd82\ud835\udd83\ud835\udd84\ud835\udd850123456789\" },\r\n                { name: \"Single Underline\", map: \"\", diacritic: '\\u0332' },\r\n                { name: \"Double Underline\", map: \"\", diacritic: '\\u0333' },\r\n                { name: \"Strikethrough\", map: \"\", diacritic: '\\u0336' },\r\n                { name: \"Slash Through\", map: \"\", diacritic: '\\u0338' },\r\n                { name: \"Dotted Underline\", map: \"\", diacritic: '\\u0323' },\r\n                { name: \"Arrows Below\", map: \"\", diacritic: '\\u034D' },\r\n                { name: \"Tilde Overlay\", map: \"\", diacritic: '\\u0334' },\r\n                { name: \"Cloudy\", map: \"\", diacritic: '\\u0489' },\r\n                { name: \"Boxed Text\", map: \"\", diacritic: '\\u0350' }, \/\/ Approximation via arrow header\r\n                { name: \"Serif Bold\", map: \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\" },\r\n                { name: \"Italic\", map: \"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d0123456789\" },\r\n                { name: \"Bold Italic\", map: \"\ud835\udc82\ud835\udc83\ud835\udc84\ud835\udc85\ud835\udc86\ud835\udc87\ud835\udc88\ud835\udc89\ud835\udc8a\ud835\udc8b\ud835\udc8c\ud835\udc8d\ud835\udc8e\ud835\udc8f\ud835\udc90\ud835\udc91\ud835\udc92\ud835\udc93\ud835\udc94\ud835\udc95\ud835\udc96\ud835\udc97\ud835\udc98\ud835\udc99\ud835\udc9a\ud835\udc9b\ud835\udc68\ud835\udc69\ud835\udc6a\ud835\udc6b\ud835\udc6c\ud835\udc6d\ud835\udc6e\ud835\udc6f\ud835\udc70\ud835\udc71\ud835\udc72\ud835\udc73\ud835\udc74\ud835\udc75\ud835\udc76\ud835\udc77\ud835\udc78\ud835\udc79\ud835\udc7a\ud835\udc7b\ud835\udc7c\ud835\udc7d\ud835\udc7e\ud835\udc7f\ud835\udc80\ud835\udc810123456789\" },\r\n                { name: \"Rusify\", map: \"\u0414\u0411CD\u039eFGHIJ\u041aL\u043c\u0438\u0424PQ\u042fS\u0442UVWXYZ\u0430\u044ccd\u0451fghi\u0458\u043al\u043c\u0438\u043e\u0440q\u0433s\u0442\u0446v\u0448x\u0443z0123456789\" }\r\n            ];\r\n\r\n            const dom = {\r\n                in: document.getElementById('sfgInput'),\r\n                list: document.getElementById('sfgList'),\r\n                clear: document.getElementById('sfgClear'),\r\n                count: document.getElementById('sfgCount'),\r\n                toast: document.getElementById('sfgToast')\r\n            };\r\n\r\n            const placeholder = \"Preview Text\";\r\n\r\n            \/\/ Converter Logic\r\n            function convert(text, map, isReverse, diacritic) {\r\n                \/\/ Diacritic Mode\r\n                if(diacritic) {\r\n                    return text.split('').map(c => c + diacritic).join('');\r\n                }\r\n\r\n                \/\/ Map Mode\r\n                if(isReverse) {\r\n                    return text.split('').map(char => {\r\n                        const idx = chars.indexOf(char);\r\n                        return idx > -1 ? Array.from(map)[idx] : char;\r\n                    }).reverse().join('');\r\n                }\r\n                \r\n                const mapArr = Array.from(map);\r\n                return text.split('').map(char => {\r\n                    const idx = chars.indexOf(char);\r\n                    return idx > -1 ? (mapArr[idx] || char) : char;\r\n                }).join('');\r\n            }\r\n\r\n            \/\/ Renderer\r\n            function render() {\r\n                const val = dom.in.value;\r\n                dom.count.textContent = `${val.length} CHARS`;\r\n                \r\n                dom.list.innerHTML = '';\r\n                const display = val || placeholder;\r\n                const isPlaceholder = !val;\r\n\r\n                styles.forEach(s => {\r\n                    \/\/ Decide transformation type based on object props\r\n                    const result = convert(display, s.map, s.isReverse, s.diacritic);\r\n                    \r\n                    const card = document.createElement('div');\r\n                    card.className = `sfg-card ${isPlaceholder ? 'placeholder' : ''}`;\r\n                    \r\n                    card.innerHTML = `\r\n                        <div class=\"sfg-card-header\">\r\n                            <span class=\"sfg-card-title\">${s.name}<\/span>\r\n                            <div class=\"sfg-copy-icon\">\r\n                                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"sfg-result ${s.cls || ''}\">${result}<\/div>\r\n                    `;\r\n\r\n                    if(!isPlaceholder) card.onclick = () => doCopy(result);\r\n\r\n                    dom.list.appendChild(card);\r\n                });\r\n            }\r\n\r\n            \/\/ Copy\r\n            async function doCopy(str) {\r\n                try {\r\n                    await navigator.clipboard.writeText(str);\r\n                } catch(e) {\r\n                    const t = document.createElement('textarea');\r\n                    t.value = str;\r\n                    document.body.appendChild(t);\r\n                    t.select();\r\n                    document.execCommand('copy');\r\n                    document.body.removeChild(t);\r\n                }\r\n                showToast();\r\n            }\r\n\r\n            let tTimer;\r\n            function showToast() {\r\n                dom.toast.classList.add('show');\r\n                clearTimeout(tTimer);\r\n                tTimer = setTimeout(() => dom.toast.classList.remove('show'), 2000);\r\n            }\r\n\r\n            \/\/ Listeners\r\n            dom.in.addEventListener('input', render);\r\n            dom.clear.addEventListener('click', () => {\r\n                dom.in.value = '';\r\n                render();\r\n                dom.in.focus();\r\n            });\r\n\r\n            \/\/ Init\r\n            render();\r\n\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n<!-- \r\n============================================\r\nSUPPORTIVE SEO CONTENT STARTS HERE\r\n============================================\r\n- Keyword: \"Small Text Generator\"\r\n- Place this entire block after the \"sfg-app-root\" div.\r\n- Uses separate 'sfg-info-*' classes to avoid any conflicts.\r\n- Perfectly matches the provided tool's \"Compact Premium\" aesthetic with alternating backgrounds.\r\n-->\r\n<div class=\"sfg-info-main-wrapper\">\r\n\r\n    <!-- CSS STYLES FOR SUPPORTIVE CONTENT -->\r\n    <style>\r\n        .sfg-info-main-wrapper {\r\n            width: 100%;\r\n            font-family: var(--sfg-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\r\n            color: var(--sfg-text-main, #0f172a);\r\n        }\r\n\r\n        .sfg-info-section-wrapper {\r\n            width: 100%;\r\n            padding: 60px 15px;\r\n        }\r\n\r\n        .sfg-info-section-wrapper.bg-gradient {\r\n            background: var(--sfg-bg-gradient, linear-gradient(135deg, #7185ec, #8257aa));\r\n        }\r\n        \r\n        .sfg-info-section-wrapper.bg-white {\r\n            background: var(--sfg-white, #ffffff);\r\n        }\r\n\r\n        .sfg-info-container {\r\n            width: 100%;\r\n            max-width: 1160px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .sfg-info-section-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n        \r\n        .sfg-info-section-title {\r\n            font-size: 28px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n        }\r\n        \r\n        \/* Different title colors for different backgrounds *\/\r\n        .bg-gradient .sfg-info-section-title {\r\n            color: #ffffff;\r\n            text-shadow: 0 2px 8px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .bg-white .sfg-info-section-title {\r\n            color: var(--sfg-text-main, #0f172a);\r\n        }\r\n        \r\n        .sfg-info-section-subtitle {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .bg-gradient .sfg-info-section-subtitle {\r\n            color: rgba(255, 255, 255, 0.9);\r\n        }\r\n        \r\n        .bg-white .sfg-info-section-subtitle {\r\n            color: var(--sfg-text-sub, #64748b);\r\n        }\r\n\r\n        .sfg-info-card-layout {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 20px;\r\n        }\r\n        \r\n        .sfg-info-card {\r\n            \/* Replicating the tool's card style *\/\r\n            background: var(--sfg-white, #ffffff);\r\n            border: 1px solid var(--sfg-border, #e2e8f0);\r\n            border-radius: var(--sfg-radius-pill, 12px);\r\n            padding: 25px;\r\n            box-shadow: var(--sfg-shadow-item, 0 4px 6px -1px rgba(0, 0, 0, 0.05));\r\n            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;\r\n            text-align: left;\r\n        }\r\n        \r\n        .sfg-info-card:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 12px rgba(0,0,0,0.07);\r\n            border-color: var(--sfg-primary, #7185ec);\r\n        }\r\n\r\n        .sfg-info-card-title {\r\n            font-size: 1.25rem;\r\n            font-weight: 700;\r\n            color: var(--sfg-text-main, #0f172a);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .sfg-info-card p, .sfg-info-card li {\r\n            font-size: 1rem; \r\n            line-height: 1.7;\r\n            color: var(--sfg-text-sub, #64748b);\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .sfg-info-card ul {\r\n            list-style: none;\r\n            padding-left: 0;\r\n        }\r\n        \r\n        .sfg-info-card li {\r\n            padding-left: 25px;\r\n            position: relative;\r\n        }\r\n        \r\n        .sfg-info-card li::before {\r\n            content: '\u2713';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 6px;\r\n            color: var(--sfg-primary, #7185ec);\r\n            font-weight: bold;\r\n        }\r\n\r\n        .sfg-info-card strong {\r\n            color: var(--sfg-text-main, #0f172a);\r\n            font-weight: 600;\r\n        }\r\n    <\/style>\r\n\t    <div class=\"sfg-info-section-wrapper bg-white\">\r\n        <div class=\"sfg-info-container\">\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t    <\/div>\r\n    <!-- ========= SECTION 1: What is a Small Text Generator? ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-white\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">What is a Small Text Generator?<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">Learn how to create tiny, superscript, and other compact text styles that you can copy and paste anywhere online.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Beyond Standard Fonts<\/h3>\r\n                    <p>A <strong>Small Text Generator<\/strong> is a versatile tool that converts your regular text into various miniature styles using <strong>Unicode characters<\/strong>. While it might look like you're changing the font size, you're actually using special symbols that are smaller by design. This is the secret that allows the \"small text\" to be copied and pasted across different platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">The Power of Unicode<\/h3>\r\n                    <p>The \"fonts\" created here aren't traditional fonts; they are sets of Unicode symbols. Unicode is a universal standard for characters, and it includes several sets of small letters, like those for mathematical notations. Because most modern devices and websites support Unicode, you can paste this text on Instagram, X (Twitter), Discord, and more, and the style will be preserved.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 2: A Universe of Small Styles ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-gradient\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">A Universe of Small Styles<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">Our generator offers a curated selection of the most popular and useful small text fonts.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Superscript (Tiny Text)<\/h3>\r\n                    <p>This is the classic \"tiny text\" style. It uses superscript characters to create text that appears raised and very small, perfect for adding subtle notes or a unique aesthetic to your text. <strong>Example: \u1d57\u02b0\u1da6\u02e2 \u1da6\u02e2 \u1d57\u1da6\u207f\u02b8 \u02e2\u1d58\u1d56\u1d49\u02b3\u02e2\u1d9c\u02b3\u1da6\u1d56\u1d57 \u1d57\u1d49\u02e3\u1d57.<\/strong><\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Subscript (Low Text)<\/h3>\r\n                    <p>Subscript characters are the opposite of superscript. They create text that is small and appears lower than the standard baseline. This is often used for chemical formulas or a unique stylistic effect. <strong>Example: \u209c\u2095\u1d62\u209b \u1d62\u209b \u2097\u2092w \u209b\u1d64\u2086\u209bc\u1d63\u1d62\u209a\u209c \u209c\u2091\u2093\u209c.<\/strong><\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Small Caps<\/h3>\r\n                    <p>Small caps are a sophisticated typographic style where lowercase letters are replaced by smaller versions of capital letters. It's a great way to add emphasis without the harshness of all caps. <strong>Example: T\u029c\u026as \u026as s\u1d0d\u1d00\u029f\u029f \u1d04\u1d00\u1d18s \u1d1b\u1d07x\u1d1b.<\/strong><\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 3: Where to Use Small Text ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-white\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">Where to Use Your Small Text<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">Elevate your digital presence by using these unique copy-and-paste styles on your favorite platforms.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Social Media Profiles<\/h3>\r\n                    <p>Make your profile stand out and add a touch of personality.<\/p>\r\n                    <ul>\r\n                        <li><strong>Instagram & TikTok Bios:<\/strong> Use tiny text to add a tagline, a quote, or descriptive text under your main name.<\/li>\r\n                        <li><strong>Twitter\/X Display Names:<\/strong> Create a unique handle that takes up less visual space.<\/li>\r\n                        <li><strong>Facebook Posts:<\/strong> Use small caps for elegant headers or tiny text for footnotes in your posts.<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Messaging and Usernames<\/h3>\r\n                    <p>Add a subtle and creative flair to your communications and online identity.<\/p>\r\n                    <ul>\r\n                        <li><strong>Discord & Slack:<\/strong> Use small text in your username or status to create a unique look.<\/li>\r\n                        <li><strong>WhatsApp & Telegram:<\/strong> Send messages with tiny text to add a playful or secretive tone.<\/li>\r\n                        <li><strong>Unique Usernames:<\/strong> Craft a compact and stylish username for social media or gaming platforms.<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 4: SEO & Accessibility Warning ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-gradient\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">An Important Note on SEO & Accessibility<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">While small text is great for social media, it should NOT be used on your website for important content.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">The SEO Problem<\/h3>\r\n                    <p>Search engines like Google may not properly recognize these special Unicode characters as standard letters. Using \u02e2\u1d50\u1d43\u02e1\u02e1 \u1d57\u1d49\u02e3\u1d57 for your website's headings or important keywords will likely make that text invisible to search engines, which can severely damage your page ranking. For websites, always use standard text and control the size with CSS.<\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">The Accessibility Problem<\/h3>\r\n                    <p>Screen readers, the software used by visually impaired individuals, often struggle to read these special characters. They may read them out letter by letter or as confusing symbol names, making your content inaccessible. Always prioritize standard, readable text for important information to ensure everyone can access it.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n<!-- SUPPORTIVE SEO CONTENT ENDS HERE -->[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"sfg-app-root\">\r\n    <style>\r\n        \/* \r\n         * 2025 \"PRO DASHBOARD\" DESIGN SYSTEM (Expanded)\r\n         * Namespace: .sfg-\r\n         * Config: 1160px Max Width, 9px Radius, 50\/50 Split\r\n         *\/\r\n        :root {\r\n            \/* Background: Teal to Blue Gradient *\/\r\n            --sfg-bg-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);\r\n            \r\n            \/* Surfaces *\/\r\n            --sfg-panel-bg: rgba(255, 255, 255, 0.96);\r\n            --sfg-card-bg: #ffffff;\r\n            --sfg-input-bg: #f1f5f9;\r\n            --sfg-backdrop: blur(20px);\r\n            \r\n            \/* Colors *\/\r\n            --sfg-primary: #0891b2;\r\n            --sfg-accent: #2563eb;\r\n            --sfg-text-main: #0f172a;\r\n            --sfg-text-muted: #64748b;\r\n            --sfg-border: #e2e8f0;\r\n            \r\n            \/* Metrics (Fixed 9px) *\/\r\n            --sfg-radius: 9px;\r\n            --sfg-shadow-hero: 0 40px 60px -12px rgba(0, 0, 0, 0.25);\r\n            --sfg-shadow-card: 0 2px 4px -1px rgba(0,0,0,0.06);\r\n            --sfg-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1);\r\n            \r\n            --sfg-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        \/* RESET *\/\r\n        .sfg-app-root {\r\n            font-family: var(--sfg-font);\r\n            background: var(--sfg-bg-gradient);\r\n            min-height: 100vh;\r\n            width: 100%;\r\n            padding: 40px 15px 80px 15px;\r\n            box-sizing: border-box;\r\n            color: var(--sfg-text-main);\r\n            -webkit-font-smoothing: antialiased;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .sfg-app-root *, .sfg-app-root *::before, .sfg-app-root *::after {\r\n            box-sizing: inherit;\r\n        }\r\n\r\n        .sfg-container {\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            .sfg-container { max-width: 1160px; }\r\n        }\r\n\r\n        \/* HEADER *\/\r\n        .sfg-header {\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .sfg-title {\r\n\t\t\t\t\t  color: #fff;\r\n            font-size: 32px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n            text-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        .sfg-desc {\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            opacity: 0.95;\r\n        }\r\n\r\n        \/* WRAPPER (1160px, 9px Radius) *\/\r\n        .sfg-wrapper {\r\n            background: var(--sfg-panel-bg);\r\n            backdrop-filter: var(--sfg-backdrop);\r\n            -webkit-backdrop-filter: var(--sfg-backdrop);\r\n            border-radius: var(--sfg-radius);\r\n            box-shadow: var(--sfg-shadow-hero);\r\n            border: 1px solid rgba(255,255,255,0.6);\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        \/* Desktop: 50\/50 Split *\/\r\n        @media (min-width: 900px) {\r\n            .sfg-wrapper {\r\n                flex-direction: row;\r\n                height: 700px; \/* Fixed height for dashboard feel *\/\r\n            }\r\n        }\r\n\r\n        \/* LEFT: INPUT *\/\r\n        .sfg-left-panel {\r\n            padding: 24px;\r\n            background: rgba(255,255,255,0.5);\r\n            display: flex;\r\n            flex-direction: column;\r\n            border-bottom: 1px solid var(--sfg-border);\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .sfg-left-panel {\r\n                width: 50%;\r\n                border-bottom: none;\r\n                border-right: 1px solid var(--sfg-border);\r\n            }\r\n        }\r\n\r\n        .sfg-panel-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .sfg-label {\r\n            font-size: 12px;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            color: var(--sfg-text-muted);\r\n        }\r\n\r\n        .sfg-textarea {\r\n            width: 100%;\r\n            flex-grow: 1;\r\n            min-height: 200px;\r\n            padding: 20px;\r\n            font-size: 22px;\r\n            font-family: var(--sfg-font);\r\n            color: var(--sfg-text-main);\r\n            border: 2px solid transparent;\r\n            border-radius: var(--sfg-radius);\r\n            background: var(--sfg-input-bg);\r\n            resize: none;\r\n            outline: none;\r\n            transition: all 0.2s;\r\n        }\r\n\r\n        .sfg-textarea:focus {\r\n            background: #ffffff;\r\n            border-color: var(--sfg-primary);\r\n            box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);\r\n        }\r\n\r\n        .sfg-controls {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-top: 12px;\r\n        }\r\n\r\n        .sfg-badge {\r\n            font-size: 11px;\r\n            font-weight: 700;\r\n            background: rgba(0,0,0,0.06);\r\n            padding: 4px 10px;\r\n            border-radius: var(--sfg-radius);\r\n            color: var(--sfg-text-muted);\r\n        }\r\n\r\n        .sfg-clear {\r\n            font-size: 11px;\r\n            font-weight: 700;\r\n            color: var(--sfg-text-muted);\r\n            background: none;\r\n            border: none;\r\n            cursor: pointer;\r\n            transition: color 0.2s;\r\n            text-transform: uppercase;\r\n        }\r\n        .sfg-clear:hover { color: #ef4444; }\r\n\r\n        \/* RIGHT: LIST (Scrollable) *\/\r\n        .sfg-right-panel {\r\n            padding: 24px;\r\n            background: rgba(255,255,255,0.3);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 12px;\r\n            overflow-y: auto;\r\n            \/* Scrollbar *\/\r\n            scrollbar-width: thin;\r\n            scrollbar-color: #cbd5e1 transparent;\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .sfg-right-panel { width: 50%; }\r\n            .sfg-right-panel::-webkit-scrollbar { width: 6px; }\r\n            .sfg-right-panel::-webkit-scrollbar-track { background: transparent; }\r\n            .sfg-right-panel::-webkit-scrollbar-thumb {\r\n                background-color: #cbd5e1;\r\n                border-radius: 9px;\r\n            }\r\n        }\r\n\r\n        \/* CARD *\/\r\n        .sfg-card {\r\n            background: var(--sfg-card-bg);\r\n            border-radius: var(--sfg-radius);\r\n            padding: 16px;\r\n            border: 1px solid var(--sfg-border);\r\n            display: flex;\r\n            flex-direction: column;\r\n            cursor: pointer;\r\n            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;\r\n            position: relative;\r\n        }\r\n\r\n        .sfg-card:hover {\r\n            transform: translateY(-2px);\r\n            border-color: var(--sfg-primary);\r\n            box-shadow: var(--sfg-shadow-hover);\r\n            z-index: 2;\r\n        }\r\n\r\n        .sfg-card-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 6px;\r\n            padding-bottom: 6px;\r\n            border-bottom: 1px solid #f1f5f9;\r\n        }\r\n\r\n        .sfg-card-title {\r\n            font-size: 10px;\r\n            text-transform: uppercase;\r\n            font-weight: 800;\r\n            color: var(--sfg-primary);\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .sfg-copy-icon {\r\n            width: 18px;\r\n            height: 18px;\r\n            color: var(--sfg-text-muted);\r\n            opacity: 0.5;\r\n            transition: 0.2s;\r\n        }\r\n        .sfg-card:hover .sfg-copy-icon { opacity: 1; color: var(--sfg-primary); }\r\n\r\n        .sfg-result {\r\n            font-size: 16px;\r\n            color: var(--sfg-text-main);\r\n            word-wrap: break-word;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        .sfg-card.placeholder { opacity: 0.7; pointer-events: none; }\r\n\r\n        \/* TOAST *\/\r\n        .sfg-toast {\r\n            position: fixed;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(100px);\r\n            background: #1e293b;\r\n            color: white;\r\n            padding: 12px 28px;\r\n            border-radius: 50px;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            opacity: 0;\r\n            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;\r\n            z-index: 1000;\r\n            box-shadow: 0 10px 25px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .sfg-toast.show {\r\n            transform: translateX(-50%) translateY(0);\r\n            opacity: 1;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"sfg-container\">\r\n        \r\n        <header class=\"sfg-header\">\r\n            <h1 class=\"sfg-title\">Small Font Text Generator - Generate Tiny Text Instantly<\/h1>\r\n            <p class=\"sfg-desc\">Generate tiny, superscript, and aesthetic fonts instantly.<\/p>\r\n        <\/header>\r\n\r\n        <div class=\"sfg-wrapper\">\r\n            \r\n            <!-- Left: Input Area -->\r\n            <div class=\"sfg-left-panel\">\r\n                <div class=\"sfg-panel-header\">\r\n                    <span class=\"sfg-label\">Input Text<\/span>\r\n                    <button id=\"sfgClear\" class=\"sfg-clear\">Clear<\/button>\r\n                <\/div>\r\n                <textarea id=\"sfgInput\" class=\"sfg-textarea\" placeholder=\"Type here to preview all styles...\"><\/textarea>\r\n                <div class=\"sfg-controls\">\r\n                    <span id=\"sfgCount\" class=\"sfg-badge\">0 CHARS<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: List Area -->\r\n            <div class=\"sfg-right-panel\" id=\"sfgList\">\r\n                <!-- Javascript will populate 30+ items here -->\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Toast Notification -->\r\n    <div id=\"sfgToast\" class=\"sfg-toast\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n        <span>Copied to clipboard!<\/span>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \/* \r\n             * MAPPINGS \r\n             *\/\r\n            const chars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n\r\n            const styles = [\r\n                { name: \"Small Caps\", map: \"\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d220123456789\" },\r\n                { name: \"Superscript (Tiny)\", map: \"\u1d43\u1d47\u1d9c\u1d48\u1d49\u1da0\u1d4d\u02b0\u1da6\u02b2\u1d4f\u02e1\u1d50\u207f\u1d52\u1d56\u1d60\u02b3\u02e2\u1d57\u1d58\u1d5b\u02b7\u02e3\u02b8\u1dbb\u1d2c\u1d2e\u1d9c\u1d30\u1d31\u1da0\u1d33\u1d34\u1d35\u1d36\u1d37\u1d38\u1d39\u1d3a\u1d3c\u1d3e\u1d60\u1d3f\u02e2\u1d40\u1d41\u2c7d\u1d42\u02e3\u02b8\u1dbb\u2070\u00b9\u00b2\u00b3\u2074\u2075\u2076\u2077\u2078\u2079\" },\r\n                { name: \"Subscript (Low)\", map: \"\u2090bcd\u2091fg\u2095\u1d62\u2c7c\u2096\u2097\u2098\u2099\u2092\u209aq\u1d63\u209b\u209c\u1d64\u1d65wxyzABCD\u2091FG\u2095\u1d62\u2c7c\u2096\u2097\u2098\u2099\u2092\u209aQ\u1d63\u209b\u209c\u1d64\u1d65WXYZ\u2080\u2081\u2082\u2083\u2084\u2085\u2086\u2087\u2088\u2089\" },\r\n                { name: \"Inverted (Upside Down)\", map: \"z\u028ex\u028d\u028cn\u0287s\u0279bdou\u026fl\u029e\u027e\u0131\u0265\u0183\u025f\u01ddp\u0254q\u0250z\u028ex\u028d\u028cn\u0287s\u0279bdou\u026fl\u029e\u027e\u0131\u0265\u0183\u025f\u01ddp\u0254q\u02506829s8\u0190\u161410\", isReverse: true },\r\n                { name: \"Monospace (Thin)\", map: \"\ud835\ude8a\ud835\ude8b\ud835\ude8c\ud835\ude8d\ud835\ude8e\ud835\ude8f\ud835\ude90\ud835\ude91\ud835\ude92\ud835\ude93\ud835\ude94\ud835\ude95\ud835\ude96\ud835\ude97\ud835\ude98\ud835\ude99\ud835\ude9a\ud835\ude9b\ud835\ude9c\ud835\ude9d\ud835\ude9e\ud835\ude9f\ud835\udea0\ud835\udea1\ud835\udea2\ud835\udea3\ud835\ude70\ud835\ude71\ud835\ude72\ud835\ude73\ud835\ude74\ud835\ude75\ud835\ude76\ud835\ude77\ud835\ude78\ud835\ude79\ud835\ude7a\ud835\ude7b\ud835\ude7c\ud835\ude7d\ud835\ude7e\ud835\ude7f\ud835\ude80\ud835\ude81\ud835\ude82\ud835\ude83\ud835\ude84\ud835\ude85\ud835\ude86\ud835\ude87\ud835\ude88\ud835\ude89\ud835\udff6\ud835\udff7\ud835\udff8\ud835\udff9\ud835\udffa\ud835\udffb\ud835\udffc\ud835\udffd\ud835\udffe\ud835\udfff\" },\r\n                { name: \"Script (Compact)\", map: \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\ud835\udc9c\ud835\udc35\ud835\udc9e\ud835\udc9f\ud835\udc38\ud835\udc39\ud835\udca2\ud835\udc3b\ud835\udc3c\ud835\udca5\ud835\udca6\ud835\udc3f\ud835\udc40\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\ud835\udc45\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb50123456789\" },\r\n                { name: \"Bold Script\", map: \"\ud835\udcea\ud835\udceb\ud835\udcec\ud835\udced\ud835\udcee\ud835\udcef\ud835\udcf0\ud835\udcf1\ud835\udcf2\ud835\udcf3\ud835\udcf4\ud835\udcf5\ud835\udcf6\ud835\udcf7\ud835\udcf8\ud835\udcf9\ud835\udcfa\ud835\udcfb\ud835\udcfc\ud835\udcfd\ud835\udcfe\ud835\udcff\ud835\udd00\ud835\udd01\ud835\udd02\ud835\udd03\ud835\udcd0\ud835\udcd1\ud835\udcd2\ud835\udcd3\ud835\udcd4\ud835\udcd5\ud835\udcd6\ud835\udcd7\ud835\udcd8\ud835\udcd9\ud835\udcda\ud835\udcdb\ud835\udcdc\ud835\udcdd\ud835\udcde\ud835\udcdf\ud835\udce0\ud835\udce1\ud835\udce2\ud835\udce3\ud835\udce4\ud835\udce5\ud835\udce6\ud835\udce7\ud835\udce8\ud835\udce90123456789\" },\r\n                { name: \"Fraktur\", map: \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u21280123456789\" },\r\n                { name: \"Double Struck\", map: \"\ud835\udd52\ud835\udd53\ud835\udd54\ud835\udd55\ud835\udd56\ud835\udd57\ud835\udd58\ud835\udd59\ud835\udd5a\ud835\udd5b\ud835\udd5c\ud835\udd5d\ud835\udd5e\ud835\udd5f\ud835\udd60\ud835\udd61\ud835\udd62\ud835\udd63\ud835\udd64\ud835\udd65\ud835\udd66\ud835\udd67\ud835\udd68\ud835\udd69\ud835\udd6a\ud835\udd6b\ud835\udd38\ud835\udd39\u2102\ud835\udd3b\ud835\udd3c\ud835\udd3d\ud835\udd3e\u210d\ud835\udd40\ud835\udd41\ud835\udd42\ud835\udd43\ud835\udd44\u2115\ud835\udd46\u2119\u211a\u211d\ud835\udd4a\ud835\udd4b\ud835\udd4c\ud835\udd4d\ud835\udd4e\ud835\udd4f\ud835\udd50\u2124\ud835\udfd8\ud835\udfd9\ud835\udfda\ud835\udfdb\ud835\udfdc\ud835\udfdd\ud835\udfde\ud835\udfdf\ud835\udfe0\ud835\udfd7\" },\r\n                { name: \"Bubbles (White)\", map: \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf0\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\" },\r\n                { name: \"Bubbles (Black)\", map: \"\ud83c\udd50\ud835\udc69\ud835\udd6e\ud835\udd07\ud83c\udd54\ud835\udd09\ud835\udd0a\ud835\udd0b\ud83c\udd58\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udcde\ud835\udd13\ud835\udd14\ud835\udd15\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\ud835\udd1d\ud83c\udd50\ud835\udd1f\ud835\udd20\ud835\udd21\ud83c\udd54\ud835\udd23\ud835\udd24\ud835\udd25\ud83c\udd58\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udcde\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e\" },\r\n                { name: \"Squares (White)\", map: \"\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83f\udf12\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd49\ud83c\udd49\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd49\ud83c\udd490123456789\" },\r\n                { name: \"Parenthesized\", map: \"\u249c\u249d\u249e\u249f\u24a0\u24a1\u24a2\u24a3\u24a4\u24a5\u24a6\u24a7\u24a8\u24a9\u24aa\u24ab\u24ac\u24ad\u24ae\u24af\u24b0\u24b1\u24b2\u24b3\u24b4\u24b5\u249c\u249d\u249e\u249f\u24a0\u24a1\u24a2\u24a3\u24a4\u24a5\u24a6\u24a7\u24a8\u24a9\u24aa\u24ab\u24ac\u24ad\u24ae\u24af\u24b0\u24b1\u24b2\u24b3\u24b4\u24b50\u2474\u2475\u2476\u2477\u2478\u2479\u247a\u247b\u247c\" },\r\n                { name: \"Mirrored\", map: \"\u0250q\u0254p\u01dd\u025f\u0183\u0265\u0131\u027e\u029el\u026fuodb\u0279s\u0287n\u028c\u028dx\u028ez\u2c6f\u15fa\u0186\u15e1\u018e\u2132\u2141HI\u10b1\u22ca\u2142WNO\u0500\u00d2\u1d1aS\u22a5\u2229\u039bMX\u2144Z0\u0196\u1105\u0190\u3123\u03db9\u312586\", isReverse: true },\r\n                { name: \"Sans Serif Bold\", map: \"\ud835\uddee\ud835\uddef\ud835\uddf0\ud835\uddf1\ud835\uddf2\ud835\uddf3\ud835\uddf4\ud835\uddf5\ud835\uddf6\ud835\uddf7\ud835\uddf8\ud835\uddf9\ud835\uddfa\ud835\uddfb\ud835\uddfc\ud835\uddfd\ud835\uddfe\ud835\uddff\ud835\ude00\ud835\ude01\ud835\ude02\ud835\ude03\ud835\ude04\ud835\ude05\ud835\ude06\ud835\ude07\ud835\uddd4\ud835\uddd5\ud835\uddd6\ud835\uddd7\ud835\uddd8\ud835\uddd9\ud835\uddda\ud835\udddb\ud835\udddc\ud835\udddd\ud835\uddde\ud835\udddf\ud835\udde0\ud835\udde1\ud835\udde2\ud835\udde3\ud835\udde4\ud835\udde5\ud835\udde6\ud835\udde7\ud835\udde8\ud835\udde9\ud835\uddea\ud835\uddeb\ud835\uddec\ud835\udded\ud835\udfec\ud835\udfed\ud835\udfee\ud835\udfef\ud835\udff0\ud835\udff1\ud835\udff2\ud835\udff3\ud835\udff4\ud835\udff5\" },\r\n                { name: \"Sans Serif Italic\", map: \"\ud835\ude22\ud835\ude23\ud835\ude24\ud835\ude25\ud835\ude26\ud835\ude27\ud835\ude28\ud835\ude29\ud835\ude2a\ud835\ude2b\ud835\ude2c\ud835\ude2d\ud835\ude2e\ud835\ude2f\ud835\ude30\ud835\ude31\ud835\ude32\ud835\ude33\ud835\ude34\ud835\ude35\ud835\ude36\ud835\ude37\ud835\ude38\ud835\ude39\ud835\ude3a\ud835\ude3b\ud835\ude08\ud835\ude09\ud835\ude0a\ud835\ude0b\ud835\ude0c\ud835\ude0d\ud835\ude0e\ud835\ude0f\ud835\ude10\ud835\ude11\ud835\ude12\ud835\ude13\ud835\ude14\ud835\ude15\ud835\ude16\ud835\ude17\ud835\ude18\ud835\ude19\ud835\ude1a\ud835\ude1b\ud835\ude1c\ud835\ude1d\ud835\ude1e\ud835\ude1f\ud835\ude20\ud835\ude210123456789\" },\r\n                { name: \"Bold Fraktur\", map: \"\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\ud835\udd6c\ud835\udd6d\ud835\udd6e\ud835\udd6f\ud835\udd70\ud835\udd71\ud835\udd72\ud835\udd73\ud835\udd74\ud835\udd75\ud835\udd76\ud835\udd77\ud835\udd78\ud835\udd79\ud835\udd7a\ud835\udd7b\ud835\udd7c\ud835\udd7d\ud835\udd7e\ud835\udd7f\ud835\udd80\ud835\udd81\ud835\udd82\ud835\udd83\ud835\udd84\ud835\udd850123456789\" },\r\n                { name: \"Single Underline\", map: \"\", diacritic: '\\u0332' },\r\n                { name: \"Double Underline\", map: \"\", diacritic: '\\u0333' },\r\n                { name: \"Strikethrough\", map: \"\", diacritic: '\\u0336' },\r\n                { name: \"Slash Through\", map: \"\", diacritic: '\\u0338' },\r\n                { name: \"Dotted Underline\", map: \"\", diacritic: '\\u0323' },\r\n                { name: \"Arrows Below\", map: \"\", diacritic: '\\u034D' },\r\n                { name: \"Tilde Overlay\", map: \"\", diacritic: '\\u0334' },\r\n                { name: \"Cloudy\", map: \"\", diacritic: '\\u0489' },\r\n                { name: \"Boxed Text\", map: \"\", diacritic: '\\u0350' }, \/\/ Approximation via arrow header\r\n                { name: \"Serif Bold\", map: \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\" },\r\n                { name: \"Italic\", map: \"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d0123456789\" },\r\n                { name: \"Bold Italic\", map: \"\ud835\udc82\ud835\udc83\ud835\udc84\ud835\udc85\ud835\udc86\ud835\udc87\ud835\udc88\ud835\udc89\ud835\udc8a\ud835\udc8b\ud835\udc8c\ud835\udc8d\ud835\udc8e\ud835\udc8f\ud835\udc90\ud835\udc91\ud835\udc92\ud835\udc93\ud835\udc94\ud835\udc95\ud835\udc96\ud835\udc97\ud835\udc98\ud835\udc99\ud835\udc9a\ud835\udc9b\ud835\udc68\ud835\udc69\ud835\udc6a\ud835\udc6b\ud835\udc6c\ud835\udc6d\ud835\udc6e\ud835\udc6f\ud835\udc70\ud835\udc71\ud835\udc72\ud835\udc73\ud835\udc74\ud835\udc75\ud835\udc76\ud835\udc77\ud835\udc78\ud835\udc79\ud835\udc7a\ud835\udc7b\ud835\udc7c\ud835\udc7d\ud835\udc7e\ud835\udc7f\ud835\udc80\ud835\udc810123456789\" },\r\n                { name: \"Rusify\", map: \"\u0414\u0411CD\u039eFGHIJ\u041aL\u043c\u0438\u0424PQ\u042fS\u0442UVWXYZ\u0430\u044ccd\u0451fghi\u0458\u043al\u043c\u0438\u043e\u0440q\u0433s\u0442\u0446v\u0448x\u0443z0123456789\" }\r\n            ];\r\n\r\n            const dom = {\r\n                in: document.getElementById('sfgInput'),\r\n                list: document.getElementById('sfgList'),\r\n                clear: document.getElementById('sfgClear'),\r\n                count: document.getElementById('sfgCount'),\r\n                toast: document.getElementById('sfgToast')\r\n            };\r\n\r\n            const placeholder = \"Preview Text\";\r\n\r\n            \/\/ Converter Logic\r\n            function convert(text, map, isReverse, diacritic) {\r\n                \/\/ Diacritic Mode\r\n                if(diacritic) {\r\n                    return text.split('').map(c => c + diacritic).join('');\r\n                }\r\n\r\n                \/\/ Map Mode\r\n                if(isReverse) {\r\n                    return text.split('').map(char => {\r\n                        const idx = chars.indexOf(char);\r\n                        return idx > -1 ? Array.from(map)[idx] : char;\r\n                    }).reverse().join('');\r\n                }\r\n                \r\n                const mapArr = Array.from(map);\r\n                return text.split('').map(char => {\r\n                    const idx = chars.indexOf(char);\r\n                    return idx > -1 ? (mapArr[idx] || char) : char;\r\n                }).join('');\r\n            }\r\n\r\n            \/\/ Renderer\r\n            function render() {\r\n                const val = dom.in.value;\r\n                dom.count.textContent = `${val.length} CHARS`;\r\n                \r\n                dom.list.innerHTML = '';\r\n                const display = val || placeholder;\r\n                const isPlaceholder = !val;\r\n\r\n                styles.forEach(s => {\r\n                    \/\/ Decide transformation type based on object props\r\n                    const result = convert(display, s.map, s.isReverse, s.diacritic);\r\n                    \r\n                    const card = document.createElement('div');\r\n                    card.className = `sfg-card ${isPlaceholder ? 'placeholder' : ''}`;\r\n                    \r\n                    card.innerHTML = `\r\n                        <div class=\"sfg-card-header\">\r\n                            <span class=\"sfg-card-title\">${s.name}<\/span>\r\n                            <div class=\"sfg-copy-icon\">\r\n                                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"sfg-result ${s.cls || ''}\">${result}<\/div>\r\n                    `;\r\n\r\n                    if(!isPlaceholder) card.onclick = () => doCopy(result);\r\n\r\n                    dom.list.appendChild(card);\r\n                });\r\n            }\r\n\r\n            \/\/ Copy\r\n            async function doCopy(str) {\r\n                try {\r\n                    await navigator.clipboard.writeText(str);\r\n                } catch(e) {\r\n                    const t = document.createElement('textarea');\r\n                    t.value = str;\r\n                    document.body.appendChild(t);\r\n                    t.select();\r\n                    document.execCommand('copy');\r\n                    document.body.removeChild(t);\r\n                }\r\n                showToast();\r\n            }\r\n\r\n            let tTimer;\r\n            function showToast() {\r\n                dom.toast.classList.add('show');\r\n                clearTimeout(tTimer);\r\n                tTimer = setTimeout(() => dom.toast.classList.remove('show'), 2000);\r\n            }\r\n\r\n            \/\/ Listeners\r\n            dom.in.addEventListener('input', render);\r\n            dom.clear.addEventListener('click', () => {\r\n                dom.in.value = '';\r\n                render();\r\n                dom.in.focus();\r\n            });\r\n\r\n            \/\/ Init\r\n            render();\r\n\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n<!-- \r\n============================================\r\nSUPPORTIVE SEO CONTENT STARTS HERE\r\n============================================\r\n- Keyword: \"Small Text Generator\"\r\n- Place this entire block after the \"sfg-app-root\" div.\r\n- Uses separate 'sfg-info-*' classes to avoid any conflicts.\r\n- Perfectly matches the provided tool's \"Compact Premium\" aesthetic with alternating backgrounds.\r\n-->\r\n<div class=\"sfg-info-main-wrapper\">\r\n\r\n    <!-- CSS STYLES FOR SUPPORTIVE CONTENT -->\r\n    <style>\r\n        .sfg-info-main-wrapper {\r\n            width: 100%;\r\n            font-family: var(--sfg-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\r\n            color: var(--sfg-text-main, #0f172a);\r\n        }\r\n\r\n        .sfg-info-section-wrapper {\r\n            width: 100%;\r\n            padding: 60px 15px;\r\n        }\r\n\r\n        .sfg-info-section-wrapper.bg-gradient {\r\n            background: var(--sfg-bg-gradient, linear-gradient(135deg, #7185ec, #8257aa));\r\n        }\r\n        \r\n        .sfg-info-section-wrapper.bg-white {\r\n            background: var(--sfg-white, #ffffff);\r\n        }\r\n\r\n        .sfg-info-container {\r\n            width: 100%;\r\n            max-width: 1160px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .sfg-info-section-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n        \r\n        .sfg-info-section-title {\r\n            font-size: 28px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n        }\r\n        \r\n        \/* Different title colors for different backgrounds *\/\r\n        .bg-gradient .sfg-info-section-title {\r\n            color: #ffffff;\r\n            text-shadow: 0 2px 8px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .bg-white .sfg-info-section-title {\r\n            color: var(--sfg-text-main, #0f172a);\r\n        }\r\n        \r\n        .sfg-info-section-subtitle {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .bg-gradient .sfg-info-section-subtitle {\r\n            color: rgba(255, 255, 255, 0.9);\r\n        }\r\n        \r\n        .bg-white .sfg-info-section-subtitle {\r\n            color: var(--sfg-text-sub, #64748b);\r\n        }\r\n\r\n        .sfg-info-card-layout {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 20px;\r\n        }\r\n        \r\n        .sfg-info-card {\r\n            \/* Replicating the tool's card style *\/\r\n            background: var(--sfg-white, #ffffff);\r\n            border: 1px solid var(--sfg-border, #e2e8f0);\r\n            border-radius: var(--sfg-radius-pill, 12px);\r\n            padding: 25px;\r\n            box-shadow: var(--sfg-shadow-item, 0 4px 6px -1px rgba(0, 0, 0, 0.05));\r\n            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;\r\n            text-align: left;\r\n        }\r\n        \r\n        .sfg-info-card:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 12px rgba(0,0,0,0.07);\r\n            border-color: var(--sfg-primary, #7185ec);\r\n        }\r\n\r\n        .sfg-info-card-title {\r\n            font-size: 1.25rem;\r\n            font-weight: 700;\r\n            color: var(--sfg-text-main, #0f172a);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .sfg-info-card p, .sfg-info-card li {\r\n            font-size: 1rem; \r\n            line-height: 1.7;\r\n            color: var(--sfg-text-sub, #64748b);\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .sfg-info-card ul {\r\n            list-style: none;\r\n            padding-left: 0;\r\n        }\r\n        \r\n        .sfg-info-card li {\r\n            padding-left: 25px;\r\n            position: relative;\r\n        }\r\n        \r\n        .sfg-info-card li::before {\r\n            content: '\u2713';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 6px;\r\n            color: var(--sfg-primary, #7185ec);\r\n            font-weight: bold;\r\n        }\r\n\r\n        .sfg-info-card strong {\r\n            color: var(--sfg-text-main, #0f172a);\r\n            font-weight: 600;\r\n        }\r\n    <\/style>\r\n\t    <div class=\"sfg-info-section-wrapper bg-white\">\r\n        <div class=\"sfg-info-container\">\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t    <\/div>\r\n    <!-- ========= SECTION 1: What is a Small Text Generator? ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-white\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">What is a Small Text Generator?<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">Learn how to create tiny, superscript, and other compact text styles that you can copy and paste anywhere online.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Beyond Standard Fonts<\/h3>\r\n                    <p>A <strong>Small Text Generator<\/strong> is a versatile tool that converts your regular text into various miniature styles using <strong>Unicode characters<\/strong>. While it might look like you're changing the font size, you're actually using special symbols that are smaller by design. This is the secret that allows the \"small text\" to be copied and pasted across different platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">The Power of Unicode<\/h3>\r\n                    <p>The \"fonts\" created here aren't traditional fonts; they are sets of Unicode symbols. Unicode is a universal standard for characters, and it includes several sets of small letters, like those for mathematical notations. Because most modern devices and websites support Unicode, you can paste this text on Instagram, X (Twitter), Discord, and more, and the style will be preserved.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 2: A Universe of Small Styles ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-gradient\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">A Universe of Small Styles<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">Our generator offers a curated selection of the most popular and useful small text fonts.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Superscript (Tiny Text)<\/h3>\r\n                    <p>This is the classic \"tiny text\" style. It uses superscript characters to create text that appears raised and very small, perfect for adding subtle notes or a unique aesthetic to your text. <strong>Example: \u1d57\u02b0\u1da6\u02e2 \u1da6\u02e2 \u1d57\u1da6\u207f\u02b8 \u02e2\u1d58\u1d56\u1d49\u02b3\u02e2\u1d9c\u02b3\u1da6\u1d56\u1d57 \u1d57\u1d49\u02e3\u1d57.<\/strong><\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Subscript (Low Text)<\/h3>\r\n                    <p>Subscript characters are the opposite of superscript. They create text that is small and appears lower than the standard baseline. This is often used for chemical formulas or a unique stylistic effect. <strong>Example: \u209c\u2095\u1d62\u209b \u1d62\u209b \u2097\u2092w \u209b\u1d64\u2086\u209bc\u1d63\u1d62\u209a\u209c \u209c\u2091\u2093\u209c.<\/strong><\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Small Caps<\/h3>\r\n                    <p>Small caps are a sophisticated typographic style where lowercase letters are replaced by smaller versions of capital letters. It's a great way to add emphasis without the harshness of all caps. <strong>Example: T\u029c\u026as \u026as s\u1d0d\u1d00\u029f\u029f \u1d04\u1d00\u1d18s \u1d1b\u1d07x\u1d1b.<\/strong><\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 3: Where to Use Small Text ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-white\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">Where to Use Your Small Text<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">Elevate your digital presence by using these unique copy-and-paste styles on your favorite platforms.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Social Media Profiles<\/h3>\r\n                    <p>Make your profile stand out and add a touch of personality.<\/p>\r\n                    <ul>\r\n                        <li><strong>Instagram & TikTok Bios:<\/strong> Use tiny text to add a tagline, a quote, or descriptive text under your main name.<\/li>\r\n                        <li><strong>Twitter\/X Display Names:<\/strong> Create a unique handle that takes up less visual space.<\/li>\r\n                        <li><strong>Facebook Posts:<\/strong> Use small caps for elegant headers or tiny text for footnotes in your posts.<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">Messaging and Usernames<\/h3>\r\n                    <p>Add a subtle and creative flair to your communications and online identity.<\/p>\r\n                    <ul>\r\n                        <li><strong>Discord & Slack:<\/strong> Use small text in your username or status to create a unique look.<\/li>\r\n                        <li><strong>WhatsApp & Telegram:<\/strong> Send messages with tiny text to add a playful or secretive tone.<\/li>\r\n                        <li><strong>Unique Usernames:<\/strong> Craft a compact and stylish username for social media or gaming platforms.<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 4: SEO & Accessibility Warning ========= -->\r\n    <div class=\"sfg-info-section-wrapper bg-gradient\">\r\n        <div class=\"sfg-info-container\">\r\n            <header class=\"sfg-info-section-header\">\r\n                <h2 class=\"sfg-info-section-title\">An Important Note on SEO & Accessibility<\/h2>\r\n                <p class=\"sfg-info-section-subtitle\">While small text is great for social media, it should NOT be used on your website for important content.<\/p>\r\n            <\/header>\r\n            <div class=\"sfg-info-card-layout\">\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">The SEO Problem<\/h3>\r\n                    <p>Search engines like Google may not properly recognize these special Unicode characters as standard letters. Using \u02e2\u1d50\u1d43\u02e1\u02e1 \u1d57\u1d49\u02e3\u1d57 for your website's headings or important keywords will likely make that text invisible to search engines, which can severely damage your page ranking. For websites, always use standard text and control the size with CSS.<\/p>\r\n                <\/div>\r\n                <div class=\"sfg-info-card\">\r\n                    <h3 class=\"sfg-info-card-title\">The Accessibility Problem<\/h3>\r\n                    <p>Screen readers, the software used by visually impaired individuals, often struggle to read these special characters. They may read them out letter by letter or as confusing symbol names, making your content inaccessible. Always prioritize standard, readable text for important information to ensure everyone can access it.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n<!-- SUPPORTIVE SEO CONTENT ENDS HERE -->\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u5c0f\u6587\u5b57\u30c6\u30ad\u30b9\u30c8\u751f\u6210\u30c4\u30fc\u30eb - \u6975\u5c0f\u30c6\u30ad\u30b9\u30c8\u3092\u77ac\u6642\u306b\u751f\u6210 - \u30aa\u30f3\u30e9\u30a4\u30f3\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf<\/title>\n<meta name=\"description\" content=\"\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u3084\u79d8\u5bc6\u306b\u3074\u3063\u305f\u308a\u306e\u5c0f\u3055\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002\u3053\u306e\u5c0f\u3055\u306a\u30d5\u30a9\u30f3\u30c8\u306e\u30c6\u30ad\u30b9\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u306f\u3001\u901a\u5e38\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u6975\u5c0f\u306e\u8aad\u307f\u3084\u3059\u3044\u30c6\u30ad\u30b9\u30c8\u306b\u5909\u63db\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinetexteditor.io\/ja\/small-font-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Small Font Text Generator - Generate Tiny Text Instantly - Online Text Editor\" \/>\n<meta property=\"og:description\" content=\"Write tiny messages perfect for captions or secrets. This small font text generator converts your regular text into minuscule, readable...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/small-font-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-14T09:24:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/small-font-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/small-font-text-generator\\\/\",\"name\":\"Small Font Text Generator - Generate Tiny Text Instantly - Online Text Editor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2025-11-30T00:00:06+00:00\",\"dateModified\":\"2025-12-14T09:24:41+00:00\",\"description\":\"Write tiny messages perfect for captions or secrets. This small font text generator converts your regular text into minuscule, readable...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/small-font-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/small-font-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/small-font-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Small Font Text Generator &#8211; Generate Tiny Text Instantly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/\",\"name\":\"Online Text Editor\",\"description\":\"Free &amp; Secure Rich Text Editing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onlinetexteditor.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u5c0f\u6587\u5b57\u30c6\u30ad\u30b9\u30c8\u751f\u6210\u30c4\u30fc\u30eb - \u6975\u5c0f\u30c6\u30ad\u30b9\u30c8\u3092\u77ac\u6642\u306b\u751f\u6210 - \u30aa\u30f3\u30e9\u30a4\u30f3\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf","description":"\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u3084\u79d8\u5bc6\u306b\u3074\u3063\u305f\u308a\u306e\u5c0f\u3055\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002\u3053\u306e\u5c0f\u3055\u306a\u30d5\u30a9\u30f3\u30c8\u306e\u30c6\u30ad\u30b9\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u306f\u3001\u901a\u5e38\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u6975\u5c0f\u306e\u8aad\u307f\u3084\u3059\u3044\u30c6\u30ad\u30b9\u30c8\u306b\u5909\u63db\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinetexteditor.io\/ja\/small-font-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Small Font Text Generator - Generate Tiny Text Instantly - Online Text Editor","og_description":"Write tiny messages perfect for captions or secrets. This small font text generator converts your regular text into minuscule, readable...","og_url":"https:\/\/onlinetexteditor.io\/small-font-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2025-12-14T09:24:41+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/small-font-text-generator\/","url":"https:\/\/onlinetexteditor.io\/small-font-text-generator\/","name":"Small Font Text Generator - Generate Tiny Text Instantly - Online Text Editor","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2025-11-30T00:00:06+00:00","dateModified":"2025-12-14T09:24:41+00:00","description":"Write tiny messages perfect for captions or secrets. This small font text generator converts your regular text into minuscule, readable...","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/small-font-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/small-font-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/small-font-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Small Font Text Generator &#8211; Generate Tiny Text Instantly"}]},{"@type":"WebSite","@id":"https:\/\/onlinetexteditor.io\/#website","url":"https:\/\/onlinetexteditor.io\/","name":"Online Text Editor","description":"Free &amp; Secure Rich Text Editing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinetexteditor.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":2,"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/pages\/193\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/ja\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}