University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Font weight

Font weight

Font weight refers to the thickness or density of a typeface’s strokes. By adjusting font weight, you can improve the legibility of text, highlight critical information, and create a visual hierarchy on a web page or application. 

In CSS, the font-weight property specifies the weight, or thickness, of a font. Values range from 100 (thin) to 900 (bold), with regular weight typically set at 400 and bold at 700. For example, the following CSS code snippet sets the font weight of all text in the body of a webpage to bold:

body { font-weight: bold; }

In HTML, inline styles or linked CSS files define font weight. For example, the following inline style snippet sets the font weight for “this text is extra bold” to 700. 

<p style="font-weight: 700;">This text is extra bold.</p>

Visit Webflow University to learn more about using different font weights with variable fonts.

Relevant courses

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Left margin

→
Left margin is a CSS property that defines the space between an element's left edge and its surroundings.

Collection list

→
A Collection list is a Webflow element that lets you dynamically display content from a CMS Collection.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

UI state

→
The UI state changes how Collection lists display when you’re designing. The Items state is the default option, and shows the items that you have within the Collection. The Empty state doesn’t show these items and gives the designer the opportunity to design for a circumstance if/when there is no data to be displayed in the Collection list.

Inheritance

→
Inheritance describes a principle where child elements adopt the style properties of parent elements.

Media section

→
A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

Width: auto

→
The way browsers calculate an element's width automatically where Block level elements fill the available space of its parent and Inline elements shrink to the size of its children/content.

Webflow badge

→
A visible "Made in Webflow" badge displayed in the bottom right corner of Webflow sites on Starter plans.

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

User interface (UI)

→
A user interface (UI) is any visual element humans interact with on a device, webpage, or application.

Empty state

→
The state displayed when a Collection contains no Collection items, which gives you the opportunity to design for a situation where there's no content to display. Check out the Empty States blog for inspiration.

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Account notifications

→
Account notifications update you about activity in your account. New notifications appear on your Webflow Dashboard after you log in.

Resource Description Framework (RDF)

→
The Resource Description Framework (RDF) is a standardized framework developed by the World Wide Web Consortium (W3C) that facilitates automated data exchange between web systems and applications.

Bundling

→
Bundling, or bundle pricing, is a pricing technique in which retailers sell products together at a lower price than they would be sold at individually.

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Valid

→
A valid CSS pseudo-class is a keyword that enables styling HTML elements based on their state or position in the document structure or web page.

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

List

→
An element that contains ordered (numbered) or unordered (bulleted) lists.

Select field

→
A form element that allows you to make a selection in a dropdown list.

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

Structured Query Language (SQL)

→
Structured Query Language (SQL) is a programming language that enables storing, retrieving, and manipulating information in a relational database.

Cookie

→
Cookies are small text files sent by a website to a user’s web browser that enhance their browsing experience by remembering site preferences and activities.

Micro conversion

→
Micro conversions are small but important user actions on a website that contribute to the overall conversion funnel.

Character encoding

→
Character encoding is the process of representing characters (such as “a” or “3”) in a particular way, such as text on a computer screen.

Total asset size

→
The total weight of your site's HTML, CSS, JS, and images.

Designer

→
The main interface where you can build sites.

Node title

→
The type of element you're working with, i.e., H1, link, button, etc.

Unpublished change

→
A change that has been made in the Webflow Editor but will not appear on the live website until it’s published. You can track any unpublished changes on the bottom right of the Editor toolbar.

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Content management system (CMS)

→
A content management system (CMS) is a tool for creating and managing a website and its content.

Em

→
An em in CSS is a scalable and relative unit of measurement that defines the size of an element relative to its parent's font size.

CMS Collection page

→
A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

Columns

→
Columns let you create sections of content that sit side by side on your website, like the columns in newspapers. You can choose how many columns you want and their widths. You can also control how they display on smaller screens — such as stacking them.

Borders

→
The CSS border property delineates an HTML element.

Minimized CSS

→
A method of lowering the file size of your stylesheet(s) by removing all white space from your CSS files.

Constant

→
In coding, a constant is a fixed value that can’t change, no matter where it appears or what the program uses it for.

Interpolation

→
Interpolation is a mathematical process that estimates and creates new values based on known values and their relationship.

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

Cipher

→
In cryptography, a cipher is a digital security algorithm that encrypts and decrypts data.

Undo

→
To move backward one step while making changes to a Webflow site.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

XML sitemap (sitemap.xml)

