Psychology hacks to use when designing a website

Post pobrano z: Psychology hacks to use when designing a website

As we go about our lives, there are a number of different things which motivate us to make the choices we do.  We are often unconscious of these various elements.  A colour can make us feel vibrant.  A new scent can remind us of a childhood spent in a meadow.  These various factors influence what we will do or how we will rate our experiences.

As web designers, then, we know that psychology plays a massive role in user experience.  It can determine the conversion rates of a site, and whether our users have a positive experience or not.  Understanding basic elements of psychology can help us to create sites which appeal to our users.

It isn’t enough to design a website nowadays, you also have to play the role of a UX researcher a bit, or work with one to create a good experience for the site’s users.

These following tips are here to assist!

Understand how the brain works

In order to work both creatively and effectively as a web designer, it helps to understand how the brain functions.  This doesn’t mean you need to be a neurologist.  Instead, some basic tips will help us to interpret a webpage from a viewer’s perspective.

The field of neurodesign was introduced in 2012, and this shows us the impacts our designs will have on user experience. That’s right, aesthetics really does make a massive impact.

Interestingly enough, one of the most important aspects of web design in order.  Our brains battle with chaos.  When we look at a situation or space, our brains automatically create categories or ‘schemata’ in order to make sense of what we see.  This helps us to come up with solutions to problems or to grasp the meanings that are presented to us.  These ‘heuristics’ or broad rules help the word feel predictable.  We are able to make sense of what is happening around us.  This creates the feeling of comfort or safety.

One example of how our brain makes sense of scattered information involves pattern formation.  Our brains recognize patterns, and will even create imagery out of scattered information.  Early astrologers, for example, produced patterns from scattered stars.  We often fill in information when we see gaps in sentences or even letters that are missing or misplaced in words.  We see the whole as greater than the sum of the parts.

You may be wondering how this relates to web design?  Here are a few helpful tips:

Make use of hierarchy:  When your users are able to grasp a pattern or order to what is presented to them, it helps them to make sense of the information presented.  This helps your users to understand what your site is about and where to access what they are looking for.

Create categories:  Your users like to see information collected into groups.  This could be groups of products, services or even people.  Categories help to simplify what is on offer.  An E-commerce site which offers up ladies clothing and then divides it into tops, then t-shirts, jackets and shirts, will make it easier for clients to find what they are looking for.  Information is no longer presented in scattered mass.  Instead, it has been given a sense of order.

Use recognition:  If you’ve ever been trying to explain a concept to a friend and couldn’t find the term you’re looking for, you know how frustrating retrieval failure can be.  This is something to avoid on your website.  Instead, ensure your viewers are familiar with your interface and are able to navigate it effectively.  By using recognition you are able to do much of the work for your viewers.

You may be wondering how recognition works in online design?

Think of the way that Google draws on a browser’s history in order to auto-fill information a user could be searching for.

E-Commerce sites such as Amazon will often show shoppers what they have recently browsed.  They might also show shoppers purchases that have been combined by past shoppers in order to make product recommendations.

By presenting and organizing information in this way, website experiences often become more friendly for viewers.

Here are some further methods you can use to organize your webpage in a viewer-friendly manner:

Grab your user’s attention

By organizing your website into sections which grab your user’s attention, you stop your user’s mind from wandering across the site.  This helps to give your information structure as well as keep your viewer’s attention focused on specific aspects of your site.

Use colour and contrast

Your viewer will receive an emotional message from colour.  By using colour carefully, you will, therefore, be communicating with your viewer.  The contrast will help you to draw attention to aspects of your site, enabling them to stand out.  A call to action button, for example, should be clearly visible so that your viewer knows how to proceed.  This will increase the conversion rate on your site.

The messages communicated by colour

When it comes to using colour, each choice will have a psychological impact on your viewers.  This will determine how they will respond to your site.  Colour can be very complex, and some colours may represent different emotions.  Red, for example, may represent both passion and danger.  Context, therefore, plays an important role when it comes to colour usage.

Here are some broad rules when it comes to colour usage:

Black is often associated with luxury, value or professionalism.  Colours mixed with black often give a professional or corporate feel.

Green is often associated with environmental awareness as well as with humanitarian organizations such as NGO’s.

