SEO Basics

What is SEO?

Search Engine Optimization (SEO) is a technique which pushes our website closer to the top of the search rankings in the SERP (Search Engine Result Page), by entering our search queries in the major search engines such as  Google, Bing, and Yahoo!. The higher the search rankings, the greater the chance that that site will be visited by a user.

SEO Success Factors

1) URLs

The URL is what people will type in to their web browser to get to the page, or what the search engine displays as the destination. It should be related to the page’s contents. Some important factors in optimizing the URL consists of the following:

-Keywords: When creating the file name for each page, we have to remember to focus on the keywords. It is also a good practice to use hyphens (-) not underscores (_) to separate words in the URL. Using underscores is treated by Google as one single word, e.g. one_single_word is onesingleword to Google.
Capture1

Shorter URL: A short URL can be displayed completely on the search engine and social media networks. Avoid having many levels of subdirectories, in many cases the best optimized URL has one subdirectory. Create short concise URLs for each page.

2) Titles

The title tag is located in the <head> of the webpage. Title tags are also part of what makes people decide whether to visit your site when it shows up in the search results. The title tag should contain important keywords to help the search engine determine what the page is about. The title tag looks like this in HTML code:

<title>Title Here </title>

Capture2

3) Meta Description

The description is a short paragraph that describes the content of a page. It is located in the <head> of the webpage. Descriptions should be unique to the page it is on, written in a way to compel a user to visit the page and created for the user, not the search engine. The meta description is used by the search engine in the results page appearing underneath the title and URL.

Capture3

4) Links

There are two types of links. Internal and external linking. Internal linking is a very important part of SEO. It is beneficial to the user allowing them to stay on your website to find out more information. It is beneficial to search engines by helping pass page rank throughout the site and assisting them in crawling the website. External linking is very similar to internal linking except it takes a user off of the site and sends them to another site.

5) Mobile Friendly

A responsive website makes it easier for your site to be found on Google as your site will rank higher than those non-responsive website on mobile search results. However, the search results ranking will not be affected on our computer.

Capture4

Responsive website consists of a mix of flexible grids and layouts, images and the use of CSS media queries.

Conclusion

In today’s competitive market, SEO is an important strategy that we should be aware of. As a form of internet marketing strategy, it can help to drive more traffic to our site, and allows our site to be placed on top of our competitors’ website. On top of that, it can be extremely useful for any business growth. It is considered to be the most cost-effective way to bring in new customers to any businesses.

References

[1] https://www.reliablesoft.net/what-is-search-engine-optimization-and-why-is-it-important/

[2] http://firstviewonline.com/why-seo-is-important-for-businesses/

[3] http://www.practicalecommerce.com/articles/83483-SEO-Google-to-Make-Mobile-[4] friendly-a-Ranking-Signal

[4] https://moz.com/blog/15-seo-best-practices-for-structuring-urls

Search Engine Optimization

 

What is SEO?

“SEO stands for “search engine optimization”. It is a process of getting traffic from “free”, “organic”, “editorial” or “natural” search results on search engines.

All major search engines such as Google, Bing and Yahoo have primary search results, where web pages and other content such as videos or local listings are shown and ranked based on what the search engine considers most relevant to users. Payment isn’t involved, as it is with paid search ads.”[1]

To sum up, search engine collects information from every page on the web, so they can help people to find exactly what they are looking for.

In every search engine, it has it owns recipe and it calls algorithm for turning information into relevant search result and this algorithm will change every time. Therefore, when you do a search, you are not actually searching the web, you are searching index of the web.

What is an index page? “Index pages are collections of other pages, and in some templates, have a unique URL structure that includes a #.”[2]


 

How SEO works?

Search Engines use a special formula to analyses huge amounts of data about all the web pages they can find in order to determine which web pages they should present when someone searches for a keyword phrase, and in what order they should present them.[3]

If you own a website and is not up to the standard of SEO Success factors, it will affect your ranking in search result. People can be easily look out for you if your pages have higher rankings and the key to higher ranking is making sure your website has this points:

  • Words Matter
    • Search engine read every word on the web. It will narrow down the search results that related to the word that user has key in.
  • Titles Matter
    • Search engines pay a a lot attention on the page title because page title is a summaries of the page like book title.
    • Example of the code title: <title> ……</title>
  • Links Matter
    • A web page with a lot of link is coming to it can look good to search engine. But some people try to fool the search engine by creating or buying bogus links all over the web that point to their own webpage. Usually search engines can detect when a site has a lot of them and the account for it by giving links from trustworthy sites
  • Words in Links
    • If a lot of webpage creates a word link that link to your site, your website will rank well. For example, “Apple sell magic mouse” and the words magic mouse is linked. Search engines can establish that apple.com.sg is related to the word magic mouse. This way when someone searches for magic mouse, the apple website will rank well.

