How To Choose The Right Web Font

Text plays a highly vital role in communicating ideas to users. There some areas to take note of when it comes to choosing fonts for a website. They should not be chosen to work against users. I will be sharing 3 basic and important tips on choosing appropriate web fonts.

Compatibility

Sometimes, less is more. Matching multiple fonts may be unpleasant to the eyes. As a rule of thumb, pick one base font and one display font throughout the entire site. This will ensure that the displays of different pages are coherent to each other.

The above example shows the font Domaine Display in a combination with Proxima Nova. A bolder and thicker font is used to display titles or headings while a thinner and sleeker font is used for the body text. This ensures readability and is pleasing to the eyes.

Mood and Tone

Colours and images are to be put into consideration when choosing web fonts. Different web fonts can convey different messages to users.

Thin sans serif fonts like the above (District Thin) give a calm and serious tone. They are great for businesses as they give off a feeling of class and professionalism.

A serif font above (Orchid) is bold and follows the style of olden calligraphy with a modernistic touch.  This font is perfect for titles and headings and complements sites that follow vintage themes.

 

Load Times

With increasing loading speeds, a site that takes time to load its text might turn impatient users off. Choosing multiple fonts will take up time so just stick to font types that are actually necessary to your site. For each typeface, pick only the style that you intend to use. Putting in a font multiple styles (eg. 400, 700 800) would slow down loading time.

 

Conclusion

Choosing web fonts are no easy task. Picking a good combination could create a harmonious website that is pleasing to the users’ eyes. Referencing other websites for inspirations and ideas is a good way to start.

 

References:

http://designshack.net/articles/typography/7-tips-for-choosing-the-best-web-font-for-your-design/

http://www.smashingmagazine.com/2014/12/the-good-the-bad-and-the-great-examples-of-web-typography/

http://www.smashingmagazine.com/2007/11/40-excellent-freefonts-for-professional-design/

https://www.pixellogo.com/sites/www.pixellogo.com/files/wp-content/uploads/2014/10/Orchid-558×580.png

 

Advertisements

Typography and Web Accessibility

As a web developer, one of the core concepts of HTML is that the many markup tags allow various readers to process and parse your website. Websites are heavily dependent on the use of text and as such, typography can not be taken lightly, lest the user is turned off from browsing your website.

Keep text as text

Keeping as much of the text as text allows for user agents, even the non-typical ones, to be able to parse the text properly, adapting it to whatever analog format is chosen as the output. This also allows for readers which use subpixel rendering and allows for browsers to be able to magnify text accurately to increase readability, which it may to be able to do accurately if the text was stored as a image or video.

Subpixel Rendering
https://upload.wikimedia.org/wikipedia/commons/5/57/Subpixel-rendering-RGB.png

Choose the appropriate fonts and font size

Determining the target audience of your website can count greatly toward your choice of fonts and font size. For example, a website geared towards dyslexic readers may choose to use a font designed especially for dyslexia.

Dyxlexie Font
OpenDylexic Font

The purpose of the text also comes into play, be it for casual browsing or engaged reading. When reading, people use their central vision to focus on a word, while using their peripheral vision to find the next word to focus on.

Courtesy of http://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

This leads to the need to grouping sentences closely enough for a smooth reading experience, invoking the Gestalt theory of common fate.Choosing the proper amount of characters in a line ensures casual readers don’t just skim the left edge of text and engaged readers don’t read the same line of text twice.

Fonts can help set the tone of a website as well.

https://www.operadeparis.fr/en

Serif fonts tend to invoke a traditional print image, while sans-serif fonts are generally considered clean and modern.

http://thisisarc.com/
http://thisisarc.com/

Choose the appropriate line height

http://www.pearsonified.com/2011/12/golden-ratio-typography.php
http://www.pearsonified.com/2011/12/golden-ratio-typography.php

According to the W3C accessibility guidelines for visual presentation “Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.”

However, setting such a large amount of space may actually make it more difficult for a user to read through the passage. The more common line height of 1.2ems (a mea­sure of type equiv­a­lent to the the let­ter height or point size of a typeface) is chosen for more websites as a compromise. However, the line length of a passage should be closely related to the line height as well.

In conclusion, typography can impact the readability, accessibility and the feel of your website. A general rule of thumb is a passage should be roughly 30ems and the line-height be set at 1.2ems.

A more in-depth reading of the relationship between line-height, line-spacing, font size and how the golden ratio comes into play is available at: http://www.pearsonified.com/2011/12/golden-ratio-typography.php

http://www.pearsonified.com/2011/12/golden-ratio-typography.php

Typography: Combining Types

[INFOGRAPHIC]: The 10 Commandments of Typography
Courtesy of: Designmantic.com

Before we even begin to build a set of fonts for a web project, we need to know the different classifications of typefaces. They can be classified into 4 broad categories:

Serif
While similar to sans serif, it is made distinct from sans serif by “extensions” to its finishing. These typefaces are more suited for print due to its bold and strong quality.

Sans serif
Sans serif typefaces usually does better on screen media. Its clean simple lines creates stable and serious copy.

Decorative
Decorative typeface is a novelty type. Different fonts can create different moods in design, with a classy and elegant quality. They are generally reserved for specific purposes, most effective in headlines at larger sizes.

Script
Typefaces in this category can be a cursive or handwriting types. Characteristically soft, yet intense, script types can range from formal to whimsical. They should never be used in all caps, and are best for announcements, advertisements etc.

Combination 1 — sans + serif
For a classic combination: mix a serif type, with a sans serif type, usually, with serif types in body text, sans serif in headings.

Combination 2 — same yet different
Even when working with just 2 types, a distinct visual hierarchy can be established. Plan a strict hierarchy, and follow it. It helps when the types have multiple fonts and styles to choose from.

Combination 3 — insider knowledge
It pays to know the person behind the types! Typefaces from the same creator are likely to have similar aesthetics, which gives them a certain coherence, even if they were not made to complement each other.

Combination 4 — x-heights
Choose types with the same x-heights. Noticeably different x-heights causes undue stress to your readers, taking their attention away from the content, and focus on the type instead.

Even so, we should always take into consideration the personality of the fonts. While the combinations above work, they only work if the personality of each type do not clash. On the other hand, type should also have enough contrast to avoid them bleeding together into a chunk of text: use it to guide your reader’s eyes through the passage.

At the end of the day, the above are just tips that may help you decide when in a creative rut. It also pays to scrutinise the content being displayed. The types should be paired or grouped together to reflect the subject matter. When the above principles seem more hindrance than help, overrule.


Piktochart: 4 Things You Need to Know to Pair Fonts Well
Adobe: Typography Basics – Typeface Classifications
Smashing Magazine: Best practices of combining typefaces
Adobe: 8 Tips for Combining Typefaces

Achieving Good Typography

It has been said that 90% of design is typography. This means that no matter how well balanced or beautiful a layout is, poor marriage of font types can spoil the design of a website. Good web design doesn’t happen by chance and neither does good font marriage.

Before we proceed with the 4 useful tips to achieve good typography, below is a glossary of terms to help with the design lingo.

Serif- Type with decorative finishing (e.g. Times New Roman)

Sans Serif- Geometric. Easy to read type with no attachments (e.g. Roboto)

Script- Curly fonts which link together letter to letter (e.g. Parisienne)

Hierarchy- The balance of type (i.e. Order of what you read by importance)

Here are the 4 useful tips to achieve Good Typography:

1.Use of lines

01-lines

Source: https://www.behance.net/gallery/18781465/Samsung-Club-des-Chefs

Sans serif fonts offer strong geometric lines and are great to use over images, as they help with legibility.

Applying a bold font can complement a short word nicely. When used in the centre, it will also anchor your design. Balance hierarchy by ensuring your focal words are prominent. Use a bigger font size for the word(s) which you want to draw attention to.

2.Use of contrast

02

Source: https://dribbble.com/shots/2182766-Buck-Wild-Concept/attachments/402487

Round and narrow typefaces offset nicely against each other. Remember to appropriately space out the narrow wording to give it extra room to breathe.

Applying a solid frame around your text will help to contain it. For consistency, ensure that the weight of the box corresponds with the thickness of the typeface you use.

3.Legibility

03

Source: http://arcticwild.com/

Take an elegant approach to your design by using a serif font.