Blue provokes feelings of calmness or serenity.  This colour is often used to show trust.

Yellow is linked to warmth but can also be used to indicate a warning.

Orange shows warmth and vibrancy but is also used to represent impulse.

All of the above colours can be used to communicate a message to a viewer.  However, it is not only the colour in the foreground that sends a message but the use of white or background space as well.

Effective use of white space

When white space is used effectively, this creates a clean, clear effect, reducing cognitive load.  White space keeps your site looking clean and fresh.  If you use colour to attract attention to your site, your white space will create a breathing space for your viewer.

Create a consistent site

In order to work towards maximum viewer comfort (and therefore conversion rates), it is important to keep your site as predictable as possible.  This will keep your viewer feeling at ease.  Ensure that each page of your site uses the same typography, colours and page headers.

Keep your navigation system consistent across your different web pages.  Icons such as search buttons or shopping baskets should be in the same position on each page.  This way your site will seem predictable (and therefore easy to navigate) for your viewers. By doing this, you will increase your conversion rates.

Create emotional resonance by using imagery

A picture says a thousand words!  If you would like your viewers to resonate with your site, use imagery to build a connection.

Effective (and relevant) use of imagery creates emotional resonance within your viewers.  This is particularly helpful on a landing page in order to assist your viewers to identify with your brand.  A great image will boost your conversion rates.

Use the F page layout

Research into web design has shown that the most common way to read a webpage is by using the F pattern.  Eye tracking studies show that this is true.  Viewers will look at the top of a webpage or in the header.  They will then look at the left side of the screen.  However, viewers will only glance at the right side of the page every now and then.

By designing web pages which fit in with the viewer’s gaze patterns, you will be able to produce an effective site.  Concentrate your important messages or key information on the left side of the page for maximum impact.

When viewers are ready to leave a site, research reveals that they often look to the right.  By placing an effective image or enticing information on the right-hand side of your site, you may be able to distract your viewer, keeping him on the site for longer.

Think through your use of typography

Typography sends out a message to your user.  It is not only the typeface you select but how it is laid out that will make your user feel comfortable.  A comfortable, easy to read font which is well laid out will ensure easy reading.

Keep your font selection simple and easy to read in order to keep your viewer engaged.  When a font is hard to read, your information will seem more complex to your viewer.  Content which is simple to read and easy to digest will keep your user engaged.

Fonts can often tell the viewer if they are in the right space.  A font choice which is suitable for your brand or company will create a sense of trustworthiness in a viewer.  A modern, clean-lined font will often suit a technology company, where a typeface style font might suit a writer.

The layout will make a big difference as well.  When your site is clean-lined and easy to read, your viewer will be more likely to engage with your content.

Keep your calls to action clear

Your call to action buttons guide your viewer, assisting him with what he should do next.  They are therefore a very important element to any webpage.  It is important that they stand out against the background of your site.  You can use contrast to ensure that your calls to action attract a great deal of attention.  In web page design, the call to action should generate the most attention on your page.

If you are unsure if your call to action button is vivid enough, stare at your computer screen with your eyes unfocused.  If you can still see your call to action button, your design is effective.

When it comes to vivid contrasts or attractive colours, our brains are wired to take notice.  By drawing attention to the Call to Action button and compelling the brain to focus on it, you will guide your viewer towards responding.  This will increase your conversion rate.

Attract your viewers with new information

Viewers enjoy novelty and as a result, are attracted to new information.  When setting up your site, ensure that you create a section where new products can be seen or explored.  Even if your site has minor updates, ensure that these stand out to your viewers.

Let your viewers know that you have the latest products available.  By placing this information on your landing page, you will encourage your viewers to delve further into your site.  Try to whet your viewers’ appetite and leave them wanting to find out more.

If you have regular readers, making subtle changes to your site will hold your viewers’ attention.  You could add some new imagery, load some quotes, or change your font sizing to create a sense of variety.

Conclusion

There are no single solutions to designing a great website.  However, by understanding what will appeal to your viewers and attract their attention, you will be able to ensure an effective website design.  This will help you to work towards dynamic creations which result in high viewer conversion rates.

Random Day in the Life of a Developer

Post pobrano z: Random Day in the Life of a Developer

