Diocese of Scranton

👋 Can you create a paragraph2 font that would be available to use on all pages?

Veronica,

I'm finding that we need a font size that is larger than the one defined for paragraph on our pages.  We need something larger that we can use to "fill" pages that have a lot of white space, e.g. https://scranton.diocesanweb.org/parish-life/councils/

Or sometimes we want to emphasize certain text without making it a "header"
Can you create something that's a little larger with a slightly heavier weight than the existing paragraph font type?

Thank you,
Connie

Comments & Events

Ryan Ross, Developer at Diocesan
Connie Wisdo Connie ,

The paragraph text was 16px and 400 weight (normal).

I've updated the style sheet for content paragraphs to be 20px and 500 weight (medium).

Let us know if this delivers the desired results.
Connie Wisdo
Ryan,

Thanks, Ryan. I don’t think this accomplishes quite what we are looking for.

Can we have both the 16px for “normal paragraph” and the 20 px fonts for “emphasized paragraph” text? In the example below, it looks like the bulleted list text is still 16 px but the rest is 20 px. We need to have both available to us, whether it’s paragraphs, bulleted lists, numbered lists, etc.
[cid:image004.jpg@01D4ADB3.D63D7490]

Also, we are having an issue when trying to indent bullet or numbered lists. They will not let us indent to the right. The button is grayed out. Please see below for an example on the Catholic Social Services page
[cid:image005.jpg@01D4ADB3.D63D7490]

Can you please give us the ability to indent these types of lists?

Thank you!

Connie Wisdo
IT Manager, Diocese of Scranton
570.591.5010

Ryan Ross, Developer at Diocesan
Connie Wisdo Connie ,

This may be a case where goal and request weren't on the same page.  I'm going to recap and break this down, to hopefully clear it up.  Veronica Alvarado, Project Manager at Diocesan Veronica if you want to chime in on content strategy perhaps?

Originally, you had asked that we increase font size and weigh in paragraphs, and I did that.  Based on this follow up, I get the impression that you wanted the content font size to be increased globally, and not restricted to just paragraphs.  It's because I restricted it to paragraphs that the unordered list still has a 16px font size.

I think the ultimate question here is, what effect on the page presentation do you want?

As for lists, I did observe a discrepancy between editor and page.  I assumed that's what you were referring to when you said you couldn't indent it.  Now you don't have to, as the editor and page will look the same.

Just for clarification on lists, the first element should always be furthest left.  There is no need to indent the first element, thus increase indent is indeed grayed out.  If you check the second element, you'll notice you can indent that item, if you wish.  The confusion here I believe is that "indent" with respect to lists is really "parent/child" structure, as opposed to overall margin relative to the page.  If for some reason you wanted to move the list from the left of the page, we could achieve that with margin, but we should probably review best practices before we did anything like that.
Ryan Ross, Developer at Diocesan
When you mention you need both 16px and 20px font sizes, I'm a little hesitant to simply turn on font sizes without at least first stating why that's not the best idea.

The reason we have a set size is for consistency.  It keeps things clean, and maintenance to a bare minimum.   I don't believe changing the font size for purposes of filling space is the best approach.  Rather, to tackle the white space I would want to first look at what's creating the white space, and look at possible ways or rearranging things, or otherwise adjusting the surroundings, to eliminate or minimize the white space.  Of course, if you've exhausted all options, font-size may be all that's left.  In that case, I would strongly recommend choosing the larger as the standard, as opposed to having 2 variations.

This is just my take on it and how my mind works towards solving a problem.  Some food for thought if you will.  Think about it, and let us know how you'd like to proceed.
Veronica Alvarado, Project Manager at Diocesan
Connie Wisdo Connie  
I see what you are trying to accomplish by having a paragraph and emphasized paragraph, but I believe this is why there is the option to bold and italicize the text. 

If we add the option to change font sizes, it will be turned on for everyone that edits the site and they will have the ability to change the font to whatever they'd like, which could result in a page with a wide variance in font size. Since there is a large number of editors for your website, I worry that everyone will begin styling their page with whatever font sizes they'd like to emphasize the text. 
We encourage a single paragraph text, as it keeps the page easy to read and, most importantly, allows visitors to be able to find the information quickly and easily. This is why we have built the site so far with headings to title sections of each page. In fact, with website usability studies, they have found that the first things that attract people's attention are:
  1. White Space
  2. Headings
  3. Color Variances
  4. Bold/Italic
Headings can achieve #1 and #2 by being short and to the point, thus leaving white space to the right (if text is left aligned).

The color variances are available on your site by clicking the "Toolbar Toggle" within your editor (see image below),  but this is something with which we highly caution against because it can become the same issue as giving people the power to pick their font. You can end up with a page that has each section in a different color font, thus leaving the visitor confused as to what/where the most important information is. Plus, that page would no longer match the rest of the website's identity (to a certain extent).

Still, this ability may be what you truly need. If that is the case, then I support it. I just think there needs to be strict guidelines as to how the larger/smaller paragraph size(s) should be used. For example, when should they be used? Can they be used for a whole page, or only specific information? Should it be used for full sentences or only important words? If the large text is used, is it okay to still bold and italicize? 

If you'd like, we can also discuss this in today's call with Ryan. 
Connie Wisdo
Yes, you both have good arguments and I am a fan of consistency.  I have seen a couple of occasions where having the flexibility of a smaller font and a larger font can be beneficial.

1.  When you want to create a subheading.  for example, on the page https://scranton.diocesanweb.org/directory/ we needed a subheading for Priests, Deacons, Religious: to set off the Diocese Organizations and Personnel.  Veronica finally achieved this larger, heavier font by doing this:
<h3>Diocese Orga<span style="font-size: 30px; font-weight: 600;">nizations and Personnel</span></h3>
<strong>Priests, Deacons, Religious: </strong>

2.The Header styles are prohibitive in the fact that they place too much padding above and below.  Sometimes you want paragraph spacing.  The Directory page mentioned above is a perfect example.  I have spent a couple of hours trying to get that page looking better.  Frustrated by the fact that I can't indent the list of buildings to be closer to the pictures of the buildings (hence my other note about being able to indent bulleted lists), and also frustrated by the white space imposed by using the Heading 4 (Diocese of Scranton Offices) followed by Heading 4 (The Chancery).  There is just too much white space on that page and too much space between the list of offices and the pictures of the buildings.
Connie Wisdo
3. Having the smaller font size would help tighten up that list of offices associated with the Chancery building, so that it doesn't extend past the bottom of the building photo.

Perhaps we just need a way to override the paragraph and bulleted list font size in cases like this?
Ryan Ross, Developer at Diocesan
Connie, this is very constructive, and I'm glad you brought up some examples.  The one thing I want to reiterate here, is that while these examples clearly illustrate your point and frustration, they are the exception to the standard (for the most part).   There's nothing wrong with making exceptions for use cases, but there are issues with changing the standards to fit the unique cases.  That's ultimately where I'm coming from with the standard/consistency view.

1) Font-size 30px and font-weight 600 are the same definitions for Heading 3.  So, technically, the inline styles aren't doing anything here.  It's a standard H3.

2) This is certainly valid.  When it comes to content and styles, Headings of most often used as stand alone items, followed by lists, paragraphs, or images most commonly.  As such, Headings do have some padding and margin above and below each one.  For a quick working overview of all the standard styles, see here: Styles

Headings followed by headings will usually produce larger than reasonable spacing, but it is something we can account for and fine tune the spacing for these situations.  For the most part this is just one of those things we address on a need-to-need basis (because 6^2 = 36 combinations).  So we just need to know if this is an adjust the standard padding on headings, or just the situational usage.

Also, I agree there is too much white space at the top between the two headings.  This isn't all on the headings though.  There's a non-breaking space between the two, which will end up as an empty paragraph on the site.  Paragraphs (even empty ones) will have margin and padding top/bottom.  In the following screenshot, I've overlayed the three elements so you can see how they are behaving together.  Blue represents actual element height, yellow is margin, and purple is padding.


Lists relative to image.  Yes, I see there is a good amount of gap between the lists and right-aligned images.  My personal opinion, this doesn't look bad at all.  I'm not against improving however, but bumping the lists to the right is the wrong approach.  I'll say this:  Ordered and Unordered lists should be aligned left, while the image doesn't have to be floating to the right edge. Consider that the the usable width of the page is 1220px, it's more a product of site width than anything.   One option would to simply reduce the page width.  Another would be to add an empty sidebar to figuratively "void" a channel on the right hand side.  Another would be to add margin-right to the images, so they "push off" the right edge, thus moving them closer to the center and the lists.
Ryan Ross, Developer at Diocesan
I meant to add...  that we do not want you frustrated!  That's the last thing we want.  As a general rule, if you find it takes more than 15 minutes to reasonably achieve what you're trying to do, then let us know.  Odds are there is either something wrong with the site and how we've set it up (and we'll fix it), there no current solution and we'll create one (in extremely rare cases there is no solution), or there's a very simple answer and/or explanation.  In any of these case, we're happy to help.  
Connie Wisdo
Hi Ryan and Veronica,

After much discussion today with the Website Committee here, they asked that we try a compromise = 18 px with 400 weight for paragraphs and bulleted/numbered lists.  
Ryan Ross, Developer at Diocesan
Connie Wisdo Connie Base font size is now 18px at 400 weight.