👋 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
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
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.
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
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.
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.
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.
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:
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.
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.
Perhaps we just need a way to override the paragraph and bulleted list font size in cases like this?
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.
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.