Yesterday, I started going through my email as soon as I got to work. I always start my day with email. I kinda like email. I read some interesting things in keeping up with the industry. I deal with some business things. I handle with some personal things. I make a note of the most important stuff going on.

Then I kept working!


I fixed a bug that was affecting Firefox exclusively. This code would set some elements in a row with flexbox, let them wrap, then looked at all of them to see which ones wrapped and which ones didn’t. Then it put the ones that wrapped in an overflow menu. Seemed simple enough. But some of the items were in bold text and some were not. The ones that were not bold were somehow pushed down 1.5px in Firefox (but in no other browser I looked at). The code checked to see if the top position was anything higher than 0 in order to check if they wrapped, and thus incorrectly marked some elements as being wrapped. The code had to be loosened up to accommodate that.


I tweeted some things that looked particularly interesting that day.


I had logged a bug a few days ago where a couple of small buttons were not styled or aligned how they should be in a common modal dialog. In diagnosing the issue, it looks like we had a weird git merge where some newer CSS was merged in that was assuming some HTML that wasn’t quite live yet.

I decided the cleanest way forward was to make the small HTML change forthcoming in the new branch in a new fixer branch that could go out quickly. The alternative was reverting the CSS back and my guess was that would have caused worse merge conflicts later, plus it was worth taking advantage of the newer, nicer styling now.

Then, because of course it did, the small HTML change caused another bug. The JavaScript that was watching those buttons couldn’t find them anymore and I failed to test it or, ideally, write a test for it. So, I had to fix that too, but sadly only after a user reported it. Gosh, I gotta improve our integration tests there.


I was in two meetings. One was a standard weekly catchup meeting. One was with a new person I’d never met before and we were exploring if there was an interesting way we could work together.


I fixed a bug with some bad backend logic (that I had written myself, of course). I wanted to display some information to a user based on, I thought, if they were on a team or not. I got that logic right, but it turns out the messaging was depended on that team being active (i.e. not expired in some way), so I had to update the logic to account for that. My team member helped me think it through because I didn’t understand the way billing and active subscriptions were tied to the user well enough.


I fixed a bug where a UI element was showing a strong warning state, but there was no way to find out what the problem was. It was a big red box with an exclamation point in it. It even had a hover state. But clicking it did nothing.

Turns out it was just a problem with event delegation. It was being added to the page after click handlers attempted to bind two elements like that. I fixed it by re-binding those click handlers after of the error UI was appended. It didn’t feel great. A better fix might have been updating the event delegation to be more efficient about this case. But, I’d been burned by that in the past, so this fix seemed more robust, even if less elegant and efficient.

It made me pine for the page being ported to React, where a silly event delegation bug would have never been an issue. Not long after, I fixed another bug where a click handler had been bound to a span.class_name, and the span was updated to be a button. That was a semantic and accessibility win, but broke the handler.

Again, something that just doesn’t happen in React.


Then I wrote this blog post and went home.

The post Random Day in the Life of a Developer appeared first on CSS-Tricks.

What Are Variable Fonts?

Post pobrano z: What Are Variable Fonts?

Formatting typography to fit your exact purposes can be a time-consuming process. So imagine instead being able to make a font subtly bolder or more italicised just by adjusting a slider in Illustrator. 

variable font

Variable font technology now allows you to do just that. These individual font files actually behave like multiple fonts, allowing you to adjust the weight, width and slant of type as you work. 

But are variable fonts actually useful for designers, or a fun but pointless gimmick? Here we take a look at how you can use variable fonts in Illustrator CC and how you can best apply them in your design work.

On the hunt for more cool fonts? Check out the huge range of display styles, serifs and sans serifs over on Envato Elements and GraphicRiver.

What Are Variable Fonts?

A variable font is an OpenType font format that includes new technology called OpenType Font Variations

Jointly developed by four of the most influential technology companies—Google, Apple, Microsoft, and Adobe—these font files contain a huge amount of extra data, compared to your average OpenType font. 

A variable font can contain a font’s entire glyph set, or individual glyphs with up to 64,000 axes of variation, including weight, width, slant, and, in some cases, specific styles, such as Condensed, Bold, etc.

OK, But… Why?

Alongside Color Font technology, variable fonts can seem to the uninitiated a little, well, pointless. Many typographers would argue that the process of manually formatting fonts is the most professional and satisfactory way to go about things. 