This is what we called Search Engine Optimization or SEO.

There are two primary factors that are the foundation for successful search page result. There are ON-THE-PAGE FACTOR/Onsite SEO and OFF-THE-PAGE FACTOR/Offsite SEO.

 

ON-THE-PAGE FACTOR/Onsite SEO

Onsite SEO is things you can control or everything you can do on your website to help boost your organic search performance.

Explanation for technical term:

Organic search results are listings on search engine results pages that appear because of their relevance to the search terms, as opposed to their being advertisements. In contrast, non-organic search results may include pay advertising.[4]

This are simple checklist that will bring in more search engine traffic from every piece of content that you publish :

on_page_SEO_infographic_large

[5]

OFF-THE-PAGE FACTOR/Offsite SEO

Offsite SEO is a strategy outside your website designed to draw attention to your site. For example, you will be working at other online pages to make your website well know among the web. These tactics primarily center on posting links to your site through various methods such as:

  • Writing articles for other sites
  • Blog comments
  • Social networks

So which strategy is more important to enhance your website ranking?

Conclusion

In conclusion, use both on site and off site search SEO to ensure that we get the best of both of the major SEO components.

 

Reference :

[1] http://searchengineland.com/guide/what-is-seo

[2] https://support.squarespace.com/hc/en-us/articles/205814818-Index-Page-SEO-and-social-sharing

[3] http://www.seoworks.com/how-seo-works/

[4] https://en.wikipedia.org/wiki/Organic_search

[5] http://backlinko.com/on-page-seo?wide=1

 

SEO : Search Engine Optimization

Search Engine Optimization (SEO) is a technique that helps the search engine find and rank your site at the top of search engine results in responses to a search query. Without SEO, it is hard to achieve the high ranking in search engines. As the internet changes really fast and the site will be up against stiff competition. A good SEO site will likely see a gain in traffic to their site overtime leading to a gain in customers and generate profit.

 

There are two categories of SEO: On-Page and Off-Page

On-Page refers to the items that you can control on your webpage like the layout, internal linking, content, meta tag, keywords, etc.

 

Off-Page refers to items that are not being controlled by any coding on your webpage, usually related to social media and advertising like quality of links, popularity of link, page rank, etc.

 

Here are some On-Page factors to take note to help increase a site’s SEO

  1. Keywords

The key in ensuring your page is SEO friendly, as it helps the search engine determine your content. Therefore it is important to research and choose relevent keywords and phrases that are relevent to what your website is about. Do ensure that you do not use the keywords and phrases excessively, keeping keyword density about 2-5%. Once determined by search engines will result in your site being filtered out.

 

To avoid over using repetative keywords and phrases, using of synonyms which help improve the relevancy of the site’s content. With a variety of meaning related words increases the value of the website.

Example of a website that uses sufficent keywords:

 

  1. Page titles

Website title is one of the most important factor for SEO. The pages of the website should have its own unique title that contants the keywords chosen in relation to your website.

 

  1. Image

Images for website should have titles which are relevent to your keywords to allow people to find your website when searching on Google Images. To increase SEO, alt text and description can be included for images.

 

  1. Meta Tags

Meta tags is a set of keywords that can be included for each page. The keywords should be relevent to the content that has been researched on.

Screen Shot 2015-11-03 at 5.05.07 pm

https://support.google.com/webmasters/answer/79812?hl=enSample of meta tag that Google can understand

 

  1. Meta Descriptions

Meta Descriptions tend to be forgotten by people. However it is important to include it, as it is another place to include relevent keywords for your content and are used within the search results when the webpages are listed. Below is an example of good meta description:

Screen Shot 2015-11-03 at 5.05.00 pm

 

  1. URL Structure

URL for webpages should be search engine friendly, as it will allow Google’s “spiders” to crawl better. Shorter URL tend to perform better in search engine results.

 

Besides that, there keywords should be taken into consideration. The location of keywords makes a significant difference, for a link like this site.com/keyword performs better in comparison to site.com/%asdf_qwerty/subfolder/keyword.

 

  1. Body Tags

