Blog : Uncategorized

Typography on the Web: A Contrast to Design Trends

Typography on the Web: A Contrast to Design Trends

The advancements of web technologies over the past decade have allowed for a much more vibrant experience; both for designers and developers architecting websites, as well as for the end user who views and interacts with those websites. The options for fonts, and available web colors have especially evolved over time, allowing for a broader spectrum of how text-based content can be displayed on a web page. The unfortunate side effects this has caused, are design trends that have steered in a direction away from core principles of typography, readability, and accessibility.

The web was created to make text legible, and readable: Pure black text on pure white background; deep blue links on pure white background; deep purple for visited links on pure white background. As more web colors were available to newer browsers, and monitors, designers have been experimenting with new color options to help set their websites, or brands apart from the rest.

While new options can certainly a good thing, over time the concepts of readability, and contrast have fallen by the wayside. It is crucial to design a website so that all text has the appropriate amount of color contrast between foreground, and background to ensure that it complies with the Web Content Accessibility Guidelines 2.0, at least the AA contrast ratio standard. The best a website can achieve is the AAA standard, but a vast majority of websites on the Internet will not pass the AAA contrast check.

Things have changed for the font tools available as well. Designers have sought to explore more possibilities on how to elegantly display text, with more options of stylized fonts. Before the era of Google Fonts, there were various image, Flash, or other replacement options for text to display outside of the core web fonts available. The tools available now are considerably better, but caution must still be taken when selecting fonts. A designer can pore over various fonts to find one “cool” enough for their site. But, do they consider every kind of user that will be trying to read that font? What is “cool” to a designer, may be difficult to read for an average website user.

The weight of the fonts used on a website are also extremely important – a thinner font weight can be more difficult to read, while a bolder font weight may be too overbearing for most users to even bother reading. Selecting an elegant font that is still close enough to the standard fonts that have been around forever is a vital part of conveying whatever message your website is stating. When tying this together with the colors selected, the contrast of the font on its background is one of the most important aspects of readability, and accessibility.

Even if the contrast of text on a web page looks good to a designer in their perfect settings, caution must also be taken to consider that not all users have the same vision, and not all users have the same brightness, and contrast settings on their devices. Finding the right balance in a design’s standard brightness, as well as when viewed at a lower brightness setting, is beneficial to ensuring users remained engaged with your site. If a user cannot read something, your message is lost, and likely that user is also lost. Keep typography readable, and keep your users reading.

I, Robot…you, Informed

I, Robot…you, Informed

Easily one of the more overlooked tools in any SEO arsenal. A Robots.txt file is not so much the road map that a sitemap is but more the footnotes of your website.

“What is robots.txt?” you ask?

The robots.txt file is a text file that instructs the search engine robots on how to crawl pages on the website. The robots.txt file is a part of the the robots exclusion protocol (REP) – a group of rules that regulate how robots crawl, access and index content. The REP also includes things like meta robot tags and explains how search engines should treat links, such as “follow” or “nofollow”.

SEO | robots.txt | Alpine Design


All robots.txt rules result in one of the following three outcomes:

  • Full allow: All content may be crawled.
  • Full disallow: No content may be crawled.
  • Conditional allow: The directives in the robots.txt determine the ability to crawl certain content.

General must-knows about robots.txt:

  • In order to be found, the robots.txt file must be placed in a website’s top-level directory
  • Robots.txt is case-sensitive: file must be named “robots.txt” (not Robots.txt, robots.TXT, etc).
  • It’s a best practice to indicate the location of a sitemap associated with this domain at the bottom of the robots.txt file.
  • Improper usage of the robots.txt file can hurt your ranking (An incorrect robots.txt file can block search engines from indexing your page)
  • The robots.txt file controls how search engine spiders see and interact with your web pages however some robots may choose to ignore your robots.txt file