How to Effectively Add Texture to Your Website

 | 
By Sara Stuart

If you take a look around the web, you might have noticed a trend for flat design. For most designers, myself included, this simple aesthetic is a dream come true. We’re taught from the beginning that “less is more” and until now, it seemed impossible to convince clients that this mantra holds a lot of truth to it. Now, the days of heavy gradients and texture usage are behind us and it’s a glorious time to be a minimalist. Don’t get me wrong, I’m a huge fan of texture, and I still believe there’s a place for it, but too much texture can cause confusion and leave a website feeling tacky. 

So how can we make minimal design and texture coexist? Start by taking a good, hard look at your branding visuals and see where adding texture makes sense. Today I’d like to show you how.

How to effectively add texture to your website

First, let’s discuss what texture really is and how it’s different from a pattern.

Pattern vs. Texture

A pattern is a small, image-based element that is repeatable on the x and y axis (source). In other words, it makes use of symmetry by duplicating a simple image and arranging it in a predictable order to create a seamless layout. Thanks to programs like Illustrator, it’s fairly easy to create pattern designs that are repeatable, or tileable. Here’s one I’ve made for my social media outlets that highlights my love for cherry Pop-Tarts:

Pop-tart pattern

Textures are bigger, more complex files that refer to tactiles or surfaces. Some textures can be seen as patterns if they’re tileable, but not all have to be. They generally come in two types: visual and actual.

  • Visual Texture is art that imitates actual texture using various elements like lines, shading, and color. 
wood_texture.png
  • Actual Texture is exactly as the name signifies. It’s the physical rendering of real texture. Some awesome effects can be achieved by manipulating a photo or scanning in the textured surface and digitally modifying it. For better results, set your resolution to at least 300 dpi and play around with a variety of files.
Grunge Texture

If used properly, textures can effectively improve a layout by adding contrast, depth, and balance to the design which creates visual interest and weight. Some textures are so lifelike that they appeal to a viewer’s sense of sight and touch. Due to these qualities, whenever we use textures, it automatically draws attention to itself and the area from where it’s applied. 

Why is Texture Important?

Flat design is timeless, clean, and functional but it can also seem artificial and bland. For example, think of what a single piece of white paper looks like. It’s not just a flat, white rectangle. There’s a subtle texture and gradient to it that indicates where the light source is from and what the paper’s surface must feel like. When you introduce a light texture to flat design, the result is interesting and it feels authentic. This is why I think texture is important. It gives your website character and allows your audience to interact with the visuals of your brand.


11 Classy Ways to Minimally Add Texture


Minimalism is the process of breaking something down into its essential elements to achieve functional design (source). With that said, one of the worst things you can ask a designer to do to make a website “pop” is by adding too much information or by including a whole bunch of design elements that won’t make sense for your brand. To keep things classy and minimal, consider a few of these ideas to add texture to your website:

1. Social Media Icons: Spice up the same social media icons everyone uses by creating a customized set that matches the tone and theme of your website.

2. Packaging and Business Stationery: Figure out how you’d like to distinguish your printed work. Texture can be applied to the backs of business cards, letterhead, or even an iphone case. You could also appeal to your client’s sense of touch by having your promotional materials printed on something untraditional, like kraft paper. In addition, think of your packaging accessories. There are plenty of ways to sneak in some texture by wrapping your thank you cards in twine or ribbon for example.

From Studio JQ: https://www.behance.net/gallery/23979655/Everybody-Loves-Fish-Chips-Branding

From Studio JQ: https://www.behance.net/gallery/23979655/Everybody-Loves-Fish-Chips-Branding

3. Photography: With flat design on the rise, large photographs have become a favorite for homepages as well. Take it one step further and include a recurring texture in the background while photographing spaces, products, and props. These can also be made into banners and backgrounds for promotional posts on social media.

Photo from Monte Ré: http://www.montere.it/

Photo from Monte Ré: http://www.montere.it/