However, variable fonts are a natural progression for the field of typography, which is increasingly reflective of developments in responsive web design. Designers are demanding more convenience and interactivity from their design tools, and fonts which you can adjust with the roll of a slider are meeting this demand.

Variable fonts offer flexibility and immediate results, which makes them a welcome novelty for the time-strapped typographer. 

They’re also great for adjusting typography ‘live’. So if, for example, you’re showing a client a design on a screen, you can adjust the formatting of a header before their eyes instantly.

How Do I Find Variable Fonts?

You can use a limited range of pre-installed variable fonts in Adobe Illustrator CC and Adobe Photoshop CC, including:

  • Acumin Variable Concept
  • Minion Variable Concept
  • Myriad Variable Concept
  • Source Sans Variable
  • Source Serif Variable
  • Source Code Variable

Independent typeface designers are also starting to release their own variable fonts, though many of these are still only available as prototypes. Check out Gingham, a minimal sans serif by Christoph Koeberlin, or Jabin, a variable take on Gothic type styles by Frida Medrano.

You can also find a beta website, v-fonts.com, which features an ever-growing list of new variable fonts. 

variable fonts site

How Do I Use Variable Fonts?

Here, we’ll look at how to use variable fonts in Illustrator CC. 

The process is really easy. Simply select the Type Tool (T) and drag to create a text frame on the page. Place your cursor into the frame and type in your text. 

With either the frame selected or the type highlighted, choose a variable font from the normal font menu in the Character panel (Window > Type > Character)

Click on the small double-T symbol to the right of the font weight menu. When you hover over the symbol, you’ll see ‘Variable Font’ appear next to your cursor. 

character panel

Clicking on this opens a pop-out window with sliders to adjust three options, which are detailed below.

Weight

Adjusting this slider makes the type appear thinner or bolder. Depending on the variable font, this can range from ultra-thin to a very heavy or fat weight. 

This is a great option for playing with the visual impact of headers or sub-headings, allowing you to define just the right amount of boldness for your text.

Note that increasing the weight of the font can also expand the overall width of the text, purely due to the increased size of each character. 

Width

To give your type a condensed (or squashed) look, or stretch it to give it a broader appearance, adjust the Width slider.  

While this has an aesthetic effect on your text, it’s also a really nifty method for banishing any stray orphans or widows in your typography if you don’t want to spend a long time adjusting tracking or kerning manually.

Slant

Although applying false italicisation to text is often considered a big no-go in typographic circles, the Slant slider actually replicates a large variety of authentic italic weights. 

This gives you the professional look of actual italics, but the wide variety of options you can often only achieve by applying false italics. 

Where Should I Use Variable Fonts?

Variable fonts have been designed with web design in mind, and they are supported by Safari, Chrome, Edge, and Firefox. The web is the natural home for variable fonts because they are uniquely tuned to responsive sites and apps. You can play around with different variable fonts to see how they would appear online on the Axis-Praxis site.

axis praxis

By storing information about multiple font families within just one font file, variable fonts also offer a space-saving solution for web designers. 

However, variable fonts also present an exciting new way of formatting typography for print designers. Because adjusting the fonts is so quick and convenient, they make a brilliant timesaver for print designers as they work on drafts. 

Conclusion: Are Variable Fonts a Gimmick or Here to Stay?

For web designers, variable fonts represent another exciting development in responsive typography. Along with color fonts, variable fonts allow web designers to be more flexible and creative in their designs, making typography the focal point of websites rather than a mere necessity. 

For print designers, the jury is still out as to whether variable fonts are useful enough to replace manual typography formatting. Until a very wide range of variable fonts are made available in Adobe software, it seems unlikely that they will replace the standard method of formatting type for most designers. 

Looking for more great fonts? Check out the selection of typefaces on Envato Elements and GraphicRiver, or read our edited lists of some of the best fonts out there:

If you want to learn more, why not try our new course, Up and Running with Variable Fonts.

 

Delivering WordPress in 7KB

Post pobrano z: Delivering WordPress in 7KB

Over the past six months, I’ve become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based.

The web in a warming world

As a brief recap, I attended MozFest in London last year. In between sessions, I was scanning a noticeboard to see what was coming up, and I spotted a session entitled, „Building a Planet-Friendly Web.” I felt a little dumbstruck. What on Earth was this going to be about?

I attended the session and the scales fell from my eyes. In what now seems obvious — but at the time was a revelation — I learned of the colossal energy demand of the Internet. This demand makes it the largest coal-fired machine on Earth, meaning that its CO₂ emissions are probably at least equivalent to global air travel. More and more people are coming online, but this, coupled with the rise of ever more obese websites, means that the Internet’s energy demands are growing exponentially. Every additional byte transferred means more energy, which in most countries means more CO₂.

It is widely accepted that we should avoid printing emails to save trees, but this leads to a false assumption that the web is a green medium. I’m afraid to say, it is not.

Is there another way?

The good news is, it needn’t be this way. Since 2009, Greenpeace has been auditing Internet companies on their energy usage, and lobbying them to improve by way of their Clicking Clean campaign. The Green Web Foundation has an ever-growing database of hosting companies who use renewable energy, or who are at least committed to being carbon neutral. And new tools are emerging to help those working on the web measure the environmental impact of our products.

There are also some great resources out there such as Tim Frick’s Designing for Sustainability, three year’s worth of talks from the SustainableUX conference, and peripheral material that, while not explicitly focused on sustainability, can help us build lower carbon websites.

Enter Susty WP

I decided to challenge myself to see how efficiently I could package a WordPress website. While I was at it, I thought, “Why not make the website about sustainability and WordPress?” I know, WordPress/sustainability inception. Cool, huh?

And so, sustywp.com is born. With its accompanying theme, Susty. I’m rather chuffed to say I managed to get the load of the homepage down to 7KB of data transfer. I did actually get it down to 6KB, but the meta stuff added by Yoast bumped it up almost a whole KB! 😛 However, given I’m trying to spread a message, I deemed this to be an acceptable trade-off.

Before I get into the nuts and bolts, I just want to share a few headline facts:

So, how does it work?

The remarkable thing about this is actually how mundane it is. Heavily inspired by Heydon Pickering’s evangelizing about writing less damn code, and projects like Brad Frost’s Death to Bullshit, I embarked on a root and branch pruning of Underscores, removing everything I possibly could. And to be clear, it’s not as though Underscores is full of cruft. It’s a very lean starting point for building a theme. I’m a great admirer of it and thoroughly endorse using it. However, it includes certain assumptions that didn’t chime with my spartan goal of making the smallest possible WordPress site.

Such as, you ask?

Nav? No. Sidebar? Get rid of it. Classes? Not in my socialist utopia.

Given the constraints I had set, anything making it to the DOM had to have a very good reason to be there. With this being an experiment, I took the somewhat radical approach of relegating the navigation to its own page. This is wonderfully liberating and means I didn’t have to go through the almost always disappointing dance of wondering how I would make it look presentable, hide it for the many users who won’t care, make sure it’s robust enough to be infinitely long with never-ending dropdowns, etc.

This means less HTML, less CSS, and definitely no JavaScript! Win, win, win.

As for the sidebar? Well I’ve always had an aversion to sidebars, so that was an easy thing to remove. Susty has no widget area. I’m sure it’ll get over it.

Is there more fat we can trim? Well, if we’re going to have hardly any HTML, and we want minimal CSS, do we really need all those classes? I wanted to try my hand at writing CSS in the way it was intended to be used, instead of bowing to the class-ititis and div-ititis that pervade the industry.

You might not need web fonts

Alongside images, video and JavaScript, the other item that has become a significant factor in bloated websites is web fonts. Given that it’s now a Silicon Valley fashion for every startup to commission its own typeface as a first order of business, it seems as though every website you visit incurs downloading a bunch of font files. It may not seem so bad to tack on a hundred kilobytes for some nice type, but when you multiply this by the many different people visiting your website across different devices and browsers, fonts can easily account for hundreds of megabytes of data transfer — if not gigabytes/terabytes/petabytes for higher traffic websites.
Custom web fonts are also a potential antipattern for our users, for whom:

  1. Page loads are slowed down as they see either a flash of unstyled text or, potentially even worse, no text while the font loads.
  2. By the time the font has loaded, they don’t notice or care.

If you do have to use custom fonts or are in combat with the flash of un-styled text, font-display is an new property designed to instruct the browser how to handle font downloads. This post goes into it even more.