For body content, to make it easy for people to read we tend to use tags like H1, H2, H3, H4, etc. These tags can also help to increase SEO as well. With the use of these tags, the search engines are able to determine what is important in the content. Therefore, headers that contains more keywords are more useful. Thus, it is important to note the pirority of the tags.

 

Example of a site that uses good body tag:

Screen Shot 2015-11-03 at 5.03.44 pm

http://www.hubspot.com/products/salesforce

 

  1. Internal Linkin

Internal linking is useful for SEO as it makes it easier for not only the users to navigate around but for “spiders” to navigate around.

 

Besides On-Page factors, it is important to take not of the Off-Page factors. To implement Off-Page factors, creating social media accounts is an essential. It is a way to help to maintain the site’s reputation online.

 

Gaining links from creditable resources reamains as one of the critical factor in creating a strong SEO site. With Google being able to detect unnatural links, links with creaditablity plays an important role. Hence, one can acquire such links from suppliers, related companies, industry contacts, etc.

 

Blogging can also can promote the website by writing a blog for it that includes unique content, as well as promote the blog in blog directories and blog search engines.

 

It is also important to take note of reviews online, as postivite reviews can help instil confidence, assist conversion and contibute to ranking for local search.

 

Conclusion, the following factors mentioned aboves can drastically improve a website’s SEO when used properly. If over optimized, the following factors will result in the website being penalized like the links of the site being removed for the search engine index.

 

References:

Claire Roach (2014), What is SEO and do I need it?

http://hubpages.com/technology/Wha-is-SEO-and-do-I-need-it

 

Matt Smith, 8 Great On-Page SEO Techniques

http://onlineincometeacher.com/traffic/on-page-seo-techniques

 

Megan Marrs (2012), The Dangers of SEO Keyword Stuffing

http://www.wordstream.com/blog/ws/2012/03/21/dangers-of-keyword-stuffing

 

Chris Ainsworth (2015), The Top 5 Off-Page Optimisation Factors

http://www.searchenginepeople.com/blog/the-top-5-off-page-optimisation-factors.html

 

Duo (2014), 6 Examples of Strong Homepage SEO Optimization

http://thoughts.duoconsulting.com/blog/6-examples-strong-homepage-seo-optimization

SEO Architecture

Definition

Search Engine Optimization is the process of affecting the visibility of a website or a web page in a search engine’s search results. This is done by optimizing the web pages in order to get higher search engine rankings.

Architecture

  1. Crawling VS Indexing

Crawling is when Google visits the unique links to track your web page, which is done by the Google crawler. These Google crawlers use the ‘site maps’ in the web pages (in the footer) to follow other valid links in the linked page and crawl deep into your site. However, not all links are crawl-able such as when the link coding is in the JavaScript format and when it is an orphaned link (no page is linked to it).

Indexing is when the crawling process has been done and the results are being put on Google’s index. However, not all crawled links are being indexed. This depends on the Meta tag used for the pages. Duplicating content from an indexed page may not be indexed.

As an example, <meta name=”robots” content=”noindex” />. No index means that the page will not be added in the Web Search. It is recommended to only let the crucial part of your web page to be indexed and leave out unnecessary pages such as Archive and Categories. As an example, WordPress posts such as this are indexable.

Crawling and indexing both provide users with a ranking of websites that are most relevant to their searches.

  1. Keywords in URLs

It is recommended for the web pages to have shorter and proper file names such as keywords in the URLS. This is to help indicate to those clicking on the URL on social media, will be getting what they expect. Options such as keeping the page title and the article headline in the URL, fewer folders are generally better as it helps in the clarity of the URL.

Since URLs are being copy and pasted regularly, the URL itself will serve as an anchor text (a clickable text in a hyperlink) which is a powerful input for rankings.

url

  1. Site Speed

Faster internet speed has now made us impatient users, especially when on our mobile devices. Sites that require minimal loading time gets a small ranking advantage over other slower sites.

Generally, lower file size will result in a faster loading time. Optimization of codes can also help in increasing the page speed, by removing comments and unused codes. Google recommends a YUI Compressor for both CSS and JavaScript.

However, speed it not a guaranteed success to be on the top of search results. Speed is a minor factor that impacts 0.01 of the queries according to Google.

  1. Mobile Friendly

A non-mobile friendly or responsive site will rank lower in Google’s mobile search results but it does not affect the searched conducted on a desktop or a laptop computer. Responsive sites uses CSS3 Media Queries to serve the same content but on a more flexible design to adapt to the user’s screen size.

