Typography mistakes to avoid for better website designs with Piccia Neri – SWC 24
February 18, 2019 February 18, 2019 /
Good Website design is the right mix of fonts, colors, images, white space, and a lot of other things, which is generally considered a part of Typography.
How many fonts you should use on a webpage? Which colors to avoid for colorblind visitors? How much spacing is required for paragraph text? Piccia Neri explains about common Typography mistakes which can be avoided for better website design layouts.
01. Defining Typography
- Majority of website creators are not designers, technically. Most follow the principle, let’s make whatever the client wants or just tweak an existing design template and finish the job. Word Typography does not hold much significance in this space. To such an audience, how would define the concept of Typography?
02. Too many stylish Fonts
- Now with page builders, it is so easy to slap any number of fonts on a single webpage and go radically creative. If we follow strict Typography principles, how many fonts are too many for a webpage?
- What about font combinations like selecting a font for headlines and another font for the body text, are there any dos and don’ts in this regard?
- Is it acceptable to have crazy big headline font size for that radical “in your face” bold design and using too small font size for body text for that “uber minimal” look?
03. Text in Paragraphs
- I have seen web pages where paragraph text runs horizontally from one edge of the screen to another and it so difficult to read. I personally stay with 700px to 800px readable text width. Is there any set guide such thing to ensure better text readability?
- What about vertical line spacing of text within a paragraph?
04. Styling Text Contents
- Using all caps text to catch user attention, how much use it too much or too less in web design from typography perspective?
- What about mixing of other styles like italics, underline and even bold text in the webpage layout?
- Even though we are done with the phase of blinking text invading webpages, it has been replaced with more smooth looking text animation effects. Does typography principles approve of this more sophisticated and modern version of the animated text?
05. Playing with Colors
- Just like fonts, how many colors is too much or too less for a webpage design that follows basic typography principles?
- Color blindness is a common condition, especially amongst men. Red and green color blindness is most talked about. How does one balance the need to using cool colors on the one hand and the possibility of a cold blind person consuming that color content on the other hand?
06. Designing for Audience type
- Can we be a little flexible about typography principles when designing for a specific set of users? Like feminine designs for women generally, have very light colors and very small font size – which obviously is very hard to read at least for me.
- On the other end of the spectrum, we have super creative agency type designs, like those which win design awards but hardly practical in real-world usage. How does one justify giving typography a royal ignore for the sake of looking cool, visually?
Piccia Neri’s ToolBox
- Use Beaver Builder all website layout development.
- For base theme use either Astra or GeneratePress WordPress Themes.
- Use In design and other Adobe programs via Adobe subscription.
- Love using Sketch app for prototyping needs.
- For UX user flows and sitemaps use FlowMapp (flowmapp.com).
- Currently using Cloudways for website hosting needs.
- Use Active Campaign for email marketing functionality.
About Piccia Neri
I have a background in art theory, and I’ve been a practicing designer for over 2 decades, working with cultural institutions and top London agencies on global brands.
I led the creative direction of the design department at the British Film Institute, London. I was vice-president of the Chartered Society of Designers (UK) 2013-16.
Now I run my own web & design consultancy agency out of Valencia, Spain. I also educate geeks on design and speaks at conferences on design topics.
More: Website / Facebook Group
