The time is ripe for me to show you some design samples I coded in HTML and some CSS, paying a special focus on fine typography. Learning HTML also helped me appreciate the anatomy of a humble website. While many websites are now made with simplistic, drag-and-drop, visual website-builders (this site included), many websites, say two decades ago, were painstakingly coded by hand (which is more time-consuming than I intially thought).
By the way, these samples were created from the handy about:blank link which can be accessed on almost every internet browser. I have currently made only three satisfactory designs, but I will update this post in the coming weeks when new designs are added. Here they go!
This first sample took advantage of different stylistic alternates within the font. Body text was set in Inter, a, bland, yet somehow charming, typeface for digital interfaces. It was generously made free to the public by Rasmus Anderson. I activated the alternate lowecase “l” for the body text in order to disambiguate it from the digit 1. The highlighted text was in medium sea green via CSS.
I opted for a fresh and contemporary vibe over here. The black weight of Bodoni Moda, an elegant prima donna, was chosen for the heading. Body text was set in Source Serif Pro, which features lower contrast to aid both legibility and readability. These two typefaces were sourced from Google Fonts.
It would’ve been foolish for me not to recreate the ominpresent, corporate style we see so often on the web. I added lots of white space, thus giving some breathing air to the text. No boring stock images were put. And the much-abused button with capitalised letters were finally positively letterspaced (haha, get the joke?). The humanist sans serif Commissioner was used because of its impressively versatile variable font capabilities. Whenever the button is hovered by the mouse, the flair axis shoots up and the weight increases. I intended to make a quick video demo of this, but unfortunately I closed the browser tab so my hours of hard work was gone immediately. Sigh.
Featured photo by Markus Spiske on Unsplash
Thomas Blogs 