For the Love of Fonts is a complete website designed to exhibit font types, fonts being used in the real world and a short history of type. The idea came from the many books on typography that I own. I enjoy the visual aspects of the books and wanted to transfer it to a website.
The Homepage has a cover image and images with buttons that link to the pages on the website.
The Font Types page breaks down the different types of font categories. It uses fonts from Google Fonts which is a free resource for web fonts. It allows you to add a link to your head that contains the information for the font. I included buttons on the page to allow the user to find the fonts for their own use. There is also a table on this page that breaks down type variations. I also used JavaScript to allow the user to show and hide the table at the bottom of the page.
The Font In Use section shows the user how fonts have been used in the real world with a responsive gallery. The name of the font used in the photo is displayed underneath. Each photo is separated by a horizontal line so that the viewer can differentiate between the images.
The Timeline page has a short history of type and where it has come from. Each date is linked by a line, which was a suggestion by a classmate, that I though brought the page together. The line was added by creating and adding an SVG and styling it in the CSS file. When the page gets below 768px the text and images centre, which looks nicer on responsive devices. This feature works using media queries that change the CSS when the screen goes below a certain size.
The Books On Type has a selection of popular books on Typography with links to purchase the books.
The website is fully responsive using Bootstrap. Media queries are used through the site to adjust aspects and ensure that the site looks good on responsive. Media queries are also used to change the background to white at 460px and other colours change to ensure the sites style follows through. I also used Bootstrap to assist with the nav bar at the top of the website. I used some of their classes and then customised it to match my websites style. This allowed the nav to stay at the top of the page and scale responsively. Any link leading to an external website has a blank target so that the page opens in a new tab.
I also created and linked a favicon to the site to complete the overall look.
The font used for the main body of the website is P22 Underground, also known as Johnston, from Adobe Fonts. Designed by Edward Johnston, Paul D. Hunt, and Richard Kegler. It is the font used in the London Tube.
Homepage and gallery images sourced from Unsplash
Fonts In Use gallery images sourced from Fonts In Use
Timeline image: Printing Press from Wikipedia
Timeline image: Nicolas Jenson from Alchetron
Timeline image: Aldus Manutius from Smithsonian Mag
Timeline image: William Caslon from Pinterest
Timeline image: John Baskerville from Luc Devroye
Timeline image: William Caslon IV from Spitalfields Life
Timeline image: Max Miedinger from Hypocrite Design
Books on Type images sourced from Amazon
Information on type sourced from Lifewire,Wikipedia and SitePoint
Created by Adam Clapper