verbb / vizy

A flexible visual editor for Craft CMS
Other
43 stars 8 forks source link

Changing the wysiwyg typography css for better readability #141

Closed JeanLucEsser closed 1 year ago

JeanLucEsser commented 2 years ago

Filing this under issue on purpose (but you can change it to a FR) as i believe it is important.

I think it needs to be more obvious what is a h3 and below vs what is a paragraph in bold. As it stands, you cannot distinguish between an h3, an h4, some bold paragraph text and more. We should be able to immediately know which is which. Also there is no visual clue as to if there is bold in a heading.

My take, make all headings gray-500, no bold (or use bold and make the strong tag inside a heading gray-900), make paragraph gray-900, make h1, h2, h3 way bigger than paragraph, h4 the same size and h5, h6 smaller.

As it stands now:

image

As I see it (open to discussion):

image

What do you think?

engram-design commented 2 years ago

Thanks for the feedback and suggestions on this. My only real concern is the colour looks quite out of place in the control panel, so I would shy away from a straight grey colour (maybe more slate if you're in Tailwind-land).

I will also say the font scale is way, way too large for use in the control panel. At 36px it's practically screaming against everything else, so I think context is pretty important. This works on a front-end due to it being reserved for the page heading, or similar, but we've got a lot more things to deal with in the control panel. Vizy is after a little cog in the wheel when it comes to content entry most of the time. But I can also appreciate it needs tweaking a little.

I've actually just done a quick compare with Redactor and CKEditor, which interestingly have the exact same font scale and behaviour (apart from a slight colour shade difference) image

I'll likely take the lead from these plugins.

It actually looks like we're inheriting Craft's own heading rules, so we should fix that regardless.

engram-design commented 1 year ago

Updated in 2.1.0