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.


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.



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.




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

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

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.

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

Choose the appropriate line height

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:

Typography: Combining Types

[INFOGRAPHIC]: The 10 Commandments of Typography
Courtesy of:

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:

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 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.

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



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



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.




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



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.


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.


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.


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.



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.



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.




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



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.


WebAIM- web accessibility in mind.

Cowdenhill Web design.

Web Accessibility for the Deaf and Hard of Hearing

Microsoft Accessibility.

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.


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


#3 Transcript for Podcasts

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


A short video for experiences of students with disabilities

A longer version


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.


Web Accessibility


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.




Let’s put aside Front-End Frameworks for a while and look at MVC and CMS.

What is MVC?

MVC stands for Model View Controller. It’s definition can be splitted into this manner:


Models represent knowledge. A model could be a single object, or it could be some structure of objects.

The Model’s job is to represent the problem domain, maintain state, and provide methods for accessing and mutating the state of the application.


A view is a (visual) representation of its model. It would ordinarily highlight certain attributes of the model and suppress others. It is thus acting as a presentation filter.

The View’s job is to translate data into a visual rendering for response to the Client (ie. web browser or other consumer). The data will be supplied primarily by the Controller; however, the View may also have a helper that can retrieve data that is associated with the rendering and not necessarily with the current request.


A controller is the link between a user and the system. It provides the user with input by arranging for relevant views to present themselves in appropriate places on the screen. It provides means for user output by presenting the user with menus or other means of giving commands and data. The controller receives such user output, translates it into the appropriate messages and pass these messages on to one or more of the views.

The essence of MVC can be depicted in this manner:


M is the program, V is the design, and C is similar to what the user sees from his end of the browser.

What is CMS?

CMS stands for Content Management System. A content management system is software that keeps track of every piece of content on your Web site, much like your local public library keeps track of books and stores them. Content can be simple text, photos, music, video, documents, or just about anything you can think of. A major advantage of using a CMS is that it requires almost no technical skill or knowledge to manage. Since the CMS manages all your content, you don’t have to.

Examples of CMSes are WordPress, Blogger, Tumblr and Joomla!.


So, say I’m going to make a website, which should I use?

Here’s a quick comparison of CMS vs. MVC and frameworks generally.

The basics:
• CMS gives you nice basic functionality; MVC gives you nice development tools.
• CMS is good for having many websites with typical functionality; MVC is good for a site with unique functionality.
• With CMS, there’s no need to reinvent commonly used stuff such as breadcrumbs, easy media files, menu management, etc. But with MVC you can easily add that stuff using a CMS based on Symfony.

Customising: hard vs. easy!
• CMS restricts what you can do; there are no restrictions with MVC.
• In CMS, changing the code can be hard and, worse, risky because you might lose compatibility with new versions of the CMS or other plugins. In MVC, doing this is easy, because the core doesn’t depend on the third-party solutions.
• CMS: unlike the core, modules and plugins can contain hard-to-fix bugs. With MVC, all the code is easy to control.

Checking and fixing code, the hard way or the easy way:
• With CMS it’s impossible to use good programming practices such as automated tests and refactoring. Not a problem with MVC.
• It’s also impossible to use coding standards to maintain code quality with CMS; they’re often used with MVC.
• With CMS, if a performance problem is in the core, you can’t fix it. With MVC, you can fix all performance issues.

• CMS: expensive to set up and maintain. MVC: expensive to set up but not in the long run.

In conclusion, CMS are good for simple websites, when the site is not going to be running for a long time or if you do not require much designing. They are well-received if what you want is a ready-made application. However, if you have plans to expand your site in the long run, it might be better to go for MVC.

Guide to choosing a suitable Web Design Framework

Understanding Framework


A web design framework is defined as a “package made up of a structure of files and folders of standardised code (HTML, CSS, JS documents etc.)”. As with all kinds of standardisation, the objective of a framework is to provide compatibility and reusability. Developers can leverage on existing framework rather than coding from line zero for every new project. However, there are different kinds of frameworks available and how should we know which is suitable for us?


Knowing what you want


Different framework has different advantages and only by knowing what you need, will you be able to tap into the benefits of different frameworks. Listed are some of the pointers that you may want to keep in mind when choosing a framework:

1. Ease of understanding

If you are a beginner in web development, a framework that is simple in learning should be a priority. The framework should be relatively light-weight, has a shallow learning curve and very user friendly.

2. Volume of external resources

Taking up a new framework can feel unfamiliar sometimes. But with the availability of external resources such as tutorials, blogs and forums providing guides, it can make a huge difference in using the framework.

3. Configuration options

Depending on your requirements, you may need a framework that offers more widgets and interface options. However not all frameworks provide you with a comprehensive list of configuration. Therefore, knowing what your website needs is essential in choosing the right framework.

4. Browser support

The more the merrier. Being able to support more browsers is definitely an advantage. However, there are certain frameworks with properties and elements which does not support IE8. A valuable point to take note before choosing your suitable framework!

5. Long term support

Some frameworks stop updating and support services after a period. Hence it is always advisable to go for frameworks that provides guarantees and are supported by companies that offers other professional products in the market.





5 Useful Websites to learn Bootstrap

Bootstrap is an intuitive and popular framework that is free with an open-source collection of tools for users to develop faster and responsive web pages easily with high flexibility.

Advantages of Bootstrap

  1. Save time
  2. Have responsive designs and features
  3. Consistent design across all web pages
  4. Easy to use so anyone with basic coding knowledge can use
  5. Compatible with modern browsers
  6. Free to download and use

5 Useful Websites

  • Tutorial Republic
    • Tutorial Republic provides a very detailed step-by-step tutorial for users to learn how to use and get started with Bootstrap. I think this is a very good website to follow as they explain very clearly what each function is and they give examples for users to follow, providing a very conducive learning process.
    • They have many different tutorials that users can choose from to pace their own learning and apply to the website that they are developing.

Screen Shot 2015-10-09 at 5.28.03 am

Figure 1: Explaining what you can do with a grid system

Screen Shot 2015-10-09 at 5.28.10 am

Figure 2: Providing examples for users to follow

    • consists of not only BootStrap tutorials but also tutorials for HTML/CSS, JavaScript, SQL, PHP, XML and many more. It is a very useful website for web developers to learn coding from as they contain many various examples that users can leverage and learn from.
    • w3schools also provides Quiz Test which enables users to test if they really understood what they have learnt.
    • They also provide various Bootstrap references for CSS classes, components and JavaScript plugins which enables users to be able to see how everything comes together.Screen Shot 2015-10-09 at 5.40.40 am

Figure 3: w3schools providing quiz and references

    • is a very useful site as well because they provide basic templates and examples that users can download from to suit their need.
    • They give very clear instructions on how to download and use the bootstrap as well, which is helpful to web developers of any skill level.
    • They even provide images of how using various frameworks will look like which gives the user a much better idea of what they are learning.
    • They have a blog, The Official Bootstrap Blog, to engage with their users and share useful tips and information of bootstrap with everyone.

Screen Shot 2015-10-09 at 5.49.03 am

Figure 4: Pictures of how webpages will look like with various themes

  • codecademy
    • codecademy is a useful website to learn bootstrap as well because they enable users to save and submit codes LIVE on their website where they can view how the webpage looks like with various codes. It speeds up the learning process and provides a very hands-on and interactive way of learning how to code.
    • They also give very clear instructions at the side to explain to users what each code means and how it is used.
    • CodeCademy also has a forum as well where there is a community to help and guide users that are new to Bootstrap

Screen Shot 2015-10-09 at 6.01.36 am

Figure 5: Codecademy providing clear instructions on the left, LIVE edits of codes in the center and PREVIEW of webpage on the right.

  • TermTreeHouse
    • Very detailed courses and workshops on Bootstrap that users can learn from
    • They have step by step video tutorials along with the video transcripts which may be very helpful for visual and audio learners.
    • They even indicate the amount of time needed to learn various skills which enables users to pace their own learning effectively.
    • They have different types of learning platforms like workshops that provides a more rounded learning and courses that teaches specific skills/functions and they cover a wide range of topics as well, from design to Game to iOS and many more.

Screen Shot 2015-10-09 at 6.08.34 am

Figure 6: Various video courses and workshops offered for Boostrap

Screen Shot 2015-10-09 at 6.09.01 am

Figure 7: Detailed step by step video transcript for each tutorial