3 examples of sites with beautiful typography.

Clagnut By Richard Rutter

Clagnut by Richard Rutter. http://clagnut.com/

Clagnut is a blog website in which Richard often writes about human-centred design, typography, music and cycling. Visual Hierarchy is very important element as you can see in Richard Cutter’s website users can clearly see where to look and the find things that are important.

Richard’s blog website uses F-Pattern Hierarchy as it comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph’s initial sentences. There are also a good amount of white spaces and overall is a very clean homepage.

Rooki.design

Rooki.design designed and developed by Edoardo Rainoldi. https://www.rooki.design/

rooki.design is an online magazine dedicated to young designers. The website has nice typography as it fits the layout which suits the content.

The Typeface used on this site also has a very artistic feel to it as seen in the header section and the strong text on the center of the page. Sans-serif font is also used on the body text as the preferred option for a typeface on screen is a sans serif typeface.

The Futur

The Futur – Business and Design Education, Revolutionized. https://thefutur.com/

The Futur is an online education platform for courses, and tools to help you build better design skills. The website is very simple as only sans-serif is used.

The website has a nice visual hierarchy as the headings are very large. The whitespace used on the website is also very nice as it balances the elements on a page by creating a natural flow for the user to navigate through the content. The website is very colorful and the text colors fit the contrast very well as different colors are used on different sections of the page.

What I learned this week…

Web Standards

Web Standards are an important part of how the Web is regulated (technologically). The W3C (World Wide Web Consortium) coordinates most aspects of web technologies W3C’s mission is to guide the web to its full potential.

The purpose of HTML is to provide structure to documents meaning to content. As, people might use many browsers such as Mozilla, Firefox, Opera and Safari it is important to for people see elements of the website to look the same in all browsers and also be able to function properly. The purpose of web standards is to create a universal, accessible and easy to use website that everybody can trust.

Content, Structure, Presentation, and Behavior

There are 4 layers that makes a web page and these are:

  • Content Layer – Text and foreground images.
  • Structure Layer – HTML
  • Presentation Layer – CSS
  • Behavior Layer – JavaScript

CSS Selectors

CSS selectors are used to select the content you want to style. There are different selectors to select the HTML elements which are according to its id, class and many more.

h1 {color: red;}

The above example code has a selector, property, declaration and a value. Each declaration has a property and a value and is always enclosed in a curly braces and the colon character is used as a separator between the property and its value.

CSS Box Model

All HTML elements can be considered as boxes. This is called the Box model which consists of content, padding, border and a margin. The box model allows us to define space between elements and also add border around the elements.

CSS Resets

As, all browsers have their default styling added to the browser, in which the CSS reset can help fix that problem. Having a CSS reset removes all the default styling from the browser so that you are able to apply your own styling to your HTML elements. An example of an reset is shown below.

/* the universal selector reset */ * { margin: 0; padding: 0; }

Useful CSS references

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://meyerweb.com/eric/tools/css/reset/

Three designed objects

Zippo Lighter

A Zippo lighter is a reusable metal lighter and its main purpose is to light a flame. It has a very simple design and is very easy to use. It stays lit, every time, in all kinds of weather no matter how windy, cold and wet the day is and produces a good steady flame.

The Zippo Lighter is made of smooth, stamped steel with a brushed chrome on the front and back, with polished chrome on sides. The lighter’s lid also opens and closes with a satisfying ‘click’; sound which makes it feel like a quality product. It has a nice weight and balance and feels good in your hand when you hold it and is small enough to fit in your pocket.

Because, of the robust simplicity of its design and materials it makes it easy to find and purchase the right items in order to fix it. You can also find these items in your house as these are common house hold items. For example, a wick can be made with a piece of string and some copper wire.

Scissors

scissors

As you squeeze your fingers together on the handles, the sharp edges meet, and it causes the blades to cross one another which is how the cutting gets done. Scissor is an item that is very sharp with comfortable soft grip on the hands and nice to handle. They are also well balanced thus don’t feel heavy which enable scissors to be used for long periods without discomfort.

When, you go about your everyday life and realize what you really need is a good pair of scissors and the closest one is downstairs or sitting in a drawer somewhere. Scissors is an item that mostly everyone has and use. It’s also used for a variety of things such as grooming, cutting cloth, ropes, cutting threads.

A good pair of scissors is an underrated everyday tool. It is a very good design as the key factor of this utensil is its simplicity. Its main purpose is to cut things. You only need 3 elements to form a scissor: 2 blades and 1 pivot point. Most modern scissors are also designed with thermoplastic and rubber handles. In overall view, it only has three basic elements and the simplicity makes it the perfect item.

Logitech g305 wireless mouse

mouse

This mouse has Bluetooth and uses double AA batteries the battery life is good lasting up to a claimed 250 hours on just one AA and in many cases replacing swapping out a battery is more convenient when it has expired than waiting for a device to charge. 

The mouse is very light and feels extremely accurate, glides very easily. The shape is also great and is easy to grip. The mouse is mainly designed for medium to small sized hands. This mouse is perfect for people for people who are on the smaller side of the hand size spectrum.  The mouse also has great features such as programable buttons which can then be used, for quick shortcuts.

The Logitech g305 has a pleasant matte finish to it. The buttons are nice to press, left/right are quite clicky, not too soft or hard to press but just right. The wheel is soft and silent, as is clicking it. It gives the right amount of resistance.