mobile

Sample codes:

@media screen and (max-width: 420px) {
.class {
[styles for this class here]
}
}

<link href=”mobile.css” type=”text/css” media=”screen and (max-device-width: 480px)” rel=”stylesheet”/>

Conclusion

In conclusion, all these factors play an important part in helping to increase the page ranking in the search results. However, these ranking factors are not a recipe but just a set guidelines and practices that can lead to the success with both search engines and searchers.

References

http://www.seo-hongkong.com/blog/crawling-vs-indexing-whats-the-difference-741.html

http://searchengineland.com/guide/seo/site-architecture-search-engine-ranking

https://moz.com/blog/15-seo-best-practices-for-structuring-urls

CopyRight

Copyright infringement is the use of works protected by copyright law without permission

1.Cariou vs. Prince

2

Richard Prince is famous for transforming the work of others to create new meaning in his own work. A French photographer Patrick use 41 images of Richard Prince, claiming fair use that he created new meaning out of the photographs. The first outcome of the case was in favour for Cariou in 2011, claiming the changes made to Cariou’s photographs weren’t significant enough to constitute a change in meaning, fair use.

——————————- The Copyright Permission Request Form Letter——————————-

To:____Owner’s Name____
Email:____Owner’s Email Address____

I, ____Your Name____, request your permission to reprint the following items (described below) on my Web page:
________Your URL________. I intend to use the copy(s) for the following:

__ Personal use
__ Research
__ Commercial use
__ Reporting __ Criticism or Review
__ Education


A patent is a right granted to the owner of an invention that prevents others from making, using, importing or selling the invention without his permission.

2.Microsoft get 10000th patents

9

The company gives workers up to $1,500 each time they apply for a patent on the invention. Once a patent is granted, Microsoft workers get a plaque that includes a copy of the first page of the patent application. It now has more than 100 people in its patent group

3.Apple vs. Samsung patent trial

5

Apple filed suit against Samsung, accusing it of infringing several patents. Samsung then filed counterclaims against Apple. There were 5 patent issue held by Apple and 2 held by Samsung. One of it is Slide unlock for Apple and covers video transmission functionality for Samsung. In the end, both companies were found guilty of infringing some of each other’s patents and ordered to pay damages.

4.Apple vs. Creative

7

Creative sued Apple in May, claiming the iPod maker was infringing on its patents. The outcome was Apple Computer and Creative Technology settle their legal dispute over music player patents for $100 million, paid by Apple. Creative grants Apple a license for the user interface used in Zen music players.

Trademark is a recognizable sign which identifies products or services from those of others.

5.McCurry Restaurant vs. McDonald’s Corporation10

The outcome was that McCurry restaurant found no guilty in associating with the MacDonald trademark as McCurry Restaurant does not label its food items on the menu with the prefix “Mc.”

References:

  1. https://99designs.com/designer-blog/2013/04/19/5-famous-copyright-infringement-cases/
  2. http://www.complex.com/pop-culture/2013/04/50-things-you-didnt-know-about-microsoft/patent-count
  3. http://www.cnet.com/news/apple-v-samsung-patent-trial-recap-how-it-all-turned-out-faq/
  4. http://www.cnet.com/news/apple-settles-with-creative-for-100-million-1/
  5. http://www.hg.org/article.asp?id=7257

 

 

SEO Basics

What is SEO?

SEO (Search Engine Optimization) is a methodology of Internet marketing strategy that places a website at top of the search engine (e.g Google, Bing, and Yahoo). It is usually free and used to increase the amount of unlimited visitors to a website. The higher a website ranks in search engine, the greater the chance that site will be visited.

seo

Two techniques used for SEO

As discussed during lecture, there are two types of strategies used:

Black Hat SEO, which attempts to improve the ranking by using the techniques that are not approved by search engines, in other words, violate the rules of search engine. Example of this SEO, excessively cross-linking sites to escalate the apparent popularity, uses hidden text to attract search engines, spamming, etc.

On the other hand, White Hat SEO uses proper methods such as write meta tags and title to be more relevant to the web page, content improvement, and web re-design in improving the ranking.

White Hat SEO is the only technique that is approved by search engines. Thus, it lasts longer than the Black Hat SEO.

What are the keys to higher ranking in search engine?

The key to higher ranking is making sure that a website has the ingredients that search engines needs for their recipes.