When using text over an image, apply a transparent black overlay on the image so that the text can be read. Also, make sure that the text is placed in a clear space on the image so that the text would not be invaded by the feature in the image.

4. Take advantage of descenders

04

Source: http://laurenledbetter.com/delight/

If your text offers a descender (‘g’), take advantage of it. Creep a word underneath (‘college ministries’) aligning it with the ending stroke of the word above.

Apply an element such as a swirl behind the text so as to create a radial effect, helping to draw focus on the text. The swirl would also help to bring the attention away from the descender.

Conclusion

Good typography is achieved by how well a message is supported and reinforced. Understanding the goals of your text is important, so that you can employ the correct elements and typefaces in order to convey your message across.

References

http://www.creativebloq.com/typography/pro-tips-flawless-typography-5132670

https://blog.kissmetrics.com/typography-guide/

http://practicaltypography.com/what-is-good-typography.html

Web Accessibility

 

Web accessibility refers to removing barriers that prevent access and interaction to the website. When the sites are correctly designed and developed, all users, including peoples with disabilities, have equal access to the website information.


#Visual

Enlargeable Image and Text

When the website is coded with enlargeable text and images, it allows users with poor eyesight to read and understand the content. To ensures the color blind users will notice them, links should be underlined as well as colored.

Textual equivalents provided for images,  text-to-speech software or/and text-to-Braille hardware can helps people with visual impairment to effectively and efficiently interact with the website.


#Mobility

4027567883_c7589ba68f

Website should be design where the clickable links and areas are large, this help people with difficulty or inability to use hand, muscle slowness and control. Pages can be coded that allows users to navigate using keyboard alone, so users who cannot control mouse with precision ,such as Parkinson’s Disease, can  navigate the sites.


#Auditory

ERADE_Website_0304_04Responsive_SetHome_SRCS5_0514

To help individuals who have hearing impairments, websites with closed captioned videos or sign language version will enable the users to understand and access the sites.


#Seizure

SEIZURE

main-qimg-227ec5786a0d046569093363af241f4b

Website should avoid using flashing effect or made optional, risk of photo epileptic seizures can be caused by visual strobe or flashing effects.


#Cognitive/Intellectual

Accessibility-Featurette

To help people with developmental disabilities or learning disabilities, content should be written in plain language and illustrated with instructional diagrams and animations. This will allows all of these users to accommodate without decreasing the usability of the site for non-disabled users.


Ultimately, million of people with disabilities are affected with the use of the web, most of the web sites have accessibility barriers that make it difficult for them to access. A good website should  made available to them so more people can contribute to the web more effectively.

Web accessibility not only benefit people with disabilities, but also to people without. When designing a website, it should be flexible to meet different user needs, preferences and situations. In certain situation like slow internet connection, people with temporary disabilities or aging population, key principle and guidlines of Web Accessibility can be followed.

Web accessibility is essential in many aspects of life, it provides equal access and equal opportunity to people with disabilities and help them to actively participate in the society. Web technology also offer many possibility  for people with disabilities to access information and interaction.

There are  evaluating tools to evaluate the accessibility of a web site. However, no tool alone can determine if the site meets the criteria and guidelines. We have to use the knowledge of humans to determine if a site is accessible.

References:

WebAIM- web accessibility in mind.

 http://webaim.org/intro/

Cowdenhill Web design.

http://cowdenhill.com/

Web Accessibility for the Deaf and Hard of Hearing

http://www.web-accessibility.org.uk/web-accessibility-for-the-deaf-and-hard-of-hearing.html

Microsoft Accessibility.

http://www.microsoft.com/enable/

Web Accessibility

Web Accessibility

The basics of web accessibilities is designed to let all people use web given different conditions, which means people with disabilities can also perceive, understand, navigate, and interact with the web page that will allow them to contribute and make improvement to the web itself.

Web are meant to removes barriers to communication and interaction that many people face in the physical world. But at the same time, badly designed web pages, technologies and tools could also create a barrier that prevent people from using it.

With that in mind, so how then do we create a web that is accessible to all?

Evaluating Accessibility

Evaluating all the accessibility early and thoroughly during the initial developmental phrase is easier to address than the final phrase.

 

Some of the important points to take note of:

#1 Alternative Text for Images

Images used should include equivalent alternative text in the markup/code. If somehow the image could not be shown on the page and alt text isn’t provided for, the image information will be inaccessible, an example would be when a user who have issues with visual, and need to use a screen reader (JAWS) software that reads aloud the information on a page, including the alt text for the image, and if there isn’t any text on alt text, that particular user will have no idea what the content is all about.

Jaws

alt text

#2 Keyboard Input

Assistive Technologies that mimic the keyboard, an example is speech to text conversion. For user who had issue with movements. Some of your site users don’t have access to a mouse when browsing the internet. Navigating your website using only tab, shift-tab, and the returns keys.

voice search

keyboard

#3 Transcript for Podcasts

Providing a text Transcript make audio information accessible to people who have hearing issues.

podcast

A short video for experiences of students with disabilities

A longer version

Conclusion

The web offers many opportunities to people with disabilities that are unavailable through any other medium. It offers independence and freedom. However, if a web site is not created with web accessibility in mind, it may exclude a segment of the population that stands to gain the most from the internet. Most people do not intend to exclude people with disabilities. As organizations and designers become aware of and implement accessibility, they will ensure that their content can be accessed by a broader population.

REFERENCES

https://www.youtube.com/watch?t=232&v=yx7hdQqf8lE

https://en.wikipedia.org/wiki/Wikipedia:Alternative_text_for_images

https://www.w3.org/WAI/intro/accessibility.php

http://www.w3.org/standards/webdesign/accessibility

Web Accessibility

Introduction

Most people today cannot live without internet. Now, the whole world can be “at your fingertips”. Here I will help you to understand how the people with disabilities accesses the web, the problems they faced and what we can do to make it more accessible for them.

What is Web Accessibility?

Web accessibility means that the web allows the people with disabilities to use. More importantly to allow people with disabilities to observe, comprehend, navigate and also interact with the web and also to make contributions to the web.

At the moment most websites and software have accessibility issues making it difficult or even impossible for people with disability to use. As the growing of more and more accessible websites and software made available, they are able to use the web more effectively.

Web accessibility not only benefit people with disabilities but also people without. One of the key principle of web accessibility is to design the website or software that will be flexible in meeting the different requirements, preferences and conditions of the user. This flexibility will also benefit people without disabilities during such circumstances, such as people with abilities change during aging or people with slow internet connections.

Why Web Accessibility is Important?

Aspects of Life:

  1. Education
  2. Employment
  3. Government
  4. Commerce
  5. Health care
  6. Recreation
  7. Etc.

Web accessibility is to ensure equal access and equal opportunity for people with or without disabilities. Also providing possibility of unprecedented access to information and interaction such as the accessibility issues to printing, audio and also visual media allowing them to be more easily overcome through these technologies.

Making the Web Accessible

Web accessibility have always been the responsibility for web developers. Web software played an important role as well as they need to help the developers to produce and assess accessible websites.

Guidelines and techniques that define accessibility solutions for software and developers are developed by the Web Accessibility Initiative. These guidelines are the basis of the international standards.

Making your Website Accessible

It can be either simple or complex in making a website accessible as it is dependent on many aspects such as the different types of content, the magnitude and difficulty of the site and the development tools and setting.

Many accessibility features will be easily implemented if planning started before the development and design. Significant effort are required when fixing an inaccessible website, especially those that were not programmed properly or contain certain types of content such as multimedia.

Evaluating the Accessibility of a Website

Evaluating accessibility as early as possible and also during the developmental process will aid in the development or redesigning of a site. Simple techniques like changing the settings in a web browser can decide whether the web page met any of the accessibility guidelines. It will be much more complex when doing a complete evaluation to conclude if the site met all accessibility guidelines.

Evaluation tools have been development to aid evaluation but none standalone tool can determine if a site have met all guidelines. Human evaluation still plays a crucial role in this.

Reference

  1. https://en.wikipedia.org/wiki/Web_accessibility
  2. http://webaim.org/intro/
  3. https://www.w3.org/WAI/intro/accessibility.php
  4. http://www.w3.org/standards/webdesign/accessibility
  5. http://www.iacentre.org.sg/web-accessibility-training/