4. Call to Action Buttons: Guide your audience to the most important parts of your website by applying a texture to your call to action buttons. This ensures that they don’t get overlooked and entices your viewers to see what you want them to see.

5. Titles / Headings: Adding a small amount of texture to your titles or headings can enhance the information hierarchy of your website and keep everything organized. Just be mindful of font legibility. 

Layout from Degordian Academy: http://academy.degordian.com/

Layout from Degordian Academy: http://academy.degordian.com/

6. Blog Post Images: Promote your latest blog posts with textured images that catch the eye and make the titles easy to read.

7. Header and Footer: Use your header and footer to your advantage by sneaking in some texture. 

Header from Olly Sorsby: http://ollysorsby.co.uk/work/

Header from Olly Sorsby: http://ollysorsby.co.uk/work/

8. Dividers: Dividers separate content into logical divisions and prevent confusion. To make them stand out a little more, a subtle texture can also be applied.

9. Logo: A textured logo can be pretty effective against a clean, flat background. However, if your background is textured, consider the opposite effect and keep the logo just as it is.

10. Email Accessories: This can apply to the backgrounds of newsletter forms, images & banners in email newsletters, and email signature tags.

11. Website Icons / Illustrations: Liven up the information on your website by adding a texture to icons and/or illustrations.

A few examples of illustrations with subtle texture. Found on the Google m usic   homepage: https://play.google.com/music/listen#/now

A few examples of illustrations with subtle texture. Found on the Google music homepage: https://play.google.com/music/listen#/now

Another example from Olly Sorsby: http://ollysorsby.co.uk/

Another example from Olly Sorsby: http://ollysorsby.co.uk/

Bonus:

Background Images: This is an option that I don’t normally recommend due to the fact that it looks dated and that there are very few website designs that successfully pull off a textured background. However, if you do this, my suggestion is to choose something ultra subtle so that it’s not too distracting and overloads your viewers with various visuals.


Texture Best Practices


The key to using texture lies within these guidelines:

  • To reiterate, use it minimally. Think of any type of design element as an additive rather than a necessity. When texture is used heavily, it can result in an overwhelming experience for your viewers and leave them with the impression that your website is messy and untrustworthy.
  • Make sure it serves a purpose and weigh out the pros and cons. If it serves no purpose and highlights the wrong information, say “sayonara” to prevent confusion and cause distraction. Texture should only be used to keep websites clean, organized, and pleasing to the eye. The goal is to highlight important information, not hide it.
  • Think of the website design. Is the right content being highlighted? Are you using too many textures? Is that texture hiding anything? Consider these questions while looking at your website design. There should be a harmony that flows throughout your layout. So, “if it goes together, put it together.”
  • Keep it consistent amongst all of your other branding materials. For example, your business stationery, social media and email newsletter visuals, logo style, etc. should all resemble each other no matter what.
  • Create an experience. Envision your brand and choose textures that help communicate your theme and overall tone. Keep it subtle and don’t get carried away with really bold elements the shift the focus off of your most important content. Remember the type of audience you’d like to attract and how you want them to feel about you. If you can use texture to achieve this in any way, go for it.

I strive to create timeless and functional pieces for my clients that are representational to their brand and intended audience. It’s important to note that texture is not necessarily needed for every website. If it doesn’t suit your theme or overall design and feels like a random or forced element, then it probably isn’t right for you. Whether you’re having a website designed for you or are going at it yourself, try a texture or two and see where it leads. 

Are you a fan of texture? How do you feel about it’s place in web design?

How to use Type Legally: Part 2

 | 
By Sara Stuart

On Tuesday I wrote a post on type legality and outlined the major forms of protection and font licenses available for purchase. In this second portion of the series, I’ll touch upon font license types once more, address letterform altering, and provide four ways to keep you honest when using type. 

It’s important to note that I am not a lawyer. This post was written from my own perspective and is a reflection on how I interrupted my research. If you have questions, I recommend contacting the type foundry responsible for the typeface in question or a lawyer for further legal clarifications.

Without further ado, let’s continue!

How to Use Type Legally: Part 2