Almost every device these days has a half-decent set of fonts installed, so why not compose a stack of potential fonts you’d like to see, ending with either “serif “ or “sans-serif.” Or embrace those default fonts altogether with a system font stack.

I wanted Susty to have a bit of a Swiss Style aesthetic, so my font stack ranges from the perfectly proportioned Helvetica (which all Apple devices have by default) to sans-serif, by way of Arial, Frutiger and Nimbus Sans L.

As an Ubuntu user, I see Arial, which is perfectly pleasant. On my Android devices I see the default sans-serif font (Droid Sans I believe), which actually works rather well on mobile — you’d almost think that’s what it was designed for!

What else? Standard stuff. Few or no images and SVG where possible

Beyond this, it’s really just the standard. The homepage of sustywp.com has no images and just one SVG which is loaded inline rather than by an HTTP request. The CSS is minified. Everything gets Gzipped. The server is tuned with NGINX and Fast-CGI cache to serve content from memory.

Bonus SPA-like features without the work or code

When I was boring my girlfriend, Daisy, with my plans, I asked her how she felt conceptually about a website not having a navigation, and it instead being on its own page, found via a „menu” button. She thought it sounded ok. So, when I came to show it to her, I watched eagerly as she clicked the menu link. Her response was that she didn’t really think about clicking to see the menu, and the menu appearing, as changing pages. This confirmed one of my fears that my previous obsession with eliminating page loads when building Single Page Apps (SPAs) is something that only really bothers web developer-y types. Most people don’t really notice it or think about it. So, if you make your website lightning fast, the page loads themselves are almost imperceptible anyway.

