Squarespace Guidelines
Font sizes
Header 1 - Only use once on the page - in the header
Header 2, 3, 4 - Use them within the page to break up the text for different types of headers
Paragraph 1 & 2 - Use these for the body text.
Paragraph 1 is used to pull out a key piece of text
Paragraph 2 is the default usual size text to be writing body copy
Paragraph 3 - this is the smallest text and should be used sparingly. This could be used for footnotes or potentially within the footer content.
Fluid Engine keyboard shortcuts
[G] = Grid - this shows and hides the grid within a section.
[Cmd + C] or [Ctrl + C] = Copy - This can copy a block or selection of blocks. When moving the mouse into another section, you can the ‘Paste’ them in.
[Cmd + V] or [Ctrl + V] = Paste - This follows the copy block section - but pastes it in.
[Cmd + D] or [Ctrl + D] = Duplicates - where appropriate this can duplicate a block.
Hold shift and drag over blocks - this multi-selects blocks to either copy, delete, move or duplicate.
Keyboard arrows - Select a block and then using the keyboard arrows, you can nudge the block moving it around in a controlled manner
Hold shift and press return/enter - this takes out the extra carriage return that would naturally separate text, to make it smaller together. This technique is used in the footer to make the links closer together.
Image dimensions and file size
Header image - 1500px x 1000px (width x height).
It should be the width being set that doesn’t change - but the height can be the variable so doesn’t always have to be the same as specified
In page images - 750px x 500px (width x height).
Use the principle that the image will likely be half the page size, so take half the original dimensions.
File size - Aim for a header image to be the following
~600kb = file size
72dpi = web standard - only set if using Photoshop or equivalent
The images should ideally be no more than 600kb due to making sure the web page can load in a speedy manner. This is more so for those using a mobile device.
Editing images to reduce the file size - if you don’t have Photoshop, then you can use Pixlr X for free -> https://pixlr.com/x/
Reminders
Always check both desktop and mobile view - you need to design for both screen sizes.