Which Font License Should I Use?

If you recall, here are the three most common types of font licenses I outlined in my previous post:

  • Desktop Fonts
  • Web Fonts
  • Embedded Fonts

Each of these come with a purchaser’s term of use or end-user license agreement (EULA). This merely states what you can and cannot do with a typeface as soon as you download or purchase the file.

Sometimes designers find themselves in the curious position of being stuck with font licensing decisions. Whether it’s for an unique project they’re working on and they’re not sure if a regular license will cover their assets, or because the scope of the project is so large that just one license won’t cut it, it’s easy to get confused and feel uncertain. 

If you need help determining the type of license you need, my advice is to ask whoever you’re buying a license from. Remember, it all depends on how you plan to use that typeface. If you choose to use it for web and print purposes, you may have to purchase a separate license for each. Some font shops provide discounts on licenses if you buy different types of the same typeface. For example, MyFonts takes 50% off some desktop font licenses when you purchase the webfont. For more information, check out their licensing page.

Keep in mind that a single license purchase only allows you to use fonts in programs one computer at a time. If your client needs access to the source file to alter the font, that client must purchase a license as well.


Altering Letterforms

One thing I consistently see across design forums are questions relating to legally altering letterforms. Whether it’s for design purposes, like logo creations, or creating a new typeface from another type design, you need to make sure it’s allowed in the EULA. It’s safe to say that if it isn’t, again you should ask the designer or type foundry that created the typeface. 

Most people have questions relating to type alterations. As a brand designer, I know I’ve had the same worries when it comes to taking a typeface, converting it into outlines in Illustrator, and altering the points and curves for a project. Could this be illegal? Judging from the Adobe v. Southern Software, Inc. ruling, the design itself may not be protected, but this forum suggests that the outlines and points are. 

“Adobe claims there is some creativity involved in the manipulation and editing of the on-curve and off-curve reference points. Defendants claim there is no protectable creativity contributed by the editor in determining the desired character outline for each font.” 

To quote a line that was borrowed from this lawsuit, contributor, Thomas Phinney, makes a valid point in assuming that outlines fall into copyright protection. Of course, he specifically states that he is not a lawyer, and neither am I. Therefore, it’s important to consult a lawyer on matters such as these since we’re all a bunch of artists trying to make sense of legalese. 

Another example I’ve stumbled across stems from the question of altering type from the public domain by printing the typeface, scanning the design, and then converting the image into outlines through Adobe Illustrator. In this forum, the overall consensus was that it’s unethical and does not constitute as an original piece of artwork protected under copyright. Most importantly, you should know that even if you succeed, this doesn’t guarantee you’ll secure any protections against your modifications because anyone could very well to do the same thing. Again, I recommend consulting a lawyer specializing in Intellectual Property to further clarify.


4 Helpful Tips to Keep You Honest


1. Always Read Through AN EULA

To reiterate, make sure you read through a typographer or type foundry’s EULA before you buy a typeface. I can guarantee there will be differences and the wording will continue to confuse you, but if they allow their fonts to be used within logo developments, they’ll usually say something like this:

“You may use the licensed fonts to create images on any surface.. where the image is a fixed size. You may use the licensed fonts to create EPS files or other scalable drawings provided that such files are only used by the household or company licensing the font.” (Source.)

For those who do not allow their type to be included within logo developments, the terminology will read something like this:

“You may not use the Font Software, or any individual elements thereof, as part of a copyrighted logo, trademark or service mark.” (Source.)

 

2. Beware of “Free” Typefaces

It’s a glorious feeling when you discover a great typeface that’s free and ripe for the picking. However, most of these designs come with a catch: they’re available for personal use. This means that you can only use them for projects that will not profit you in any way. For example, if you were to use free typefaces for your business or for a client, this would be in direct violation of the EULA you automatically agreed to upon downloading. 

Free typefaces also have a reputation for being illegal, pirated copies of the typographer’s original creation. Sometimes you’ll run into these versions and notice a difference in quality. It’s even more evident if you import the downloaded copy in Adobe Illustrator and convert it to outlines. The curves and points of the vector are uneven and just plain sloppy.