With that being the case, I figured why not just pretend it was a menu overlay? So, I added a cross dismiss button and a tiny bit of JavaScript to take you from the menu back to the previous page if you click it. (I did initially implement this in PHP using the $_SERVER superglobal and HTTP_REFERER, but this breaks when using something like FastCGI cache to serve pages (i.e. those pages there is no $_SERVER superglobal.)

There’s still more to come

We all know that things can always be better. Here are a few of the things I’m working on to improve Susty:

  • Finish reading Jeremy Keith’s book Going Offline so I can implement a Service Worker and make Susty even more performant.
  • Look to see how I can implement Gutenberg. It’s going to add a bunch of kilobytes and that makes me sad! 😉
  • Currently, sustywp.com is hosted in one data center in London, and served globally from that location. This means that someone in Wellington, New Zealand is not going to get the full experience! I have a longer-term plan of establishing my own little CDN of edge servers (each one hosted by a 100% renewable energy powered host in each location that I can find one) just running NGINX and serving cached versions of the site. This is a simplified way of how we do things on WordPress.com VIP.

In conclusion

Susty is an example of taking sustainable design techniques to an extreme. I’m not suggesting that we should all start building websites with this exact method. But I do think sustainability should be a much higher priority in the web design industry. It’s good to think about saving any kilobytes we can, and to think in terms of kilobytes rather than megabytes. If you do want to use a JavaScript interface library, why not try out Choo.js, which has React-like features and comes in at just 4KB. Remember, NASA managed to put a man on the moon with about 50KB of data storage at their disposal.

The best thing about all this is that efficient websites means faster websites, which means:

  • Happier users
  • Better search engine placement
  • Happier servers

The post Delivering WordPress in 7KB appeared first on CSS-Tricks.

The Best Alternatives to the 10 Most Popular Fonts

Post pobrano z: The Best Alternatives to the 10 Most Popular Fonts

We see them on a daily basis—these popular fonts are everywhere! Check out this article to find hand-picked alternatives to some popular fonts.

Alternatives to the 10 Most Popular Fonts

If you are into fonts, you’ll know that the most popular can become ubiquitous. 

Thankfully, Envato Elements and Graphic River have some great alternatives. We looked at the characteristics of these popular fonts and found their match. These alternatives are beautifully designed, high-quality fonts with, in some cases, many weights to choose from! 

Try updating your design look with these alternatives for a unique style, and you might just start a new trend! 

1. Fonts Similar to Helvetica

Helvetica has been a widely used typeface ever since its release in the 1960s. Here are some typefaces that share the same characteristics and aren’t as overused.

BW Nista Grotesk

Bw Nista is a clean, modernist sans serif font family that provides a neutral tone of voice. It comes in three different sets, each with subtle features portraying different personalities. This typeface is just as functional as the famous Swiss style, thanks to its strict, rational shapes.

The set includes seven weights with matching obliques. It supports European Latin languages, ligatures, old style and tabular figures.

Nista Grotesk
Bw Nista Grotesk

RNS Sisma

RNS Sisma is a workhorse sans serif typeface comprised of nine weights and some alternates. It is neutral yet bold, perfect for getting a message across. 

RNS Sisma
RNS Sisma

2. Fonts Similar to Futura

Futura is an intense, geometric typeface and one of the most recognisable. It was introduced to promote the modern age to the masses in the 1920s.

Noir Pro

Noir Pro is a sans serif font influenced by the early 20th century geometric typefaces. The set ranges from light to heavy weights. This typeface is suited for any job! 

Noir has a rich arsenal of Open Type features for highly professional use and extended Latin, Cyrillic and Greek language support.

Noir Pro
Noir Pro

Lorin

Lorin is inspired by classic geometric fonts with extra personality. It focuses on aesthetic quality typography. It is suited for any type of application.

The font comes in four weights, with formats compatible for web.

Lorin
Lorin

Electro Sans

Electro Sans is a minimalist typeface with a modern take inspired by geometric forms from the 1920s. It’s perfect for headlines and portfolios.

Web fonts are included in the set.

Electro Sans
Electro Sans

3. Fonts Similar to Gotham

Gotham was inspired by architectural signs popular in the mid-twentieth century throughout New York. It is mostly known from Barack Obama’s 2008 presidential campaign. Below we share some typefaces that have the same characteristics with a new spin. 

Catesque

Catesque is designed with a large x-height, making it highly legible at any size. The typeface is fresh and versatile, perfect for any application. 

The typeface comes in five weights and matching italics.

Catesque
Catesque

Bw Modelica

Modelica is a beautifully designed typeface based on geometric shapes. It is minimal and strong, suited for any purpose.

It’s available in four widths, each containing eight weights with matching oblique italics (that’s 64 styles in total!).

Bw Modelica
Bw Modelica

4. Fonts Similar to Times New Roman

Times New Roman, used by The Times, is one of the most influential typefaces in history. Its large x-height and short ascendants and descendants make it highly legible on body text. 

Zimra Serif

Zimra shares the same features as Times New Roman. It has a large x-height and short ascendants and descendants. If you are looking for a timeless typeface, this is a beautifully designed option.

The set features five weights and includes web format.

Zimra Serif
Zimra Serif

Cammron Serif

Cammron is a modern serif font family. This is a great alternative to Times New Roman because of its legibility. The large x-height makes it look very spacious and light. 

The set features four weights, including a web font kit.

Cammron Serif
Cammron Serif

5. Fonts Similar to Avenir

Avenir is an organic interpretation of the geometric style fonts from the 1920s. This font is on the pricey side, so here are some smartly designed options. 

BERLIN

BERLIN is a minimal typeface designed to perfection. This typeface has won a spot on the Envato Elements list of best fonts of the year in 2017. BERLIN is suited for creating headlines—just add some tracking and you will be in love! 

The set comes with three weights, with all formats including web fonts.

Berlin
BERLIN

Bergen Text

Bergen Text has been carefully crafted to improve readability and legibility at small sizes. The typeface is geometric, but it has a very palpable, adorable personality. 

Bergen Text is a family of six fonts. While being a small font family, it has plenty of OpenType features for highly professional use. It includes Extended Latin, Cyrillic (with a Bulgarian character set) and Greek language support.

Bergen Text
Bergen Text

6. Fonts Similar to Proxima Nova

Proxima Nova is a mix of classic geometric proportions and a contemporary feel. Here we have a few options from Envato Elements. 

SIGNIA Pro

SIGNIA Pro is a modern Sans Serif typeface inspired by European city street lettering styles. On a page, this typeface looks fresh and modern.

SIGNIA Pro features two weights, regular and bold. The set also includes Web Fonts.

SIGNIA Pro
SIGNIA Pro

Morton

Is a unique condensed typeface. It is in a grotesque style that lends impact to your design.

The Morton Type Family is available in nine weights.

Morton
Morton

7. Fonts Similar to Century Gothic

Century Gothic is a sans serif typeface in the geometric style. It has a high x-height and the characters are wide, giving it a signature spacious look.

Silver Thread

Silver Thread is a hairline thin geometric sans serif font. It has Art Deco and 1970s elements to it. It’s perfect for any project that needs a typeface which evokes elegance and sophistication. 

The font contains alternate versions for added variety.

Silver Thread
Silver Thread

Gesture

Gesture Sans is a modern sans serif typeface. Its thick strokes make it highly legible in large formats. 

The pack includes OTF, TTF and Web Fonts.

Gesture
Gesture

Liber v2

This typeface is built on the mathematical purity of geometric circles and squares. While its roots are traditional text fonts, it is redesigned for modern use. This linear sans is highly legible and harmonious, making it suitable for headlines or body text. 

The set features ten weights.

Liber v2
Liber v2

8. Fonts Similar to Impact

Impact is a hard-to-miss font. It was originally designed to, like its name, have an impact. Below we have some options from Envato Elements that share the similar characteristics.

Schmalfette

Schmalfette is a digital revival inspired by the typeface Schmalfette Grotesk from the 1950s. Its tall height, heaviness and condensed characteristics make it a great alternative to Impact. Whenever you need to make a bold statement, Schmalfette will be here to do the job. 

Schmalfette offers support for all Latin based and most Eastern European languages.

Schmalfette
Schmalfette

Bw Stretch

Bw Stretch is great for both display and body text purposes. The compressed style is inspired by wood-block designs. The best part of this typeface is the disruptive titling alternates that expand the width dramatically. It’s perfect for when you need an extra kick in your headlines!

The package includes eight weights from Thin to Heavy, covering all European Latin languages. The set is completed by small/petite caps, fractions, case-sensitive forms, discretionary ligatures, and disruptive titling alternates.

Bw Stretch
Bw Stretch

9. Fonts Similar to Trajan

Trajan is a classic typeface inspired by Roman Square Capitals. It is well known for being used in many movie posters. 

Praetoria

Praetoria is meant to be used at a larger point size. It was inspired by the Roman square capitals used in ancient Rome. Some of the lowercase letters are fictitious variations of their uppercase counterparts. A few others are borrowed from the Russian and Greek alphabets.

Praetoria
Praetoria

Antiqua

Antiqua is inspired by first-century Roman inscriptions. It can be used to set body texts and works well in titles and headlines. Antiqua has 175 characters.

Antiqua
Antiqua

10. Fonts Similar to Didot

Didot is a group of typefaces developed in the 1800s by a famous French printing family of the same name.

It features a strong contrast between thick and thin strokes, resulting in an elegant font. It has been used on Vogue’s cover since the 1950s due to its classic, timeless feel.

Domani

Domani, by Jason Walcott, is a digital revival of an old typeface called Didi. It has some unique design details that set it apart from other Didone style typefaces. It has thinner strokes compared to the classic Didot and heavier terminals.

Walcott has created a professional-quality digital version that is faithful to the original design while expanding the character set to make use of OpenType features.

The set supports Latin-based and most Eastern European languages.

Domani
Domani

Giaza

Giaza is a multilingual Didone style typeface. It features smooth curves and subtle indentations, perfect for fashion applications.

The set contains 650 characters, 190 character swashes, Everted & Inverted Alternates, Discretionary Ligatures, Ornaments, Oldstyle Numeral Alternates, and Standard Alternates.

Giaza
Giaza

Gokú

Gokú is a multilingual typeface, initially designed as a stencil font. A very stylish font with heavy strokes and terminals. 

The set includes an array of ligatures, glyphs, and alternates. Bold lines, subtle curves and improved legibility make it perfect for any application.

Gok
Gokú

Conclusion

Looking for more alternatives to a specific font? Let us know in the comments below!

This list of typefaces aims to show that there are many high-quality alternatives to popular fonts. These are excellent resources for any designer’s toolbox.

For more high-quality fonts, be sure to check out Envato Market and Envato Elements. Let us know your favourite typeface in the comments! 

If you liked this article, you might like these:

Agregator najlepszych postów o designie, webdesignie, cssie i Internecie