Skip to main content

Home/ @Publish/ Group items tagged Fonts

Rss Feed Group items tagged

Pedro Gonçalves

6 Free Chrome Apps and Extensions for Small Businesses : Technology :: American Express... - 0 views

Pedro Gonçalves

Eyetrack III - What You Most Need to Know - 0 views

  • visual breaks -- like a line or rule -- discouraged people from looking at items beyond the break, like a blurb. (This also affects ads
  • We found that when people look at blurbs under headlines on news homepages, they often only look at the left one-third of the blurb. In other words, most people just look at the first couple of words -- and only read on if they are engaged by those words.
  • People typically scan down a list of headlines, and often don't view entire headlines. If the first words engage them, they seem likely to read on. On average, a headline has less than a second of a site visitor's attention.
  • ...17 more annotations...
  • For headlines -- especially longer ones -- it would appear that the first couple of words need to be real attention-grabbers if you want to capture eyes.
  • The same goes for blurbs -- perhaps even more so. Our findings about blurbs suggest that not only should they be kept short, but the first couple of words need to grab the viewer's attention.
  • Average blurb length varies from a low of about 10 words to a high of 25, with most sites coming in around 17.
  • Eyetrack III found that people do typically look beyond the first screen. What happens, however, is that their eyes typically scan lower portions of the page seeking something to grab their attention. Their eyes may fixate on an interesting headline or a stand-out word, but not on other content. Again, this points to the necessity of sharp headline writing.
  • Navigation placed at the top of a homepage performed best -- that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.
  • It might surprise you to learn that in our testing we observed better usage (more eye fixations and longer viewing duration) with right-column navigation than left. While this might have been the novelty factor at play -- people aren't used to seeing right-side navigation -- it may indicate that there's no reason not to put navigation on the right side of the page and use the left column for editorial content or ads.
  • Most news sites run articles with medium-length paragraphs -- somewhere (loosely) around 45-50 words, or two or three sentences.
  • Shorter paragraphs performed better in Eyetrack III research than longer ones. Our data revealed that stories with short paragraphs received twice as many overall eye fixations as those with longer paragraphs. The longer paragraph format seems to discourage viewing.
  • the standard one-column format performed better in terms of number of eye fixations
  • What about photos on article pages? It might surprise you that our test subjects typically looked at text elements before their eyes landed on an accompanying photo, just like on homepages. As noted earlier, the reverse behavior (photos first) occurred in previous print eyetracking studies.
  • Finally, there's the use of summary descriptions (extended deck headlines, paragraph length) leading into articles. These were popular with our participants. When our testers encountered a story with a boldface introductory paragraph, 95 percent of them viewed all or part of it.
  • When people viewed an introductory paragraph for between 5 and 10 seconds -- as was often the case -- their average reading behavior of the rest of the article was about the same as when they viewed articles without a summary paragraph. The summary paragraph made no difference in terms of how much of the story was consumed.
  • The first thing we noticed is that people often ignore ads, but that depends a lot on placement. When they do gaze at an ad, it's usually for only 0.5 to 1.5 seconds. Good placement and the right format can improve those figures.
  • We found that ads in the top and left portions of a homepage received the most eye fixations. Right side ads didn't do as well, and ads at the bottom of the page were seen, typically, by only a small percentage of people.
  • Close proximity to popular editorial content really helped ads get seen. We noticed that when an ad was separated from editorial matter by either white space or a rule, the ad received fewer fixations than when there was no such barrier. Ads close to top-of-the-page headlines did well. A banner ad above the homepage flag didn't draw as many fixations as an ad that was below the flag and above editorial content.
  • Text ads were viewed most intently, of all the types we tested. On our test pages, text ads got an average eye duration time of nearly 7 seconds; the best display-type ad got only 1.6 seconds, on average.
  • Size matters. Bigger ads had a better chance of being seen. Small ads on the right side of homepages typically were seen by only one-third of our testers; the rest never once cast an eye on them. On article pages, "half-page" ads were the most intensely viewed by our test subjects. Yet, they were only seen 38 percent of the time; most people never looked at them. Article ads that got seen the most were ones inset into article text. "Skyscraper" ads (thin verticals running in the left or right column) came in third place.
Pedro Gonçalves

Note to Yahoo!: Tumblr not a Platform for Brands, Yet | Optim.al - 0 views

  • Of the 10,600+ brands we examine on a daily basis (see optimalsocial.com/portfolios for more on these across 100 sectors), we see about 2,400 (just less than 25%) have a tumblr presence.
  • 25% of these are mostly empty and many appear to be brands squatting on their own names and planning to get to it later when they have time, perhaps. About 588 of these brand pages have fewer than 10 items of lifetime activity. Some brands like Pepsi are quite active, though the activity levels ebb and flow quite a bit, but others are far less so. The mean number of total engagements per brand on tumblr is 224 but the median is just two. Tumblr hasn’t yet figured out how to get users to engage with brands, yet, and it doesn’t seem that users are falling over themselves to engage with brands.
  • Tumblr’s content distribution model still needs to be sorted out, in order for brands to truly achieve viral distribution and authentic connections with consumers
Pedro Gonçalves

Typographic Design Patterns and Best Practices | Smashing Magazine - 0 views

  • Only 34% of websites use a serif typeface for body copy.
  • Two thirds of the websites we surveyed used sans-serif fonts for body copy.
  • the most popular font sizes ranged from 18 to 29 pixels, with 18 to 20 pixels and 24 to 26 pixels being the most popular choices.
  • ...7 more annotations...
  • From our sample size, we saw a clear tendency towards sizes between 12 and 14 pixels. The most popular font size (38%) is 13 pixels, with 14 pixels slightly more popular than 12 pixels. Overall, the average font size for body copy is 13 pixels.
  • Heading font size ÷ Body copy font size = 1.96
  • The overall value, then, is 1.96. This means that when you have chosen a font size for your body copy, you may want to multiply it by 2 to get your heading font size.
  • line height (pixels) ÷ body copy font size (pixels) = 1.48Note that 1.5 is a value that is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than that. The number of websites that go above 1.48 decreases as you get further from this value.
  • line length (pixels) ÷ line height (pixels) = 27.8The average line length is 538.64 pixels (excluding margins and paddings)
  • space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  • According to a classic rule of Web typography, 55 to 75 is an optimal number of characters per line.
Pedro Gonçalves

What's the most readable font for the screen? - The Next Web - 0 views

  • In print design, we’re told that serif fonts are considered the most readable. The serifs purportedly serve as aids to the eye, moving you from one letter to the next in a smoother fashion.
  • The bottom line is that the fewer details a font needs to convey a character clearly, the more readable it will appear on a broader range of screens.
  • the current consensus–at least as close as anyone can get to one–is that sans-serif fonts are still superior for screen body text, and serif fonts are best used for headings. For many users with newer displays, though, the difference is negligible.
Pedro Gonçalves

The Ideal Length for All Online Content - 0 views

  • 100 characters is the engagement sweet spot for a tweet. 
  • a spike in retweets among those in the 71-100 character range—so-called “medium” length tweets. These medium tweets have enough characters for the original poster to say something of value and for the person retweeting to add commentary as well.
  • the ultra-short 40-character posts received 86 percent higher engagement than others.
  • ...12 more annotations...
  • In the last update, Google changed the layout of posts so that you only see three lines of the original post before you see “Read more” link. In other words, your first sentence has to be a gripping teaser to get people to click “Read More.”
  • The ideal length of a Google+ headline is less than 60 characters To maximize the readability and appearance of your posts on Google+, you may want to keep your text on one line.
  • Many different studies over the years have confirmed that shorter posts are better on Facebook.
  • Writing for KISSmetrics, headline expert Bnonn cites usability research revealing we don’t only scan body copy, we also scan headlines. As such, we tend to absorb only the first three words and the last three words of a headline. If you want to maximize the chance that your entire headline gets read, keep your headline to six words.
  • some of the highest-converting headlines on the web are as long as 30 words. As a rule, if it won’t fit in a tweet it’s too long. But let me suggest that rather than worrying about length you should worry about making every word count. Especially the first and last 3.
  • The ideal length of a blog post is 7 minutes, 1,600 words
  • to ensure maximum comprehension and the appearance of simplicity, the perfect line length ranges between 40 and 55 characters per line, or in other words, a content column that varies between 250-350 pixels wide (it depends on font size and choice).
  • Consider that shorter lines appear as less work for the reader; they make it easier to focus and to jump quickly from one line to the next. Opening paragraphs with larger fonts—and therefore fewer characters per line—are like a a running start to reading a piece of content. This style gets readers  hooked with an easy-to-read opening paragraph, then you can adjust the line width from there.
  • In September 2012, MailChimp published the following headline on its blog: Subject Line Length Means Absolutely Nothing. This was quite the authoritative statement, but MailChimp had the data to back it up.
  • Beyond the perfect length, you can also adhere to best practices. In general, a 50-character maximum is recommended, although MailChimp does point out that there can be exceptions: The general rule of thumb in email marketing is to keep your subject line to 50 characters or less. Our analysis found this to generally be the rule. The exception was for highly targeted audiences, where the reader apparently appreciated the additional information in the subject line.
  • The ideal length of a title tag is 55 characters Title tags are the bits of text that define your page on a search results page. Brick-and-mortar stores have business names; your web page has a title tag. Recent changes to the design of Google’s results pages mean that the maximum length for titles is around 60 characters. If your title exceeds 60 characters, it will get truncated with an ellipse.
  • Finding a hard-and-fast rule for the maximum recommendation of a title tag isn’t as easy as you’d think. Quick typography lesson: Google uses Arial for the titles on its results pages, Arial is a proportionally-spaced font, meaning that different letters take up different width. A lowercase “i” is going to be narrower than a lowercase “w.” Therefore, the actual letters in your title will change the maximum allowable characters that can fit on one line.
Pedro Gonçalves

Facebook Studio :: Blog | Introducing Graph Search: Help People Discover your Business ... - 0 views

  • The name, category, vanity URL, and information you share in the “About” section all help people find your business and should be shared on Facebook. If you have a location or a local place Page, update your address to make sure you can appear as a result when someone is searching for a specific location. Focus on attracting the right fans to your Page and on giving your fans a reason to interact with your content on an ongoing basis.
Pedro Gonçalves

The Infinite Grid · An A List Apart Article - 0 views

  • Creating a layout is like doing a jigsaw puzzle; you have a bunch of pieces and you have to figure out how they should fit together.
  • designing native layouts for the web—whatever the device—we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.
  • When designing from the canvas in, the canvas dimensions are the constant on which the whole grid is anchored. Everything is sized and positioned relative to them. Designing from the content out means finding a constant in your content—be it the ideal measure of a paragraph or the dimensions of an ad unit—and building your grid out from there to fill the space available.
  • ...9 more annotations...
  • Fluid layouts are often compared to water, but water isn’t always fluid. H2O has three different states, and depending on the temperature can be a solid, liquid, or gas, transitioning seamlessly from one to another at specific points (0ºC, 100ºC). An infinite grid also has multiple states (single column, multi-column, etc.), and should transition as seamlessly as possible between them at specific breakpoints as well. For example, just as ice is an appropriate state for water when the temperature is low, a single-column layout may be the appropriate state for an infinite grid on smaller devices. Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.
  • Each state in a responsive layout tends to be made up of the same components, such as an image gallery or navigation menu. However, as Ethan Marcotte recently outlined, the form these components take can vary dramatically between one state and another, usually involving a change in one or more of the following attributes: Hierarchy: What’s its order and prominence in the layout? Density: How much detail do you show? Interaction: Should it be a list of links or a dropdown? A carousel or a group of images? Width: Is it fixed (a specific width), flexible (set with max-width), or fractional (set with percentages)?
  • Pixels size an element relative to a particular resolution Ems size an element relative to its font size; large rems size it relative to the document’s base font size Percentages size an element relative to its container VH and VW units size an element relative to the viewport
  • Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.
  • lets say my largest state is 75em wide (any larger and the white space starts to dwarf the content), and my smallest is 34em (any smaller and the measure is less than optimal). In the largest state it makes sense for my navigation to be a horizontal list (interaction) at the top (hierarchy), but in the smallest state it might make more sense to move it to the bottom of the layout (hierarchy), or collapse it into a show/hide list (interaction). Designing these independently of one another helps you be more objective about what is best for each state, rather than stretching a one-size-fits-all solution across every state.
  • Just like water changes to steam when its molecules get too far apart, one state should change to another when the relationships between its components begin to break down, such as when the measure is getting too wide, or the left-aligned logo is getting so far from the right-aligned menu that the visual connection between them is broken.
  • The number of states you require will depend on how much your layout changes from one extreme to the other. For example, my smallest state has a single column with a collapsed menu, and my largest state has three columns and an expanded menu. However neither state looks quite right between 34em and 53em, so I’ve added an “in-between” state which maintains the smallest state’s single column article, but expands the menu and divides the footer into three columns to make the most of the space available. This smooths out the transition from one extreme to another quite nicely.
  • With each state change, remember to reconsider the hierarchy, density, interaction, and width of each component
  • the goal is to make the most of the space available, relative to your content, to maximize readability and presentation.
Pedro Gonçalves

font - 0 views

1 - 20 of 37 Next ›
Showing 20 items per page