Are Avenir links medium or regular weight?

[mebates]

All of cf.gov refresh uses Avenir links at medium weight (when not inline with a block of copy).

Much of current cf.gov, including OaH, use links at regular weight. The Design Manual doesn't specify, though the links are regular.

You can review our original (throwback!) discussion of link styles [on GitHub Enterprise](https://REPLACE THIS WITH OUR GHE DOMAIN/CFPB/digital-product-guide/issues/24). I don't think we got specific about the weight of the type.

I am working on templates for cf.gov refresh and OaH, so would love to resolve this by 1/12/15.

[duelj]

Yes, Flapjack uses medium weight Avenir for all its links. I think we kept this style when the style guide was still in the works, because we liked the subtle differentiation and emphasis that it created with the added weight. It has, so far, seemed to work well in both desktop and mobile formats for us. Below is a quick comparison of a Flapjack page with a decent number of links with both weights:

Medium Links	Regular Links

[Dnpizarro]

For our print styles, we are styling most links as medium. We have also had discussions in the past about merging both print and web styles, not necessarily in size but rather styling. The "medium" weight is consistent across both areas, so I would keep that styling for links.

[mebates]

We will finalize this decision at the Design Manual Monthly Meeting on 1/12. So far, I haven't heard an argument for keeping the links regular.

[nataliafitzgerald]

For the sake of tomorrow's discussion, here are some screen grabs from current use cases:

Owning a Home Home Mortgage Disclosure Act (HMDA)

Submit a Complaint

Our current homepage

Paying for College

Everyone Has a Story

[mebates]

We need a bit more exploration on links within paragraph, let's look at both OaH and flapjack.

But we all agree that links should be Avenir Next Medium in print and on the web, for links outside of paragraphs. The Design Manual should be updated before this issue can be closed.

If users don't get Avenir Next on the web, the links will default to Arial Regular.

[stephanieosan]

Okay, here's Owning a Home's Rate Checker with Regular and Medium links:

Regular

Medium

[Dnpizarro]

@Mollie will take this on for the March Sprint.

[mebates]

Here's where we're at: I think we agree that links could be Avenir Medium weight, when not in a paragraph.

I think the links look best as Regular when they are in a paragraph, as seen in the OaH examples above. I'd like some feedback from front-enders (@scotchester) to know how complicated it would be to differentiate consistently between the two in capital framework.

I found a few examples of Flapjack using Regular weight links throughout the refresh. We'd need to consider whether we want these medium across the board:

[duelj]

@mebates — I agree, links in paragraphs seem to work best at regular weight. I think that the examples you noted from FJ could both be medium weight for consistency if others felt it was appropriate.

Side note:

We had considered the navigation links as a separate instance to a degree as we were exploring both color and weight to best suite many links living together in the navigation vs. on a page. Navigation links also adjust differently for mobile widths as compared to a standard link. The navigation example on both flapjack and refresh demos do not fully convey our intentions for the new site navigation styles. Building in pieces, with further navigation exploration to be done, what is seen on the demo are not our final solutions. The example below is a more recent exploration for the "Policy & compliance" section and uses Avenir Next Medium 16px for the links. So I think as we move forward having medium in the nav. is certainly something we could integrate.

[mebates]

:+1: that looks really nice @duelj !

[mebates]

Can we hear from some Capital Framework gurus on this topic? @Scotchester @jimmynotjim @anselmbradford

[Scotchester]

It's no big deal, whatever is chosen :)

In my person opinion, I agree with leaving links regular in paragraphs. :+1:

[jimmynotjim]

Same as @Scotchester. Medium weight already defaults to regular for Arial so I don't see any issues here.

[benguhin]

Ok awesome. I support updating the standard so that links are Avenir Medium weight except when in a paragraph. @nataliafitzgerald ?

[mebates]

Once this gets approved I will see it through to the Design Manual and Illustrator templates! Thanks for all the input.

[nataliafitzgerald]

I also support updating the standard so that links are Avenir Medium weight except when in a paragraph. Thanks for pushing this through @mebates!

[Dnpizarro]

Moved this to the April sprint.

[mebates]

Steps to close out this issue:

• [ ] Add to the Design Manual
• [x] Update Capital Framework
• [x] Update .ai template(s) to reflect new standard

[mebates]

I've updated the cf.gov refresh template on Drive with this change. It is dated 042315. The new character style is called "hyperlink (in paragraph)" for the regular weight avenir links in the paragraph.

[mebates]

@Scotchester, what will we need to do to the Capital Framework to include this standard?

[keelerr]

@mebates, I'm working to show how this change would be reflected in the text of the design manual.

[mebates]

Hey @keelerr - can you share any progress if you've made? (Okay if it isn't much; others can build on where you're at!)

[Scotchester]

This is effectively implemented in Capital Framework by way of the .styled-link and .jump-link patterns. It's difficult to make this a "default" behavior that doesn't involve adding these classes to links, but as long as these classes are employed consistently, links set in Avenir outside of paragraphs can be styled in the medium weight.

If anyone knows of a specific reoccuring situation where Avenir links are not being set in medium, let me know, and we can investigate how to make it more consistent.

(Checked the "Update Capital Framework" box above.)

[nataliafitzgerald]

@Scotchester I took a quick look across our site pages and see that there are many instances of links not being set to Medium. There seems to be more consistency on Wagtail pages (Medium weight link text) but there are instances of Regular links there as well. Here is a sampling of some situations:

http://www.consumerfinance.gov/askcfpb/ http://www.consumerfinance.gov/your-story/ http://www.consumerfinance.gov/paying-for-college/ http://www.consumerfinance.gov/owning-a-home/ http://www.consumerfinance.gov/retirement/before-you-claim/ http://www.consumerfinance.gov/adult-financial-education/ (mix of medium and regular in page body) http://www.consumerfinance.gov/consumer-tools/prepaid-cards/ (mix of medium and regular in page body) http://www.consumerfinance.gov/policy-compliance/guidance/ http://www.consumerfinance.gov/policy-compliance/rulemaking/ (Regular in breakout sidebar) http://www.consumerfinance.gov/policy-compliance/enforcement/ (mix of medium and regular in page body) http://www.consumerfinance.gov/policy-compliance/amicus/ (links are Regular in page body)

[jimmynotjim]

@Scotchester now that avenir is the default, could we globally set all links to avenir medium, and use the same parent selector we use for georgia running text to set those links as georgia?

[Scotchester]

@jimmynotjim Hmm... I suppose so, if we override it to keep links inline within body copy as Regular, which seems to have been the most recent consensus.

[jimmynotjim]

Ok, maybe we add it as something to explore after v4 is live.

[stephanieosan]

Status: I believe the standards are Medium when they're on their own; and matching the paragraph they're in if they fall within a paragraph.

We need to follow up and see if this is appropriately documented somewhere.

[stephanieosan]

Follow up: The weight is not included on the design manual Links page. We should add a link or two.

[Scotchester]

Content update deployed: http://cfpb.github.io/design-manual/page-components/links.html

I'll transfer the idea about a better CF implementation to a new issue there.