These includes:

  1. Words : Search engine accounts for every word on the web. Search engine will narrow down the search to only the pages that are about to the keywords typed by the user.
  1. Titles : Search engine pays a lot attention to page’s title because it is often summaries the website. This page title is usually hidden as its written in code. (e.g <title>This is page title</title>
  1. Links : When one website is link to another, it is indirectly telling the user that this website has good complete information.
  1. Words used in Link: When someone searches for a keyword, and a website has this linked keyword, this web will rank well.
  1. Reputation: Site with consistent record of fresh and engaging content and growing number of quality links may be considered as rising star.

What are the advantages of SEO?

  • Free and unlimited traffic

SEO allows you to connect to customers for free with unlimited traffic to your website. Unlike other advertising platforms, which can cost you a few hundred dollars per day.

  • Targeted audience

Your website will appear only when potential customers search for the keywords you have optimized. This means those who are not interested to your products or services will not see your website on the search engines.

  • Exposed your advertisement 24/7

Since SEO is an internet marketing strategy, it allows your website to be found 24 hours a day and 7 days a week around the world.

Conclusion

Search engine optimization involves constant testing, experimenting, and improvement. To be able to increase your ranking, understand what your viewer is looking for and keeping the information or the content up-to-date are the golden rules in SEO. It is also important to follow the rules and regulations of search engine to keep the ranking long lasting.

References:

http://searchengineland.com/guide/what-is-seo

http://www.whatisseo.com

http://www.diffen.com/difference/Black_Hat_SEO_vs_White_Hat_SEO

https://moz.com/beginners-guide-to-seo/keyword-research

http://www.impossible.sg/our-services/search-engine-optimization-seo/

Copyright, Trademark & Patent

The lecture on copyright has open my mind on how the world works in terms of protecting one’s right and work based on copyright, trademark & patent.

So what’s the difference?

Copyright

Copyright is a law that exists to protect the creator or artist rights from being exploited in his own work. Depending on the nature of the work, copyright is meant to create a safe zone for the creator from other party making money off his own work for a limited period of time.

Trademark

On the other hand, a trademark is something that is created to identify a brand or yourself. This can include a word, name or a symbol. There is a difference between the subscript TM & R. The “R” just means it is a registered trademark and that certain applications was undergo to get it registered but anyone can use the subscript TM in their brands. It is essentially created, to prevent others from using a confusingly similar mark.

Patent

A patent is a right protecting the inventor for his invention. It is usually applicable only for a limited duration. In Singapore for the patent to be applicable, the invention must be in accordance with 3 main criteria and they are; it must be new in the world, the invention should be a major improvement and the invention must be able to be produced in today’s technology and industry.
Which can I use to protect my work?

In summary, if you are looking into protecting a word, symbol, logo, slogan, then applying for trademark is for you. If you are looking into protecting a form of expression such as written works, forms of images, works of art, sound recordings and performance arts such as movies, play, etc., then applying for copyright is for you. Lastly, if you are looking into protecting a new invention you created, then applying for patent is for you.

Any examples that it helps in protecting my work?

Copyright Infringement

Rogers vs Koons Case

Photo taken from https://cpyrightvisualarts.wordpress.com/2011/12/20/art-rogers-vs-jeff-koons/

The case of Rogers vs Koons, Art Rogers, photographer, took the photo on the left in 1985 but in 1988 when Jeff Koons came across the photo, he created a set of statuses based on the photograph and made a lot of profit. When Rogers sued Koons for copyright infringement, Koons lost and had to pay a substantial amount as the work of art was too similar to the photo.

Trademark Infringement

DROID Case

Photo taken from http://mentalfloss.com/article/13087/word-droid-registered-trademark-lucasfilm-ltd

Lucasfilm Ltd registered a trademark for the word “Droid” when it is used in Star Wars: A New Hope movie which was released in 1977. On October 9, 2009, Verizon released their mobile devices under the word “Droid”. Since it is using the same word to refer to a similar device, Verizon had to pay Lucasfilm Ltd a sum to continue using the name as a brand name.

In conclusion, it is important to understand the difference between copyright, trademark & patent and by knowing the differences, one can then avoid oneself against these things but also apply to protect one’s rights.

References:

http://www.lawmart.com/forms/difference.htm

http://www.ipos.gov.sg/AboutIP/TypesofIPWhatisIntellectualProperty/Whatisapatent.aspx

https://cpyrightvisualarts.wordpress.com/2011/12/20/art-rogers-vs-jeff-koons/

http://mentalfloss.com/article/13087/word-droid-registered-trademark-lucasfilm-ltd

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

 

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