→
An XML (Extensible Markup Language) sitemap is a text file that lists a website's pages to help search engines crawl and index them.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

Component Module

→
A section in the Add Panel that houses pre-built Webflow elements such as sliders, tabs, and lightboxes.

Dither

→
Dithering is a design technique that simulates additional colors on a display to smooth transitions in images with limited color palettes.

Page name

→
The title of a page in your site. This is visible in the Pages panel.

Primitive

→
A primitive is the simplest JavaScript data type, representing fundamental values that do not encapsulate any object, method, or property.

Heading

→
A heading is a text element that provides a title or headline for a section of content on a webpage. These elements guide users and search engines through your content.

Breadcrumb

→
A breadcrumb, or breadcrumb trail, is a navigational element representing a user’s current location within a website's hierarchical structure.

Pagination settings

→
Through the pagination settings, you can preview Collection list pages by choosing the page number from the page dropdown list, or you can switch to the previous or next page using the arrow keys.

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

Div block

→
A generic element that is typically used to group content, or when no other element is specifically or semantically suitable. Div blocks have no effect on the content or layout until styled with CSS.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Cipher suite

→
A cipher suite is a collection of encryption algorithms that work together to secure a network connection.

Abstraction

→
In object-oriented programming (OOP), abstraction conceals irrelevant details so they don’t interfere with the task at hand.

Background

→
A website background is a visual element behind webpage content, enhancing aesthetic appeal and user engagement.

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

CSS preprocessor

→
A CSS preprocessor is a program that helps developers write Cascading Style Sheets (CSS) by providing advanced features such as variables, functions, and nesting.

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

JPEG

→
Short for Joint Photographic Experts Group, JPEG is a file format that uses lossy compression to maintain manageable file sizes without compromising image quality.

Typography

→
A section in the Add panel that houses typography elements such as headings and paragraphs.

CSS (Cascading Style Sheets)

→
Cascading Style Sheets (CSS) is a web development language that controls the appearance of elements on a webpage.

Transfer site

→
You can transfer sites from one Workspace to another Workspace.

Strong text

→
The&nbsp;&lt;strong&gt;&nbsp;element defines important text with added semantic&nbsp;importance.

Product attribute

→
Product attributes are specific characteristics that define purchasable merchandise or commodities and provide relevant information to customers.

Site plan

→
A Webflow plan that you can add/apply to individual sites. You’ll receive access to different site and hosting features based on your Site plan.

Free plan

→
The perfect Webflow subscription&nbsp;for getting started, giving you access to all Designer features, so you can start building a site right away.

Color field

→
A color field specifies a graphical color picker or user interface for entering a color into a text field in a seven-character, hexadecimal format.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Argument

→
An argument is an independent value a function receives to deliver a specific output.

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

IP address

→
An IP (Internet Protocol) address is a unique string of characters identifying devices connected to the internet.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

Publish destination

→
The specific domain or subdomain where your Webflow site is displayed.

Flex-sizing

→
A flexbox property that determines the resizing behavior of flex children across viewport sizes. They can shrink, grow, or remain static.

Preview mode

→
A feature that allows you to see how your site would be displayed in a browser without needing to publish your site or leave the Designer.

Optimization

→
Optimization is a systematic approach to improve a website's appearance, functionality, and visual appeal to enhance the user experience, improve search engine rankings, and achieve business objectives.

Meta keywords

→
Meta keywords are words or phrases you can include in your web page's metadata.

Ancestor

→
Any element that is further up the element hierarchy of the document tree. For example, the Body element is the ancestor of all elements on the Designer canvas.

Redo

→
To move forward one step while making changes to a Webflow site.

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

Safe

→
"Safe" is a Hypertext Transfer Protocol (HTTP) method that doesn't modify the server's state or resources.

Return on investment (ROI)

→
Return on investment (ROI) is a metric evaluating the profitability or gain of a venture.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Modal window

→
A modal window (or modal) is a web element that displays above all content and restricts user interaction until it’s manually dismissed.

Middleware

→
Middleware is software that links different programs and applications, allowing them to interact and communicate effectively.

Single Instruction Single Data (SISD)

→
Single Instruction and Single Data Stream (SISD) is a computer architecture where a central processing unit (CPU) executes one instruction at a time on a single data piece.

Design mode

→
The mode that enables a designer to build in Webflow.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Empty elements

→
Empty or void elements are HTML elements that don’t require a closing tag because they contain no content.

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more