Skip to content

[Canvas theme] Styling pages #1890

Open
@bertheyman

Description

@bertheyman

This is a questions about the layout of Canvas pages when using the default Infrastructure theme.
If this is not the correct place, I'd be happy to know where the question is best addressed.

Question

I'm a lecturer using Canvas LMS. During lectures, we spend a lot of time in Canvas pages.
There's a couple of small changes I'd like to propose that might help to improve readability:

  • Text lines can get quite long. Typically, 7–12 words per line is recommended for optimal readability.
  • Depending on padding, some titles can be closer to the text above them (see "job overview" in the example below) than the next paragraph below them. Having them closest to their own text helps the text hierarchy and makes it easier to scan. Some colleagues migitate this by adding enters for whitespace, but that makes things messy if those are copy pasted later.

Code Sample

❗️Apart from line length and title padding, the font size is also different in these screenshots.

Example: default styling

Image Image

Example: styling with more whitespace (maybe even a bit much) and shorter text lines

Image Image

Additional Details

An example where I personally enjoy the readability / spacing:
https://dev.to/devteam/join-our-first-ever-wecoded-challenge-celebrating-underrepresented-voices-in-tech-through-stories-5m5

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions