"use client" export default function Component() { const [fontSize, setFontSize] = useState(16) const [charCount, setCharCount] = useState(66) const [maxWidth, setMaxWidth] = useState(0) const [isOptimal, setIsOptimal] = useState(true) useEffect(() => { const avgCharWidth = fontSize * 0.5 const calculatedWidth = charCount * avgCharWidth setMaxWidth(Math.round(calculatedWidth)) setIsOptimal(charCount >= 45 && charCount <= 75) }, [fontSize, charCount]) return ( Text Width Calculator Calculate the max width for your text container based on font size and character count

Font Size (px) setFontSize(Number(e.target.value))} min={1} />

Characters per Line setCharCount(Number(e.target.value))} min={1} />

Calculated Max Width

{maxWidth}px

{!isOptimal && ( Non-optimal line length For optimal readability, it's recommended to have between 45-75 characters per line. )}

This calculation is based on your input for font size and characters per line. While you can set any value, 45-75 characters per line is generally considered optimal for readability. The actual character count may vary based on the specific characters used and the chosen font.

) }