My Sources for Free Typefaces

The good news is that there are some really nice, free typefaces available for commercial use. You just have to know where to look. Personally, my go-to sources are Google Fonts and Font Squirrel. Google Fonts give me peace of mind because they’re open source, or free for redistribution and alteration. Font Squirrel calls themselves a “free font utopia” that scours the internet for commercially free-to-use typefaces. (Just remember to read each EULA before altering.)

 

3. DIY Type

Another way to avoid getting into trouble with type usage is to simply create your own. Granted, this process is very complex and time consuming, not to mention could only be a solution for the artistically inclined, but the results are beautiful and unique. Notice the latest trends in design and you will instantly see the rise in script styles that resemble calligraphy. Handmade type is even becoming more and more popular. If you take this route, just be sure to protect your work or at least make sure you’re receiving the correct amount of pay for your time.

 

4. Know Your Font Library

Every so often take a moment and sift through your collection of fonts. First, make sure you have the EULA for each. If you don't, this could be a sign it’s an illegal copy. Resist the temptation and get rid of fonts that could cause damage. A good way to check is to run a Google search on each typeface name to see where each of them originated and make sure you have a legitimate license. This is another tedious process, but it'll save you in the end.

For fonts that came with your computer or software, again, check the EULA for each and make sure they're available for commercial use are free to alter. Adobe fonts are free for commercial use and have a helpful list of font EULAs here. (Source.)


I hope this series was interesting and helped clear up some questions regarding type usage and purchasing. Like I’ve stated before, it’s a hard subject to talk about and it’s often overlooked in design education. Do you have anything else to add? What’s your go-to source for free font?

How to use Type Legally: Part 1

 | 
By Sara Stuart

I have always had a love affair with typography and take pride in the fact that I can identify and match type easily. For that reason and more, I believe typefaces are the key to a great logo and I think it’s important to use them properly. Unfortunately, those who use type regularly may be unaware that they’re doing so illegally, and this may increase their chances for potential lawsuits as a result.

In this two-part blog series, I’d like to shed some light on the matter and make the legalities of type usage clearer, especially for those who use type in professional projects like myself. This portion of the blog will provide some background knowledge on intellectual property protections for type and will outline three font licenses available for type connoisseurs.

It’s important to note that I am not a lawyer. This post was written from my own perspective and is a reflection on how I interrupted my research. If you have questions, I recommend contacting the type foundry responsible for the typeface in question or a lawyer for further legal clarifications.

How to Use Type Legally: Pt 1

Typeface Vs. Font

As per usual, let’s get some definitions straightened out first. Back in the day, the terms typeface and font referred to metal blocks that were aligned by hand to create layouts. This process was called analog printing. Nowadays, the term typeface has been phased out of usage within the design community. Some experts have called it a generational preference since the difference has become irrelevant due to the rise of desktop publishing. (Source.)

Whatever your preference may be, I think this distinction should be explored to better understand type protection. With that said, let’s take a look at what these terms mean today.

 

Typeface

A typeface is a set of characters (numbers, letters, and symbols) that share common design features. Each typeface has a specific set of guidelines that determine the way a character appears, whether it’s on a page or a computer monitor. This term is also referred to as a font family. Now that I’ve thoroughly confused you, just remember, type like Bodoni, Helvetica, or the dreaded Comic Sans are all considered typefaces.

 

Font

If a typeface is comprised of design elements, think of a font as a technical guide/program that tells the printer or computer display how a letter or character is supposed to be shown. (Source.) As soon as a typeface file gets put to use within the Adobe Creative Suite, Microsoft Office, or anything other program, it’s safe to say it’s considered a font.

Still confused? Fast Company had a great way of summarizing the distinction here. Just remember: “A font is what you use, a typeface is what you see.”


An Intro to Type Protections

Now that we’ve cleared up the difference between a typeface and a font, here’s where it gets put to use for legality purposes. Let’s move on with the three types of protections used for artistic and intellectual property and how they relate to type.

 

