Background

Out of all the themes and ideas I conjured up for this website, a graph paper themed website is what locked me in. It is kind of funny because while I was writing all the potential ideas I could use down onto my graph papered notebook, it turns out the idea I would end up going with was already staring me right in the face.

Font

Now with the background chosen I needed to pair it with the perfect font. What I went with was something that was not too sharp because it would look very stoic and something not to roundish and playful that would come off as immature. Commit Mono was exactly what I was looking for and the biggest plus was that it was free, not like those other fonts that charge $900 per font character.

If you also want to utilize this font you can find it here. The website Eigil Nikolajsen made for this font is absolutely beautiful and super fun to interact with.

Logo

To make the website very distinguishable, I needed to incorporate a logo that would create a unique identity, establishing my website's individuality. The best way I found I can do this was to make a doodle of myself as the logo.

A fun feature that I wanted to include was variation in the logo by adding overlays to it when clicked as well as pairing it with a simple phrase. I went back to the drawing board, literally, and drew different hats and head gears and I would just place them on top of the logo. I feel like this adds a sense of hidden interactivity that the user would possibly find interesting. All drawings were done on Krita, a free open source graphic editor that can be found here.

Spacing

Spacing should be kept very uniform and predictable. The increments I chose were relative to a single grid cell. So the multiples of spacing are 1/4, 1/2, 1, 1.5, and 2.

Text

I decided to keep the text variation/spread very basic so I don't get overwhelmed by the options I have. I feel that if you have to have 4 hierarchies of headers within your writing then its just getting too complex and detailed. For the purpose of this website I won't be doing anything near that, just simple writings and blogs.

The text options consist of 3 header types, a regular paragraph tag, a span tag that highlights text within it, italic tag, bold tag, and a bold and italic tag. That's all a man needs to survive.

Heading 1

Heading 2

Heading 3

This is a span word in a paragraph tag

This is a italic word in a paragraph tag

This is a bold word in a paragraph tag

This is a bold italic word in a paragraph tag

Links

As for links there are two options. One that is inline and one that behaves like a block.

This is a link in a sentence

You are probably wondering where are the buttons. The thing is, there are no buttons because buttons don't exist on graph paper, but links do. I don't make the rules.

Icons

Icons were rather straight forward, I kept them within the size of a single grid cell. I utilized this website for icons, using only the Lucide icons for consistency.