Some time ago, I decided to try creating one of those letter boards that we often see in cafes and other paces displaying menus. I challenged myself to use only CSS to simulate the effect of the lines where the letters fit, the frame, and the typography itself.
For that, I used the linear-gradient function in the background property of a div. Then, I calculated the vertical repetition in em so that the lines matched the size of the text, whatever it might be. That way, the letters really look like they’re fitted into the board.
I took one step further and added the attribute contenteditable to the div’s HTML, making the text of the letter board editable as if it were an input, without the need to modify the HTML.
It was a fun exercise. And to my surprise, my pen was featured in the official CodePen newsletter! Read the issue here.