Patent

A patent is normally used to protect inventions, but the U.S. has a variety of lesser-known patents, like a design patent. The first was created in 1842 for George Bruce to protect his collection of display typefaces (source). Patents are considered the strongest system of protection, but you’ll find that a design patent is rarely to used for type.

Lasts: 14 years upon grant date. It has the shortest life-span of protection in the U.S.

Covers: The ornamental and visual, like typeface designs.

Limits: Will only protect the exact form of your original artwork. If someone were to use this same piece and alter it a little, there is no infringement. This protection is also pretty expensive. 

 

Trademarks

A trademark is a country-specific form of protection for a word, name, logo, design or phrase that distinguishes a specific product in the marketplace. Typefaces like Times Roman and Helvetica are just a few examples of trademarked names.

Lasts: Can be eternal as long as the proper registration maintenance documents are filed on time. For more information, check the United States patent and trademark website.

Covers: The name of the typeface and the name of the type foundry.

Limits: Can’t protect the actual typeface design.

 

Copyright

A copyright is the most commonly used protection of intellectual property. It gives the creator an exclusive right to the use and distribution of their creative work. This law differs by country, but a copyright in the U.S. can automatically be used from the moment an original piece is created unless other arrangements were made prior to the start of the project. When it comes to the protection of typefaces, the copyright can be divided into two parts: protection for the type design; and the font in which it’s implemented (source). The U.S., however, only allows protection for the latter.

Lasts: Creator’s life + 70 years.

Covers: Original works and font programs.

Limits: In 1974, Congress specifically eliminated the copyright protection for the abstract design of typefaces. This basically means that fonts are covered by copyright law as computer software, but the design of a typeface is not. Since then this has been upheld in cases like the infamous 1997 Adobe v. Southern Software, Inc. ruling. (Source.) 


The End-User License Agreement

Since there are limitations placed on copyright law protecting the design of typefaces, many typographers and type foundries create a contract between the manufacturer and purchaser, establishing the purchaser’s term of usage (source). This is called the end-user license agreement (EULA). In other words, when you download a “free” or licensed font, you are automatically agreeing with the terms set forth in the EULA.


Purchasing the Right Font License

Every time you purchase and/or download a typeface, know that there’s a EULA attached. This specifies how you’re allowed to use the typeface, what medium you’re allowed to use it on, and how many licenses a purchase gives you. On type e-commerce sites, there are multiple licenses you can choose to buy from. Here’s a brief selection and overview of the more common types:

 

Desktop Fonts

Desktop font licenses are most commonly used for commercial print jobs like business stationery, newspapers, magazines, and some even permit usage within a logo. A few people have stooped as low as using this license for web design purposes through modern coding practices. It’s not only unethical, but it’s essentially stealing from the typographer or foundry and violating the EULA.

 

Web Fonts

Web fonts are exactly what you think, they’re fonts modified and enhanced specifically for the web. They improve readability and personalization on screen in a variety of digital environments and come in two varieties: fonts made specifically for the web, and desktop fonts optimized for the web. Whichever you choose, remember that consistent and uniform typography will go a long way in your branding campaign.

 

Embedded Fonts

If you’ve ever received a PDF, ebook, or newsletter in the past, you might recall that it was once required to have a copy of the font before you could read or print the document. If you didn’t own a copy, you simply had to purchase the font or ask the sender to change it to something you already owned. Once the Portable Document Format (PDF) came to be it became easier to embed fonts. Today, typographers modify typeface designs and sell embedded font licenses. This welcomed solution simply embeds fonts within files before they are sent. 

Those who purchase this type of license can also use it on applications, software, and web servers through CSS. Many embedded fonts are easier to read, available across all browsers (even Internet Explorer), and aid in design flexibility. Most importantly, they are 100% search engine optimization (SEO) friendly.


So which license is right for you and your project? Stay tuned for the second part of this series on Thursday. In the meantime, do you have anything else to add? Which facts were the most surprising to you?